.film-section { border-top:1px solid var(--line); }
.film-link { gap:10px; }
.film-link svg { flex:none; }
.film-heading { align-items:end; }
.film-heading h2 { max-width:650px; }
.film-heading > p { max-width:560px; text-wrap:balance; }
.product-film { position:relative; }
.film-play {
  position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:72px; padding:18px 28px; max-width:calc(100% - 32px);
  border:1px solid #fff; border-radius:999px;
  background:#fffffff2; color:#0a1425;
  box-shadow:0 6px 32px #0005;
  font:inherit; font-size:1.05rem; font-weight:700; white-space:nowrap;
  cursor:pointer;
}
.film-play[hidden] { display:none; }
.film-play:hover { transform:translate(-50%,-50%); background:#fff; box-shadow:0 8px 36px #0007; }
.film-play:focus-visible { outline:3px solid #a9ceff; outline-offset:5px; }
.film-play svg { flex:none; }
.product-film video {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:contain;
  background:#0a1425;
  border:1px solid var(--line);
  border-radius:16px;
}
.product-film video:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
.product-film video:fullscreen {
  width:100%; height:100%; border:0; border-radius:0; object-fit:contain;
}
.product-film video:-webkit-full-screen {
  width:100%; height:100%; border:0; border-radius:0; object-fit:contain;
}
.product-film[data-format="portrait"] {
  width:min(100%,430px,calc((100svh - 180px) * 9 / 16));
  margin-inline:auto;
}
.product-film[data-format="portrait"] video { aspect-ratio:9 / 16; }
@media(max-width:760px) {
  .film-heading { gap:24px; }
  .product-film video { border-radius:10px; }
  .film-play { min-height:64px; padding:16px 24px; font-size:1rem; }
}