/* Solris Product Video. Literal fallbacks on every custom property, so the
 * block still looks deliberate if the theme is ever swapped. */

.pvideo{margin-block:var(--sp-12,3rem)}
.pvideo__title{font-size:var(--fs-3,1.75rem);text-align:center;
  margin:0 0 var(--sp-6,1.5rem)}

/* 16:9 with the aspect ratio on the BOX, not the media. A padding-top hack
   would need unpicking the moment the video is portrait, and supplier footage
   frequently is. */
.pvideo__frame{position:relative;aspect-ratio:16/9;max-width:900px;margin-inline:auto;
  border-radius:var(--r-lg,14px);overflow:hidden;background:var(--navy-900,#081629);
  box-shadow:0 2px 14px rgb(14 35 64/.12)}
.pvideo__el,.pvideo__iframe,.pvideo__poster{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* The poster is a still we chose, so it may be cropped to fill. The player
   must not be: supplier footage is not always 16:9, and cropping it cuts the
   product out of frame. */
.pvideo__poster{object-fit:cover}
.pvideo__el{object-fit:contain;background:var(--navy-900,#081629)}
.pvideo__fallback{position:absolute;inset-block-end:12px;inset-inline-start:12px;
  color:#fff;background:rgb(8 22 41/.8);padding:8px 12px;border-radius:999px}

/* The facade. Loading YouTube's iframe up front costs ~700 KB and sets
   cookies for a video most visitors never play, so the poster is a button
   until it is wanted. */
.pvideo__frame--facade{cursor:pointer}
.pvideo__play{position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);z-index:2;
  display:grid;place-items:center;width:72px;height:72px;border:0;
  border-radius:var(--r-pill,999px);cursor:pointer;
  background:rgb(255 255 255/.94);color:var(--navy-800,#0E2340);
  box-shadow:0 4px 18px rgb(0 0 0/.3);
  transition:transform .15s ease,background-color .15s ease}
.pvideo__play svg{margin-inline-start:4px} /* optical centring of a triangle */
.pvideo__frame--facade:hover .pvideo__play{background:#fff;transform:translate(-50%,-50%) scale(1.06)}
.pvideo__play:focus-visible{outline:3px solid var(--amber-400,#F6A821);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .pvideo__play,.pvideo__frame--facade:hover .pvideo__play{transition:none;transform:translate(-50%,-50%)}
}

@media (max-width:599px){
  .pvideo__title{font-size:var(--fs-2,1.375rem)}
  .pvideo__play{width:58px;height:58px}
  .pvideo__play svg{width:24px;height:24px}
}