/* ==========================================================================
   EEYUN · /pro/ 产品详情页统一外观（规格单语言）
   --------------------------------------------------------------------------
   只改外观，不动结构。全部选择器以 .blog-details-area 为根，避免影响
   导航、页脚和其它页面的同名类（.thumb / .abutton / .btn-* 在主题里是共用的）。

   设计要点
   · 面包屑降为微字灰色，类别保留品牌红
   · 型号大标题：26–34px、负字距、墨色
   · 勾选用细横线分行的规格行，红勾 14px
   · 段落 15px/1.85 灰；分区标签改成「红色小标 + 短线」
   · 规格表：去掉斑马纹，标签列做微字大写字距，行行细线
   · 主图/缩略图/关联卡统一 1px 细线白底、直角、图片 contain
   · 关联卡的彩虹色按钮统一成中性细线 chip，型号单独强调
   ========================================================================== */

/* ---------- 页面内边距 ---------- */
.blog-details-area { padding: 30px 0 10px; }

/* ---------- 面包屑 ---------- */
.blog-details-area .col-12 > .mb-10:first-child {
  margin-bottom: 16px !important;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #b6c1c5; font-weight: 500;
}
.blog-details-area .col-12 > .mb-10:first-child > a {
  color: #c8102e; font-weight: 600; text-decoration: none;
}
.blog-details-area .col-12 > .mb-10:first-child > a:hover { text-decoration: underline; }

/* ---------- 型号大标题 ---------- */
.blog-details-area h1 {
  margin: 0 0 2px !important;
  font-size: clamp(26px, 2.5vw, 34px); line-height: 1.18; letter-spacing: -.02em;
  font-weight: 600; color: #0c1a1e;
}
/* H1 下方一行规格副标题：把深度 / 结构 / 材质带进 H1，视觉上仍是小字注释 */
.blog-details-area h1 .h1-spec {
  display: block;
  margin-top: 9px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .03em;
  line-height: 1.5; color: #6b7a80; text-transform: none;
}

/* ---------- 勾选项 → 规格行 ---------- */
.blog-details-area .content .col-lg-6 p:empty { display: none; }
.blog-details-area .content .col-lg-6 p {
  display: flex; align-items: center; gap: 9px;
  margin: 0; padding: 8px 0;
  font-size: 13.5px; line-height: 1.55; color: #3f5158;
  border-bottom: 1px solid #f1f4f5;
}
.blog-details-area .content .col-lg-6 p svg { flex: 0 0 auto; width: 14px; height: 14px; }
.blog-details-area .content .col-lg-6 p .greenc { color: #c8102e; }

/* 细线分隔 */
.blog-details-area hr {
  border: 0; border-top: 1px solid #e3e9eb; opacity: 1; margin: 14px 0;
}

/* ---------- 表面处理（色卡） ---------- */
.blog-details-area .content .col-lg-6 .border-right {
  border-right: 0 !important;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #8a979d; line-height: 1.4; padding-top: 6px;
}
.blog-details-area .content .col-lg-6 .row.col-9 > .row { align-items: center; row-gap: 2px; }
.blog-details-area .content .col-lg-6 .row.col-9 > .row > .col-6 {
  flex: 0 0 auto; width: auto; max-width: none;
  font-size: 12.5px; color: #5b6a70; padding-right: 10px; line-height: 1.6;
}
.blog-details-area .content .col-lg-6 .row.col-9 > .row > [class*="col-"]:not(.col-6) {
  flex: 0 0 auto; width: auto; max-width: none; padding: 0 4px 0 0;
}
.blog-details-area .content .col-lg-6 .silverb,
.blog-details-area .content .col-lg-6 .blackb,
.blog-details-area .content .col-lg-6 .whiteb,
.blog-details-area .content .col-lg-6 .colorb {
  height: 15px !important; width: 15px !important; min-width: 15px;
  border-radius: 50%; margin-left: 6px; display: inline-block;
  box-shadow: 0 0 0 1px #e3e9eb inset;
}

/* ---------- 分区标签（Product Description / Specifications / …） ---------- */
.blog-details-area .abutton {
  display: flex; align-items: center; gap: 10px;
  padding: 0 !important; margin: 30px 0 14px !important;
  box-shadow: none !important; background: none !important;
  font-size: 10.5px !important; line-height: 1.4;
  font-weight: 600 !important; letter-spacing: .18em; text-transform: uppercase;
  color: #c8102e !important;
}
.blog-details-area .abutton::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 2px; background: #c8102e;
}
.blog-details-area .abutton a { color: #c8102e !important; text-decoration: none; letter-spacing: inherit; }
.blog-details-area .abutton a:hover { text-decoration: underline; }

/* ---------- 正文段落 ---------- */
.blog-details-area .col-12 > p:not(:empty) {
  margin: 0; font-size: 15px; line-height: 1.85; color: #5b6a70;
}

/* ---------- 规格表：去斑马纹，细线两列 ---------- */
.blog-details-area table.table,
.blog-details-area table.table-striped {
  width: 100%; border-collapse: collapse; background: transparent !important;
  --bs-table-bg: transparent; --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: transparent; --bs-table-border-color: #eceff1;
  margin: 0;
}
.blog-details-area table.table > :not(caption) > * > * {
  background: transparent !important; border-top: 0;
  border-bottom: 1px solid #eceff1;
  padding: 11px 0; box-shadow: none !important;
}
.blog-details-area table.table tbody tr:first-child > * {
  border-top: 1px solid #e3e9eb;
}
.blog-details-area table.table th {
  width: 230px; vertical-align: middle;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: #8a979d; white-space: nowrap;
}
.blog-details-area table.table td {
  font-size: 13.8px; line-height: 1.6; color: #0c1a1e;
  font-variant-numeric: tabular-nums;
}

/* ---------- 主图 ---------- */
.blog-details-area .col-lg-6 .roundline.causes-item {
  border: 1px solid #e6ebec; border-radius: 0; padding: 16px;
  background: #fff; box-shadow: none;
}
.blog-details-area .col-lg-6 .roundline.causes-item .thumb {
  margin: 0; border-radius: 0; overflow: visible;
  display: flex; align-items: center; justify-content: center;
}
.blog-details-area .col-lg-6 .roundline.causes-item img#tup {
  display: block; width: 100%; max-width: 100%; height: auto;
  max-height: 520px; object-fit: contain;
}

/* 缩略图：小方图 + 细线，选中态红边 */
.blog-details-area .row.mt-10 > .col-3 { cursor: pointer; }
.blog-details-area .row.mt-10 > .col-3 .roundline {
  border: 1px solid #eef2f3; border-radius: 0; padding: 6px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; transition: border-color .2s ease;
}
.blog-details-area .row.mt-10 > .col-3 .roundline:hover { border-color: #c8102e; }
.blog-details-area .row.mt-10 > .col-3 .roundline img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* ---------- 关联配件 / 关联产品卡片 ---------- */
.blog-details-area .causes-item { background: transparent; border: 0; box-shadow: none; }
.blog-details-area .row > .col-md-4 .causes-item .thumb,
.blog-details-area .row > .col-lg-3 .causes-item .thumb {
  margin: 0 0 10px; border: 1px solid #eef2f3; border-radius: 0; background: #fff;
  overflow: hidden; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; padding: 10px;
  transition: border-color .2s ease;
}
.blog-details-area .row > .col-md-4 .causes-item .thumb:hover,
.blog-details-area .row > .col-lg-3 .causes-item .thumb:hover { border-color: #dfe7e9; }
.blog-details-area .causes-item .thumb a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.blog-details-area .causes-item .thumb img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform .35s ease;
}
.blog-details-area .causes-item .thumb:hover img { transform: scale(1.05); }

/* 卡片下方信息行：靠右对齐，型号实心 chip 打头，其余中性细线 chip
   float-contact.css 给 .causes-item .mt-10 写了 min-height:112px（当年五行标签时留的高度），
   现在标签只剩一行，这 112px 就是标签下方那片白，必须清掉；
   但完全贴底又太挤，改用 padding-bottom 留 14px（margin 会穿透父级底边，留不住） */
.blog-details-area .causes-item:not(.roundline) { padding-bottom: 14px; }
.blog-details-area .causes-item .mt-10 { min-height: 0 !important; align-content: center; }
.blog-details-area .causes-item .d-flex {
  justify-content: flex-end !important;
  align-items: center; gap: 5px;
  margin: 9px 0 0 !important;
}
.blog-details-area .btn-jianju {
  margin: 0 !important;
  padding: 3px 8px; border-radius: 0; line-height: 1.5;
  font-size: 10.5px; letter-spacing: .02em; font-weight: 500;
  background: transparent !important; border: 1px solid #e3e9eb !important;
  color: #6d7b81 !important; box-shadow: none !important;
  text-transform: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.blog-details-area .btn-jianju:hover { border-color: #c8102e !important; color: #c8102e !important; }
/* 型号 chip：实心墨色，和右侧属性 chip 同一形态，只是加重 */
.blog-details-area .btn-blueshen {
  background: #0c1a1e !important; border: 1px solid #0c1a1e !important;
  padding: 3px 8px !important; margin-right: 2px !important;
  font-size: 10.5px !important; font-weight: 600 !important; color: #fff !important;
  letter-spacing: .04em; border-radius: 0;
}
.blog-details-area .btn-blueshen:hover { background: #c8102e !important; border-color: #c8102e !important; color: #fff !important; }

/* 缩略图右上角规格角标：白底细线，不抢图片 */
.blog-details-area .causes-item .rb .btn {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid #e3e9eb !important; border-radius: 0;
  color: #0c1a1e !important; font-size: 10px; font-weight: 600;
  letter-spacing: .06em; padding: 2px 6px !important; line-height: 1.4;
  box-shadow: none !important;
}

/* 深度规格 chip（15MM / 20MM 这类 btn-primary）不占卡底信息行，
   直接挪到图片框左上角做角标，行里只留型号 + 属性，更清爽 */
.blog-details-area .causes-item:not(.roundline) { position: relative; }
.blog-details-area .causes-item .d-flex > .btn-primary.btn-jianju {
  position: absolute; top: 11px; left: 11px; z-index: 3;
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid #e3e9eb !important;
  color: #0c1a1e !important;
  font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: .06em; line-height: 1.4;
  padding: 2px 6px !important; margin: 0 !important;
  box-shadow: none !important;
}
.blog-details-area .causes-item .d-flex > .btn-primary.btn-jianju:hover {
  background: #fff !important; border-color: #c8102e !important; color: #c8102e !important;
}

/* ---------- 小屏 ---------- */
@media (max-width: 767px) {
  .blog-details-area { padding: 18px 0 6px; }
  .blog-details-area h1 { font-size: 24px; }
  .blog-details-area h1 .h1-spec { font-size: 11.5px; margin-top: 7px; }
  .blog-details-area .col-lg-6 .roundline.causes-item { padding: 10px; }
  .blog-details-area .col-lg-6 .roundline.causes-item img#tup { width: 100%; height: 320px; max-height: 320px; object-fit: contain; }
  .blog-details-area .content .col-lg-6 p { font-size: 13px; padding: 7px 0; }
  .blog-details-area .content .col-lg-6 .border-right { font-size: 9.5px; letter-spacing: .08em; }
  .blog-details-area .content .col-lg-6 .row.col-9 > .row > .col-6 { font-size: 11.5px; padding-right: 6px; }
  .blog-details-area .content .col-lg-6 .silverb,
  .blog-details-area .content .col-lg-6 .blackb,
  .blog-details-area .content .col-lg-6 .whiteb,
  .blog-details-area .content .col-lg-6 .colorb { height: 12px !important; width: 12px !important; min-width: 12px; }
  .blog-details-area .abutton { margin: 22px 0 12px !important; }
  /* 表格保持表格布局，改由外层 col-12 横向滚动，避免标签和取值挤在一起 */
  .blog-details-area .col-12 { overflow-x: auto; }
  .blog-details-area table.table th { width: auto; white-space: normal; padding-right: 14px; }
  .blog-details-area table.table td { font-size: 12.5px; min-width: 72px; }
  /* 只作用于关联卡片的图框，别把详情主图也做成正方形 */
  .blog-details-area .row > .col-md-4 .causes-item .thumb,
  .blog-details-area .row > .col-lg-3 .causes-item .thumb { aspect-ratio: 1 / 1; padding: 6px; }
  .blog-details-area .btn-jianju { font-size: 10px; padding: 3px 6px; }
}

/* ===== 产品页正文扩展块：Application & Selection Notes / Quick Answers ===== */
.blog-details-area .pro-note .abutton,
.blog-details-area .pro-qa .abutton {
  margin-bottom: 4px;
}
.blog-details-area .pro-note h3 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0c1a1e;
  margin: 24px 0 7px;
  line-height: 1.4;
}
.blog-details-area .pro-note p {
  font-size: 14.5px;
  line-height: 1.82;
  color: #5b6a70;
  margin: 0;
}
.blog-details-area .pro-note p:last-child {
  margin-bottom: 2px;
}
.blog-details-area .pro-qa p {
  font-size: 14.3px;
  line-height: 1.75;
  color: #5b6a70;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid #e3e9eb;
}
.blog-details-area .pro-qa p:first-of-type {
  border-top: 0;
  padding-top: 6px;
}
.blog-details-area .pro-qa p strong {
  display: inline-block;
  font-weight: 600;
  color: #0c1a1e;
  letter-spacing: .01em;
  margin-bottom: 3px;
}
@media (max-width: 767px) {
  .blog-details-area .pro-note h3 { font-size: 10.8px; margin: 20px 0 6px; }
  .blog-details-area .pro-note p { font-size: 13.6px; line-height: 1.78; }
  .blog-details-area .pro-qa p { font-size: 13.4px; line-height: 1.72; }
}