/* One presentation for genuine mobile app viewports throughout the local concept. */
@media (max-width: 700px) {
  /* The old figure padding made body phones narrower than identical hero screens. */
  body.v16.v5-detail .r-website .r-phone-figure { padding-inline: 0; }
  body.v16.v5-detail .r-website figure > figcaption + .detail-image-zoom { margin-top: 8px; }
  body.v16.v5-detail .r-website .v6-detail-proof .r-product-video:not(.v8-video-started) .r-product-video-frame.v8-poster-portrait:has(video),
  body.v16.v5-detail .r-website .r-product-video.r-product-video--inline:not(.v8-video-started) .r-product-video-frame.v8-poster-portrait:has(video) {
    box-sizing: content-box;
    width: min(calc(100% - 12px), 288px);
    max-width: none;
    height: auto;
    aspect-ratio: var(--v8-poster-ratio);
    border: 6px solid #102b42;
    border-radius: 23px;
    overflow: hidden;
    margin-inline: auto;
    background: #fff;
    box-shadow: 0 0 0 1px #8da7ba, 0 14px 32px #09234017;
  }

  body.v16.v5-detail .r-website .r-product-video:not(.v8-video-started):has(.r-product-video-frame.v8-poster-portrait) figcaption {
    width: min(100%, 300px);
    margin-inline: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  body.v16.v5-detail .r-website .r-product-video:not(.v8-video-started):has(.r-product-video-frame.v8-poster-portrait) .r-video-stappen {
    width: min(100%, 300px);
    margin-inline: auto;
    justify-content: center;
  }

  /* The role viewer uses a phone only for native phone screens; office keeps its panel. */
  body.v16.v8.v7 .v7-product-preview :is([data-current-role="monteur"], [data-current-role="klant"]) .v6-role-crop {
    box-sizing: border-box;
    width: min(100%, 300px);
    max-width: 100%;
    aspect-ratio: auto;
    margin-inline: auto;
    border: 6px solid #102b42;
    border-radius: 23px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px #8da7ba, 0 14px 32px #09234017;
  }
  body.v16.v8.v7 .v7-product-preview .v5-case-figure figcaption { font-size: 11px; }
  body.v16.v8.v7 .v7-product-preview :is([data-current-role="monteur"], [data-current-role="klant"]) .v5-case-figure figcaption {
    width: min(100%, 300px);
    margin-inline: auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  body.v16.v8 .v10-product-stage .v5-zoom,
  body.v16.v8 .v7-product-preview .v5-case-figure .v5-zoom,
  body.v16.v8 .v5-dossier .v5-zoom {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 12px;
  }
  body.v16 .v14-mobile-viewer figcaption,
  body.v16.v8.v7 .v7-product-preview .v5-case-figure figcaption,
  body.v16.v8 .v5-dossier figcaption {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
  }

  /* Trim only the empty tail after the final office action; full source stays in zoom. */
  body.v16 .r-website .v15-office-viewport { aspect-ratio: 390 / 990; }
  body.v16.v5-detail .r-website .v15-office-viewport #beeld-zo-werkt-het-2 { top: -26.3533775%; }
}