.sa-product-editor-details {
  padding-block: clamp(56px, 6vw, 88px);
  border-bottom: 1px solid var(--sa-border, #e5e7eb);
  background: #fff;
}

.sa-product-editor-details__content {
  display: flow-root;
  color: var(--sa-text-2, #4b5563);
  /* 全局 .entry-content 带 margin-top: 34px，是给「标题+正文」结构用的；
     这里正文直接贴着区块 padding，再叠 34px 就成了文案上方的大段死白。 */
  margin-top: 0;
}

.sa-product-editor-details__content > :first-child {
  margin-top: 0;
}

.sa-product-editor-details__content > :last-child {
  margin-bottom: 0;
}

.sa-product-editor-details__content :where(h2, h3, h4) {
  color: var(--sa-primary, #0f172a);
  font-weight: 620;
  letter-spacing: -.035em;
}

/* 正文从后台编辑器来，是一串平铺的 h2/h3/p/ul/table/img。层级要靠间距和分隔线
   区分：每个 h2 是一节，上方留大间距并画分隔线；h3 是节内小标题，只留中等间距、
   不画线（以前线画在 h3 上，h2 反而贴着上一段列表，层级看起来是反的）。 */
.sa-product-editor-details__content h2 {
  margin: 0 0 20px;
  font-size: clamp(28px, 2.6vw, 36px);
  letter-spacing: -.028em;
  line-height: 1.2;
}

.sa-product-editor-details__content > h2:not(:first-child) {
  margin-top: clamp(56px, 6vw, 80px);
  padding-top: clamp(40px, 4vw, 56px);
  border-top: 1px solid var(--sa-border, #e5e7eb);
}

.sa-product-editor-details__content h3 {
  margin: 0 0 14px;
  padding-top: 0;
  border-top: 0;
  font-size: clamp(21px, 1.9vw, 25px);
  letter-spacing: -.022em;
  line-height: 1.26;
}

/* 不限直接子元素：正文若包在分组区块（Group 等）里，里面的 h3 同样要留上间距。 */
.sa-product-editor-details__content h3:not(:first-child) {
  margin-top: clamp(36px, 3.6vw, 48px);
}

.sa-product-editor-details__content h4 {
  margin: 38px 0 14px;
  font-size: 18px;
  letter-spacing: -.015em;
  line-height: 1.35;
}

.sa-product-editor-details__content :where(p, ul, ol, blockquote) {
  font-size: 17px;
  line-height: 1.85;
}

/* 段落、列表、表格之间统一 20px；不用 :where()，否则会被全局 .entry-content 和
   重置样式里同级或更高权重的 margin 规则吃掉，段落和列表就贴在一起了。 */
.sa-product-editor-details__content :is(p, ul, ol, blockquote, table, .wp-block-table) + :is(p, ul, ol, blockquote, table, .wp-block-table) {
  margin-top: 20px;
}

.sa-product-editor-details__content > :is(h2, h3, h4) + * {
  margin-top: 0;
}

.sa-product-editor-details__content ul {
  list-style: disc;
}

.sa-product-editor-details__content ol {
  list-style: decimal;
}

.sa-product-editor-details__content :where(ul, ol) {
  padding-left: 1.25em;
}

.sa-product-editor-details__content :where(ul, ol) li + li {
  margin-top: 10px;
}

.sa-product-editor-details__content :where(ul, ol) li::marker {
  color: var(--sa-compression-blue, #0786ce);
}

.sa-product-editor-details__content a:not(.btn, .wp-block-button__link) {
  color: var(--sa-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sa-product-editor-details__content a:not(.btn, .wp-block-button__link):hover {
  color: var(--sa-accent-deep-hover);
}

.sa-product-editor-details__content :where(ul, ol) strong {
  color: var(--sa-primary, #0f172a);
  font-weight: 620;
}

.sa-product-editor-details__content > :where(figure, .wp-block-image, .wp-block-gallery, .wp-block-columns, .wp-block-table, .wp-block-video, .wp-block-embed) {
  margin-block: clamp(44px, 5vw, 68px);
}

.sa-product-editor-details__content figure {
  margin-inline: 0;
}

.sa-product-editor-details__content figure img,
.sa-product-editor-details__content video,
.sa-product-editor-details__content iframe {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--sa-border, #e5e7eb);
  border-radius: 10px;
}

.sa-product-editor-details__content figcaption {
  margin-top: 14px;
  padding-left: 12px;
  border-left: 2px solid #dde4eb;
  color: var(--sa-text-3, #6b7280);
  font-size: 13px;
  line-height: 1.6;
}

.sa-product-editor-details__content .wp-block-gallery.has-nested-images,
.sa-product-editor-details__content .blocks-gallery-grid {
  display: grid;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px;
  list-style: none;
}

.sa-product-editor-details__content .wp-block-gallery.has-nested-images figure,
.sa-product-editor-details__content .blocks-gallery-grid figure {
  width: auto;
  margin: 0;
}

.sa-product-editor-details__content .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(24px, 4vw, 52px);
}

.sa-product-editor-details__content table {
  width: 100%;
  border-collapse: collapse;
}

.sa-product-editor-details__content :where(th, td) {
  padding: 14px 16px;
  border: 1px solid var(--sa-border, #e5e7eb);
  text-align: left;
}

/* 产品详情里客户上传的长图多为 2560px 方图，铺满内容宽时一张约 1280px 高，
   电脑屏扣掉吸顶的导航和标签栏后一屏只能看到一半。电脑端把每张图限高到
   可视区域以内并居中，一屏看全；小字靠 product-compression.js 的点击放大补足。
   画廊里的图保持网格排版、带链接的图点击要跳转（没有放大入口），都不参与限高。 */
@media (min-width: 761px) {
  .sa-product-editor-details__content img:not(.wp-block-gallery img, .blocks-gallery-grid img, a img) {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100svh - var(--sa-header-height, 72px) - var(--sa-product-tabs-height, 58px) - 48px);
    margin-inline: auto;
    /* 编辑器里存过行内宽度（style="width:…"）的图，宽度不会被上面的 auto 覆盖；
       高度被封顶时用 contain 让图在原宽度的框里等比缩放，不会被压扁。 */
    object-fit: contain;
  }

  .sa-product-editor-details__content :where(p, figure) > img + img {
    margin-top: clamp(28px, 3vw, 44px);
  }
}

.sa-product-editor-details__content .sa-detail-zoomable {
  cursor: zoom-in;
}

.sa-product-editor-details__content .sa-detail-zoomable:focus-visible {
  outline: 2px solid var(--sa-compression-blue, #0ea5e9);
  outline-offset: 4px;
}

.sa-detail-zoom-open {
  overflow: hidden;
}

.sa-detail-zoom {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 3vw, 40px);
  border: 0;
  overflow: auto;
  background: rgba(15, 23, 42, .92);
  overscroll-behavior: contain;
}

.sa-detail-zoom::backdrop {
  background: rgba(15, 23, 42, .6);
}

.sa-detail-zoom__image {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 8px;
  background: #fff;
}

.sa-detail-zoom__close {
  position: fixed;
  z-index: 1;
  top: 16px;
  right: 16px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #0f172a;
  background: #fff;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .25);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.sa-detail-zoom__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.sa-product-specifications {
  padding-block: clamp(48px, 5vw, 72px);
  background: var(--sa-bg-soft, #f7f8fa);
}

.sa-product-specifications__layout {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(220px, .5fr) minmax(0, 1.5fr);
  gap: clamp(36px, 6vw, 92px);
}

.sa-product-specifications__head h2 {
  margin-top: 10px;
  color: var(--sa-primary, #0f172a);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 620;
  letter-spacing: -.035em;
  line-height: 1.12;
}

.sa-product-specifications .spec-table-wrap {
  min-width: 0;
}

@media (max-width: 760px) {
  .sa-product-editor-details {
    padding-block: 44px;
  }

  .sa-product-editor-details__content h2 {
    margin-bottom: 18px;
    font-size: 32px;
  }

  .sa-product-editor-details__content h3 {
    font-size: 21px;
  }

  .sa-product-editor-details__content :where(p, ul, ol, blockquote) {
    font-size: 15px;
    line-height: 1.68;
  }

  .sa-product-editor-details__content > :where(figure, .wp-block-image, .wp-block-gallery, .wp-block-columns, .wp-block-table, .wp-block-video, .wp-block-embed) {
    margin-block: 28px;
  }

  .sa-product-specifications {
    padding-block: 40px;
  }

  .sa-product-specifications__layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* --------------------------------------------------------------------------
   Product detail: show content immediately, don't gate it behind scroll.
   The site-wide scroll reveal (foundation.css: `.js [data-reveal]{opacity:0}`)
   leaves the tall below-fold product sections blank until each one scrolls
   into view, which reads as "nothing loaded down there". On a spec/detail page
   the content should simply be present, so the hidden state is neutralised for
   this route only — other pages keep their reveal animation. The `.js` prefix
   matches the base rule's specificity so this wins regardless of load order;
   reduced-motion users already saw everything.
   -------------------------------------------------------------------------- */
.js .sa-route-product [data-reveal],
.js .sa-route-product [data-reveal-group] > * {
  opacity: 1;
  transform: none;
}