/* 产品详情页「同型号颜色整合 + 规格表 + 应用场景画廊」区块  v2
   参照 dd3.cc/filament/pla-plus 的形态：色块网格（右栏）+ Specifications 表（左栏图片下方，两列）
   注意：/_assets/* 是 immutable 一年缓存，改内容必须换文件名（本文件为 index2.css，
        已由 index.css 升级而来，页面引用同步切换） */

/* ---------- 公共 ---------- */
.noray-pd {
  margin: 26px 0 0;
  color: #5a6169;
}

.noray-pd h2 {
  margin: 0 0 12px;
  color: #212121;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
}

.noray-pd h2 .pd-count {
  font-size: 15px;
  font-weight: 500;
  color: #8a9198;
}

/* ---------- 色块网格（右栏） ---------- */
.noray-pd .pd-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.noray-pd .pd-swatches li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid #e6e8ea;
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  line-height: 1.3;
  color: #3d444b;
}

.noray-pd .pd-swatches li i {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .16);
}

.noray-pd .pd-swatches li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.noray-pd .pd-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: #8a9198;
}

/* ---------- Specifications 参数表（左栏图片下方，两列排列） ----------
   结构：每行放两组「参数名 | 参数值」，4 列单元格 → 视觉上两列并排 */
.noray-pd.pd-specs {
  margin: 22px 0 0;
}

.noray-pd.pd-specs table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid #e6e8ea;
  border-radius: 8px;
  overflow: hidden;
  table-layout: fixed;
}

.noray-pd.pd-specs th,
.noray-pd.pd-specs td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #eef0f2;
  word-break: break-word;
}

.noray-pd.pd-specs tr:last-child th,
.noray-pd.pd-specs tr:last-child td {
  border-bottom: 0;
}

/* 参数名列：灰底 */
.noray-pd.pd-specs th {
  width: 25%;
  background: #f7f8f9;
  color: #212121;
  font-weight: 600;
  font-size: 12.5px;
}

/* 第二个参数名列：与第一组之间加分隔线 */
.noray-pd.pd-specs th:nth-child(3) {
  border-left: 1px solid #eef0f2;
  width: 25%;
}

.noray-pd.pd-specs td {
  width: 25%;
  color: #5a6169;
}

.noray-pd.pd-specs td:nth-child(4) {
  border-left: 1px solid #eef0f2;
}

.noray-pd.pd-specs td.pd-empty {
  background: #fcfcfd;
}

/* ---------- 应用场景画廊（Applications 段下方，2 列 + 缩小） ----------
   详情区场景图多是超长竖图（750×2300 这类），满宽展示会撑出三千多像素。
   这里改成 2 列网格，图片按列宽自适应缩放 —— 宽度减半 → 高度同步减半，
   内容完整不裁切，整页长度也砍掉一半以上。 */
.noray-app-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 0;
  align-items: start;
}

.noray-app-gallery .noray-app-fig {
  margin: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #eceef0;
  border-radius: 10px;
  text-align: center;
  min-width: 0;
}

.noray-app-gallery .noray-app-fig img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* 单张图时居中收窄，避免一张图占满 2 列宽 */
.noray-app-gallery.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.noray-app-gallery.is-single .noray-app-fig {
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 767px) {
  .noray-pd .pd-swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .noray-pd h2 {
    font-size: 17px;
  }
  .noray-app-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}