.product-film { padding:clamp(64px,8vw,120px) 0; background:var(--obsidian); color:var(--ink); }
.film-heading { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:32px; }
.film-heading h2 { margin:12px 0 0; font:400 clamp(34px,4.4vw,64px)/1.08 var(--serif); }
.film-heading>p { max-width:38ch; color:var(--muted); line-height:1.7; margin:0; }
.film-stage { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:#10191c; box-shadow:0 20px 70px #00000024; }
.film-stage video { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:#10191c; }
.film-play { position:absolute; inset:auto 0 0; display:flex; align-items:center; justify-content:flex-start; gap:14px; padding:24px 28px 48px; background:linear-gradient(0deg,#00000040,transparent 55%); border:0; color:#fff; cursor:pointer; font:600 18px/1.4 var(--sans,sans-serif); }
.film-play span { display:grid; place-items:center; height:56px; width:56px; border-radius:50%; background:#e4d9bb; color:#17201e; font-size:24px; padding-left:3px; box-shadow:0 0 0 10px #ffffff12; transition:transform .2s; }
.film-play:hover span { transform:scale(1.08); }
.film-play[hidden] { display:none; }
.film-summary { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding:20px 2px; font-size:14px; color:var(--muted); }
.film-summary a { color:var(--gold); text-underline-offset:4px; }
.film-chapters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:12px; }
.film-chapters button { text-align:left; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink); cursor:pointer; font:inherit; transition:background .2s,border-color .2s; }
.film-chapters button:hover,.film-chapters button[aria-current=true] { background:var(--surface-raised); border-color:var(--gold); }
.film-chapters small { color:var(--gold); font-size:12px; display:block; margin-bottom:12px; }
.film-chapters strong { display:block; font-size:18px; margin-bottom:8px; }
.film-chapters span { display:block; color:var(--muted); font-size:14px; line-height:1.6; }
.product-film :focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
.film-text { margin-top:28px; border-top:1px solid var(--line); padding-top:20px; color:var(--muted); line-height:1.75; }
.film-text summary { color:var(--ink); cursor:pointer; font-weight:600; }
.film-text p { max-width:90ch; }
.film-error { color:var(--ink); padding:18px; border:1px solid var(--line); border-radius:12px; }
.film-error[hidden] { display:none; }
@media(max-width:760px) { .film-heading{display:block}.film-heading>p{margin-top:20px}.film-stage{border-radius:16px}.film-chapters{grid-template-columns:repeat(2,minmax(0,1fr))}.film-chapters button{padding:16px}.film-play{font-size:14px;padding:16px 18px 44px;gap:10px}.film-play span{width:44px;height:44px;flex-shrink:0} }
@media(max-width:420px) { .film-chapters{grid-template-columns:1fr}.film-summary{font-size:13px} }
@media(prefers-reduced-motion:reduce) { .product-film *{transition:none!important;scroll-behavior:auto!important} }