/* Use vector shapes, not font glyphs, for consistent playback affordances. */
.play-glyph { display:block; width:16px; height:16px; flex:none; overflow:visible; }
.cover-card .video-pill {
  display:inline-flex; align-items:center; gap:8px;
  min-height:36px; padding:7px 11px 7px 8px;
  border:1px solid rgba(255,255,255,.9);
  background:#fff; color:#4d4b86;
  font:600 11.5px/1.2 var(--sans); letter-spacing:0;
  box-shadow:0 3px 12px rgba(59,52,116,.06);
}
.video-play-icon {
  display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px;
  background:#6663d5; color:#fff; border-radius:50%;
  transition:background-color .2s ease-out;
}
.video-play-icon .play-glyph { width:14px; height:14px; }
.video-label { white-space:nowrap; }
.video-time {
  border-left:1px solid #deddec; padding-left:8px; margin-left:1px;
  font:500 10.5px/1.2 var(--sans); color:#78758e;
  font-variant-numeric:tabular-nums;
}
.product-card:hover .video-play-icon,
.product-card:focus-visible .video-play-icon { background:#514ebd; }
.play-circle { padding-left:0; }
.play-circle .play-glyph { width:27px; height:27px; }
@media (min-width:701px) {
  @container (max-width:320px) {
    .cover-card .video-pill { font-size:11px; gap:7px; padding-right:10px; }
    .video-pill .video-time { display:none; }
  }
}
@media (max-width:700px) {
  .cover-card .video-pill {
    top:22px; left:22px; min-height:42px;
    padding:8px 13px 8px 9px; gap:9px; font-size:13px;
  }
  .video-play-icon { width:24px; height:24px; flex-basis:24px; }
  .video-play-icon .play-glyph { width:15px; height:15px; }
  .video-time { font-size:11.5px; padding-left:9px; margin-left:1px; }
  .play-circle .play-glyph { width:25px; height:25px; }
}