/* Preserve semantic lines at every viewport, including centered captions. */
.detail-page .detail-copy { white-space: normal; }
.detail-page .detail-copy-line { display: block; }
.detail-page .detail-copy-phrase { display: inline-block; white-space: nowrap; }

/* Mobile detail layout based on the supplied Pro and Mini designs. */
@media (max-width: 760px) {
  body.detail-page {
    --gutter: 5.3vw;
    --sec-y: clamp(64px, 20vw, 100px);
    --gap: 28px;
    --text-h2: clamp(23px, 6.8vw, 34px);
    --text-h3: clamp(19px, 5.2vw, 26px);
    --text-lead: clamp(15px, 4.4vw, 20px);
    --text-small: clamp(12px, 3.3vw, 15px);
  }
  .detail-page .rv { opacity: 1; transform: none; transition: none; }
  .detail-page section[id] { scroll-margin-top: var(--nav-h); }
  .detail-page .top-inner { width: calc(100% - 32px); }
  .detail-page .hero--detail { aspect-ratio: 1 / 1.74; background: #f6f6f6; }
  .detail-page.detail-mini .hero--detail { aspect-ratio: 1 / 1.66; }
  .detail-page .hero--detail > .hero-img {
    position: absolute; inset: auto 0 0;
    width: 100%; height: 70%;
    -webkit-mask-image: linear-gradient(transparent, #000 22%);
    mask-image: linear-gradient(transparent, #000 22%);
    aspect-ratio: auto;
    object-fit: cover; object-position: 58% center;
  }
  .detail-page.detail-mini .hero--detail > .hero-img { height: 74%; object-position: 61% center; }
  .detail-page.detail-pro-h .hero--detail > .hero-img { height: 82%; object-position: 67% center; }
  .detail-page.detail-pro-h .hero--detail::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(#f6f6f6 8%, rgba(246,246,246,.82) 32%, rgba(246,246,246,0) 62%);
  }
  .detail-page .hero--detail .hero-copy {
    position: relative; z-index: 2;
    left: auto; top: auto; max-width: none;
    padding: 17vw 9.4vw 0;
  }
  .detail-page .hero-brand { font-size: clamp(16px, 4.8vw, 22px); margin-bottom: 14px; }
  .detail-page .hero h1 { font-size: clamp(25px, 8vw, 40px); line-height: 1.4; letter-spacing: 0; }
  .detail-page .hero-tags { margin-top: 14px; font-size: clamp(14px, 4.2vw, 20px); line-height: 1.65; white-space: pre-line; letter-spacing: 0; }
  .detail-page .hero .shop-hero-buy { margin-top: 16px; height: 36px; font-size: 13px; }
  .detail-page .sec-head { max-width: none; padding-inline: 9.4vw; margin-bottom: 36px; text-align: left; }
  .detail-page .sec-head h2, .detail-page .split-copy h2,
  .detail-page .cell-copy h2, .detail-page .chain-copy h2 { line-height: 1.5; letter-spacing: 0; }
  .detail-page .lead, .detail-page .cell-copy p { white-space: normal; line-height: 1.65; color: #888; }
  .detail-page .lead { margin-top: 16px; }
  .detail-page .split-copy { text-align: left; padding-inline: 4.1vw; }
  .detail-page .split-copy h2 { text-align: left; }
  .detail-page .split, .detail-page .grid2 { gap: 0; }
  .detail-page .split > .panel { margin-top: 32px; }
  .detail-page .two-up, .detail-page .two-up--narrow, .detail-page .two-up--mid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6vw;
  }
  .detail-page .panel img { height: auto; object-fit: contain; }
  .detail-page .three-up { grid-template-columns: 1fr; gap: 16px; }
  .detail-page .three-up > :nth-child(2) { order: -1; }
  .detail-page .three-up > .panel { background: #f8f9fa; }
  .detail-page .note { font-size: 11px; padding-inline: 4vw; line-height: 1.7; }
  .detail-page .grid2 .panel { aspect-ratio: auto; }
  .detail-page .cell-copy { padding: 28px 4.1vw; }
  .detail-page .cell-copy p { font-size: var(--text-lead); }
  .detail-page .mini-scenarios > :nth-child(2) { order: 0; }
  .detail-page .mini-scenarios > :nth-child(1) { order: 1; }
  .detail-page .mini-scenarios > :nth-child(3) { order: 2; margin-top: 32px; }
  .detail-page .mini-scenarios > :nth-child(4) { order: 3; }
  .detail-page .mini-scenarios .cell-copy { background: #fbfbfd; text-align: center; }
  .detail-page .mini-material > :nth-child(1) { order: 0; padding-top: 0; }
  .detail-page .mini-material > :nth-child(2) { order: 1; }
  .detail-page .mini-material > :nth-child(4) { order: 2; padding-top: 64px; }
  .detail-page .mini-material > :nth-child(3) { order: 3; }
  .detail-page .mini-material .cell-copy { text-align: left; }
  .detail-page .chain { background: transparent; }
  .detail-page .chain-copy { position: static; order: -1; padding: 0 4.1vw 32px; text-align: left; }
  .detail-page .chain-copy h2 { text-align: left; }
  .detail-page .chain-copy .lead { font-size: var(--text-lead); }
  .detail-page .chain-note { position: static; padding: 0 4vw; margin-top: 16px; }
  .detail-page .detail-scenes { background: #f5f5f7; margin-top: var(--sec-y); padding-block: var(--sec-y) 48px; }
  .detail-page .car-track { position: relative; padding-inline: 7.2vw; scroll-padding-inline: 0; gap: 3.2vw; }
  .detail-page .car-slide { flex: 0 0 80vw; aspect-ratio: 1.5 / 1; }
  .detail-page .car-nav { width: 80vw; margin: 16px 0 0 7.2vw; }
  .detail-page .car-btn { width: 40px; height: 40px; font-size: 24px; }
  .detail-page .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .detail-page .step figure { height: clamp(116px, 38vw, 190px); padding: 10px; }
  .detail-page .step-n { margin-top: 16px; }
  .detail-page .step p { font-size: 12px; line-height: 1.6; }
  .detail-page .sec--soft .sec-head, .detail-page .sec--last .sec-head { text-align: center; }
  .detail-page .spec-fig { max-width: 42%; margin-bottom: 32px; }
  .detail-page .spec-table { grid-template-columns: 1fr; font-size: 13px; }
  .detail-page .spec-row { grid-template-columns: 6em minmax(0, 1fr); padding: 14px 8px; gap: 8px; }
  .detail-page .spec-row dd { overflow-wrap: anywhere; }
  .detail-page .spec-row[aria-hidden="true"] { display: none; }
  .detail-page .foot { padding-block: 36px; }
  .detail-page .foot-inner { gap: 24px; }
  .detail-page .foot-copyright { font-size: 11px; }
}
/* Preserve the requested one-line Mini title in landscape. */
@media (max-width: 760px) and (orientation: landscape) {
  html[lang="zh-CN"] .detail-mini .mini-capacity-heading h2 { font-size: 3.6vw; white-space: nowrap; }
}

/* Scene galleries use the page background on all screen sizes. */
.detail-page .detail-scenes { background: none; }