/* /p1 presentation layer — scoped to the product page only.
   Restores the reference (cube45) visual treatment on top of the shared
   framea stylesheets, without touching commerce, catalog or CTA behaviour. */

/* --- Hero: full campaign artwork with its own designed text, starting
       behind the sticky menu. No crop, no overlay copy. --- */
.series-hero{min-height:0;background:#202224;padding:0;overflow:hidden}
.hero-art{position:relative;inset:auto;display:block;margin-top:0}
.hero-art:after{display:none;content:none}
.hero-art img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;object-position:center}
.hero-sales-copy{display:none}

/* --- Featured product: clean light-gray square, whole cube visible,
       no arbitrary padding or crop (matches the reference). --- */
.product-image{aspect-ratio:1;background:#d9dad9}
.product-image>img#bundle-image{width:100%;height:100%;object-fit:contain;object-position:center;padding:0}

/* --- Film layer --- */
#overview-large-image{display:none}
#overview-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#111517;border:0;border-radius:8px}
.white-film{aspect-ratio:160/63;background:#edf0f2;overflow:hidden}
.white-film>img,.white-film>.scene-video{width:100%;height:100%;object-fit:cover;object-position:center}
.media{position:relative}
.media.video-unavailable .scene-video{display:none}

/* Native controls only inside the film dialog; background films have none. */
.scene-video::-webkit-media-controls{display:none!important}
.scene-video{pointer-events:none}

/* The Glide product card uses its isolated close-up; the larger feature tile
   above retains the full rail-and-turntable scene. */
.motion-section .context-products .sku-card:has([data-add-product="glide"]) .sku-image{position:relative;overflow:hidden}
.motion-section .context-products .glide-card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .25s}
.motion-section .context-products .glide-card-video.is-ready{opacity:1}

/* --- App preview film inside the phone frame --- */
.scene-preview{position:relative;overflow:hidden}
#app-scene-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .25s}
#app-scene-video.is-ready{opacity:1}
.scene-preview>span{position:relative;z-index:1}

@media(prefers-reduced-motion:reduce){.scene-video,#app-scene-video,.glide-card-video{transition:none}}

@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  main{display:block;overflow:clip;background:#101112}
  main>section,main>figure{position:relative;isolation:isolate;clear:both}
  .site-header{isolation:isolate}
  .series-hero{padding:0}
  .hero-art{margin-top:0}
  .build-section{background:#101112}
  .build-gallery,.build-details{position:relative;z-index:1;min-width:0}
  .build-gallery{top:auto}
  .product-image{aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;background:transparent}
  .product-image>img#bundle-image{grid-column:1/-1;width:100%;height:auto;aspect-ratio:1;background:#d9dad9;border-radius:7px;overflow:hidden}
  .feature-tools{position:static;grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px}
  .feature-tool{min-height:70px;padding:7px 5px}
  .feature-tool>img{width:50px;height:38px}
  .feature-detail-views{position:static;grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(2,52px);align-self:center;gap:8px}
  .floating-overview{position:relative;inset:auto;grid-column:1/-1;grid-row:4;justify-self:end;width:min(100%,170px);min-width:0;max-width:170px}
  .comparison-table-wrap,.context-products,.product-carousel{max-width:100%;overscroll-behavior-inline:contain}
  .white-film-section{background:#edf0f2}
  #overview-video{border-radius:6px}
  .white-film{aspect-ratio:160/63}
  .why-section,.usecases-section,.statement,.possibilities,.motion-section,.control-section,.module-section,.faq-section{background-clip:padding-box}
  .motion-section{scroll-margin-top:82px;overflow:hidden;background:#101112}
  .motion-section>.statement{position:relative;z-index:2;background:#101112}
  .motion-mosaic,.motion-notes,.motion-section>.context-products{position:relative;z-index:1}
  .motion-mosaic .media,.motion-section .sku-image{isolation:isolate;overflow:hidden;background:#161b1e}
  .motion-mosaic .scene-video,.motion-section .glide-card-video{max-width:100%}
  .spec-section{position:relative;z-index:1}
}

/* Keep the reference's 12px tool labels and give them room to fit. */
@media(max-width:760px){.product-image>.feature-tools{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}.feature-tool{padding:8px 5px;min-height:72px}.feature-tool>span:last-child{font-size:12px;letter-spacing:0;white-space:normal}.feature-detail-views button{width:52px;height:52px}}