/* The sample movie on the checkout page (sample-film.js): open in the page, after the order and its box (15.10). */
.sample-film { margin-top: 20px; }
.sample-film__eyebrow { display: block; color: var(--violet); font: 800 .7rem/1.3 var(--display); letter-spacing: .12em; }
.sample-film__title { display: block; margin: 4px 0 10px; color: var(--ink); font: 700 1.05rem/1.2 var(--display); }
/* The movie is vertical 9:16 since 2026-10-13: a phone-sized frame, centered. */
.sample-film__frame { position: relative; overflow: hidden; width: min(70%, 300px); margin-inline: auto; border-radius: 12px; background: var(--dark); box-shadow: 0 10px 30px rgb(36 32 58 / 18%); }
.sample-film video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #000; }
.sample-film__sound { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 94%); color: var(--ink); font: 700 .9rem/1 var(--display); box-shadow: 0 4px 16px rgb(10 8 20 / 30%); cursor: pointer; }
.sample-film__sound svg { width: 22px; height: 22px; fill: var(--violet); stroke: var(--violet); stroke-width: 2; stroke-linecap: round; }
.sample-film__sound:hover { background: #fff; }
.sample-film__sound:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.sample-film.has-sound .sample-film__sound { display: none; }
/* Reduced motion / data saver: no autoplay, so the button sits in the middle as the play button. */
.sample-film.is-still .sample-film__sound { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); min-height: 52px; padding-inline: 18px 22px; font-size: 1rem; }
.sample-film__note { margin: 10px 0 0; color: var(--text); font-size: .88rem; line-height: 1.45; }
@media (max-width: 700px) {
  .cover-panel > .sample-film { grid-column: 1 / -1; margin-top: 18px; }
  .cover-panel > .sample-film p.sample-film__note { margin: 10px 0 0; font-size: .86rem; }
}
.sample-film__cta { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); min-height: 48px; padding-inline: 22px; white-space: nowrap; box-shadow: 0 6px 20px rgb(10 8 20 / 35%); }
.sample-film__cta[hidden] { display: none; }