/* ==========================================================================

   ========================================================================== */

.zr-catalog-demo {
  margin: 0;
  padding: 24px 16px;
  background: #ececed;
}

/* 所有产品页规则均限制在唯一根节点内，避免污染宿主页面 */
@scope (#zr-product-sheet) {
  :scope {
    --orange: #ef7f1a;
    --ink: #231f20;
    --ink-soft: #3c3c3c;
    --gray: #6b6b6b;
    --line: #d8d8d8;
    --paper: #ffffff;
    --shell: #ececed;
    color: var(--ink);
    font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
      "Source Han Sans SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    box-sizing: border-box;
  }

  :scope *,
  :scope *::before,
  :scope *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  img {
    display: block;
    max-width: 100%;
  }

/* ---------- 跨页容器 ---------- */
:scope {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  background: var(--paper);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.page {
  position: relative;
  width: 50%;
  aspect-ratio: 800 / 1131;
  background: var(--paper);
  container-type: inline-size;
  overflow: hidden;
}

/* =========================================================================
   左页 09
   ========================================================================= */
.brand-logo {
  position: absolute;
  left: 8.13%;
  top: 2.9%;
  width: 22.5%;
}

.product-main {
  position: absolute;
  left: 15%;
  top: 7.6%;
  width: 71.25%;
}

.detail-thumbs {
  position: absolute;
  left: 46.75%;
  top: 40.1%;
  width: 43.5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.detail-thumb {
  width: 100%;
  min-width: 0;
}

.product-title {
  position: absolute;
  left: 10.25%;
  top: 44.3%;
}

.model,
.type {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.12cqw;
  line-height: 1.35;
}

.model {
  font-size: 4.05cqw;
}

.type {
  font-size: 3.6cqw;
}

/* ---------- 区块通用 ---------- */
.block {
  position: absolute;
}

.section-title {
  position: relative;
  font-size: 2.3cqw;
  font-weight: 700;
  color: var(--ink);
  padding: 0 0 0.55cqw 2.2cqw;
  border-bottom: 0.13cqw solid var(--orange);
}

.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.13cqw;
  width: 12.5cqw;
  height: 0.3cqw;
  background: var(--ink);
}

/* ---------- 左页内容流：模块由内容自然撑高 ---------- */
.product-content-flow {
  position: absolute;
  left: 8.5%;
  top: 53.2%;
  width: 80.9%;
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
}

.product-content-flow .block {
  position: static;
  width: 100%;
}

.block-features {
  min-height: 0;
}

.feature-list {
  list-style: none;
  margin-top: 1.25cqw;
}

.feature-list li {
  position: relative;
  font-size: 1.85cqw;
  line-height: 1.35;
  color: var(--ink-soft);
  padding-left: 1.8cqw;
  margin-bottom: 0.82cqw;
  text-align: left;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55cqw;
  width: 0;
  height: 0;
  border-left: 0.62cqw solid var(--ink-soft);
  border-top: 0.42cqw solid transparent;
  border-bottom: 0.42cqw solid transparent;
}

/* ---------- 参数规格 ---------- */
.block-specs {
  min-height: 0;
}

.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4.5cqw;
  margin-top: 1.6cqw;
}

.spec-row {
  display: flex;
  align-items: baseline;
  font-size: 1.85cqw;
  line-height: 1.35;
  margin-bottom: 0.45cqw;
  color: var(--ink-soft);
}

.spec-row dt {
  flex: none;
  color: var(--ink-soft);
}

.spec-row dt::after {
  content: "：";
}

.spec-row dt.spaced {
  letter-spacing: 0.55cqw;
}

.spec-row dd {
  margin-left: 0.6cqw;
  color: var(--ink-soft);
}

/* ---------- 页脚 ---------- */
.page-foot {
  position: absolute;
  bottom: 3.5%;
  display: flex;
  align-items: center;
  gap: 0.9cqw;
}

.foot-left {
  left: 3.75%;
}

.foot-right {
  right: 3.75%;
}

.page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4cqw;
  padding: 0.2cqw 0.6cqw;
  background: var(--orange);
  color: var(--paper);
  font-size: 1.8cqw;
  font-weight: 700;
  letter-spacing: 0.08cqw;
}

.foot-mark {
  width: 4.7cqw;
}

/* =========================================================================
   右页 10
   ========================================================================= */
.chart-title {
  font-size: 2.55cqw;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  padding-bottom: 0.7cqw;
  border-bottom: 0.13cqw solid var(--orange);
}

.chart-title small {
  font-size: 1.8cqw;
  font-weight: 700;
}

.chart-title--sm {
  font-size: 1.7cqw;
  padding-bottom: 0.5cqw;
}

/* ---------- 光束角示意图 ---------- */
.block-beam {
  left: 68.5%;
  top: 13.2%;
  width: 21.5%;
}

.beam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0.5cqw;
}

.beam-img {
  width: 100%;
  min-width: 0;
}

/* ---------- 配光曲线图 ---------- */
.block-photometric {
  left: 9.375%;
  top: 25.5%;
  width: 80.6%;
}

.curve-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 1.5cqw;
}

.curve-grid figure {
  min-width: 0;
}

.photometric-img {
  width: 100%;
}

.curve-grid figcaption {
  margin-top: 0.4cqw;
  text-align: center;
  font-size: 2.1cqw;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- 产品尺寸图 ---------- */
.block-dimension {
  left: 9.375%;
  top: 48.7%;
  width: 80.6%;
}

.dimension-img {
  width: 63.2%;
  margin: 4cqw auto 0;
}

/* ---------- 安装示意图 ---------- */
.block-install {
  left: 9.375%;
  top: 70%;
  width: 80.6%;
  height: 26%;
}

.install-img {
  position: absolute;
}

.install-img-1 {
  left: 12.2%;
  top: 42%;
  width: 51.3%;
}

.install-img-2 {
  left: 65%;
  top: 32%;
  width: 18%;
}

/* =========================================================================
   图片放大查看
   ========================================================================= */
.zoomable {
  cursor: zoom-in;
  transition: filter 0.2s ease;
}

.zoomable:hover {
  filter: brightness(0.97);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  isolation: isolate;
  background: rgba(20, 20, 20, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-img {
  max-width: 96vw;
  max-height: 92vh;
  background: var(--paper);
  padding: 8px;
}

.lightbox-close {
  position: absolute;
  top: 2vmin;
  right: 3vmin;
  width: 44px;
  height: 44px;
  font-size: 30px;
  line-height: 1;
  color: var(--paper);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* =========================================================================
   响应式：窄屏上下堆叠（版式比例保持不变）
   ========================================================================= */
@media (max-width: 900px) {
  body {
    padding: 12px 8px;
  }

  :scope {
    flex-direction: column;
  }

  .page {
    width: 100%;
  }

  .page-left {
    border-bottom: 1px solid var(--line);
  }
}

/* ---------- 打印 ---------- */
@media print {
  body {
    padding: 0;
    background: #fff;
  }

  :scope {
    box-shadow: none;
    max-width: none;
  }

  .lightbox {
    display: none !important;
  }
}
}

/* 以下仅服务于独立预览页，不会影响嵌入时的宿主页面 */
@media (max-width: 900px) {
  .zr-catalog-demo {
    padding: 12px 8px;
  }
}

@media print {
  .zr-catalog-demo {
    padding: 0;
    background: #fff;
  }
}