/* ============================================================
   产品溯源介绍页 样式表
   配色 / 字号 / 间距均按原站 prod.yipsoa.com 真实值还原：
   - 主紫色 #704c89   - 标准区背景 #f9f2ff  - 标准区左边框 #8a2be2
   - 浏览条底 #EEEEEE - 正文灰 #727272      - 分割线 #efefef
   改外观只需要改本文件，无需动 HTML / JS
   ============================================================ */

/* ---------- 设计变量（集中管理，改主题色改这里即可） ---------- */
:root {
  --color-primary: #704c89;        /* 主紫色：标题栏、强调文字 */
  --color-standard-bg: #f9f2ff;    /* 执行标准区背景 */
  --color-standard-border: #8a2be2;/* 执行标准区左侧竖条 */
  --color-view-bg: #eeeeee;        /* 浏览次数条背景 */
  --color-text: #727272;           /* 正文文字灰 */
  --color-standard-text: #333333;  /* 标准区内容文字 */
  --color-line: #efefef;           /* 分割线 */
  --color-brand-red: red;          /* 品牌名红色 */
  --content-width: 90%;            /* 内容区块统一宽度 */
  --bar-width: 92%;                /* 标题栏 / 浏览条宽度 */
}

/* ---------- 基础重置（对齐原站 xadmin.css 的全局设置） ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 西文字体栈与原站一致，中文回退到系统中文字体 */
  font-family: "Helvetica Neue", Helvetica, Arial,
               "PingFang SC", "Microsoft YaHei", sans-serif;
}

html {
  width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  background: #ffffff;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
}

/* ============================================================
   1. 顶部：产品图片 + 信息表
   ============================================================ */
.header-wrap {
  width: var(--content-width);
  margin: 0 auto;
  padding: 15px;
  padding-bottom: 0;
  background: #ffffff;
}

.header-row {
  display: flex;       /* 用 flex 替代原站的 float，比例仍为 37% / 63% */
  align-items: flex-start;
}

/* 左：产品图片列 */
.product-image-col {
  width: 37%;
  padding: 7.5px 0 0 0;
}

.product-image-box {
  height: 245px;
  margin-top: 8px;
  border: 1px solid var(--color-line);
  overflow: hidden;
}

.product-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
}

/* 右：产品信息列 */
.product-info-col {
  width: 63%;
  margin: 15px 0;
  border-right: 1px solid var(--color-line);
}

.info-card {
  height: 245px;
}

.info-row {
  border-bottom: 1px solid var(--color-line);
  padding: 12px 10px;
  font-size: 16px;
  line-height: 1.5;
}

.info-row:first-child {
  border-top: 1px solid var(--color-line);
}

.info-row label {
  font-weight: bold;
  color: #333333;
}

.info-row span {
  color: var(--color-text);
  padding-left: 10px;
  font-weight: normal;
}

/* 产品名称较长，允许换行 */
.product-name {
  display: inline-block;
  font-size: 15px;
  max-width: 76%;
}

.pl-15 { padding-left: 15px !important; }
.pl-30 { padding-left: 30px !important; }
.manufacturer { font-size: 14px !important; }

/* ============================================================
   2. 执行标准及等级
   ============================================================ */
.standards-wrap {
  width: var(--content-width);
  margin: 15px auto;
  padding: 12px;
  background-color: var(--color-standard-bg);
  border-left: 4px solid var(--color-standard-border);
  border-radius: 4px;
}

.standards-grid {
  display: flex;
  flex-wrap: wrap;
  color: var(--color-primary);
}

.standard-item {
  width: 50%;
  padding: 5px 0;
}

.standard-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 3px;
}

.standard-text {
  color: var(--color-standard-text);
  font-size: 15px;
  line-height: 1.6;
  padding-right: 12px;
}

/* ============================================================
   3. 浏览次数条
   ============================================================ */
.view-bar {
  width: var(--bar-width);
  margin: 20px auto;
  text-align: center;
  line-height: 80px;
  background: var(--color-view-bg);
  font-size: 24px;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.eye-icon {
  width: 26px;
  height: 26px;
  fill: var(--color-primary);
}

/* ============================================================
   4. 紫色栏目标题（产品介绍 / 涂布率）
   ============================================================ */
.section-title {
  width: var(--bar-width);
  margin: 0 auto;
  text-align: center;
  color: #ffffff;
  line-height: 60px;
  background: var(--color-primary);
  font-size: 30px;
  border-radius: 10px;
}

/* ============================================================
   5. 正文段落
   ============================================================ */
.section-text {
  width: var(--content-width);
  margin: 15px auto;
  font-size: 24px;
  color: var(--color-text);
  line-height: 1.7;
}

/* ============================================================
   6. 备注 + 公众号引导
   ============================================================ */
.remark {
  width: var(--content-width);
  margin: 15px auto;
  font-size: 18px;
  color: var(--color-primary);
  line-height: 1.7;
}

.follow-tip {
  width: var(--content-width);
  margin: 15px auto;
  font-size: 18px;
}

.follow-tip a {
  color: var(--color-primary);
  font-weight: bold;
}

.brand-red {
  color: var(--color-brand-red) !important;
  padding: 0 !important;
}

/* ============================================================
   7. 响应式布局
   原站仅对产品名称宽度做了断点；此处保留该逻辑，并补充
   手机端堆叠优化（原站小屏会按 37/63 挤压，这里改为上下排列）
   ============================================================ */

/* 产品名称宽度：对齐原站断点 */
.product-name { width: 170px; max-width: 76%; }
@media (min-width: 768px) {
  .product-name { width: 500px; }
}

/* 平板及手机：顶部保持左图右表并排（不堆叠）；执行标准区保持两列 */
@media (max-width: 767px) {
  .info-card {
    height: auto;
  }
  .section-title {
    font-size: 24px;
    line-height: 52px;
  }
  .section-text {
    font-size: 18px;
  }
  .view-bar {
    font-size: 18px;
    line-height: 60px;
  }
}

/* 窄屏手机：进一步收紧字号与间距 */
@media (max-width: 400px) {
  .section-title { font-size: 20px; }
  .section-text { font-size: 16px; }
  .remark, .follow-tip { font-size: 15px; }
  .product-image-box { height: 200px; }
}