/* N-SHOES Product Video */
.ns-pv-fb { display: block; }
.ns-pv-stage {
  position: relative; display: block; width: 100%;
  aspect-ratio: var(--ns-pv-stage, 1/1);
  background: #111 center / contain no-repeat;
  cursor: pointer; overflow: hidden; border-radius: inherit;
  -webkit-tap-highlight-color: transparent; outline: none;
}
.ns-pv-stage:focus-visible { box-shadow: 0 0 0 3px rgba(0, 120, 255, .6); }
.ns-pv-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35)); pointer-events: none; }
.ns-pv-play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  background: rgba(0, 0, 0, .62); box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
  transition: transform .15s ease, background .15s ease;
}
.ns-pv-play::before {
  content: ""; position: absolute; left: 31px; top: 23px;
  border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent #fff;
}
.ns-pv-stage:hover .ns-pv-play { transform: scale(1.08); background: rgba(220, 0, 0, .85); }
.ns-pv-badge {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  font: 600 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-style: normal; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: rgba(0, 0, 0, .6); padding: 6px 8px 6px 22px; border-radius: 4px;
}
.ns-pv-badge::before { content: ""; position: absolute; left: 9px; top: 6px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
.ns-pv-stage.is-playing { cursor: default; background-image: none !important; background-color: #000; }
.ns-pv-stage.is-playing .ns-pv-play, .ns-pv-stage.is-playing .ns-pv-badge, .ns-pv-stage.is-playing::after { display: none; }

/* the player keeps the clip's real proportions inside the photo box (9:16 is not cropped) */
.ns-pv-frame { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 100%; max-height: 100%; background: #000; z-index: 3; }
.ns-pv-ar-916 .ns-pv-frame { height: 100%; aspect-ratio: 9 / 16; }
.ns-pv-ar-45 .ns-pv-frame { height: 100%; aspect-ratio: 4 / 5; }
.ns-pv-ar-11 .ns-pv-frame { height: 100%; aspect-ratio: 1 / 1; }
.ns-pv-ar-169 .ns-pv-frame { width: 100%; aspect-ratio: 16 / 9; }
.ns-pv-frame iframe, .ns-pv-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000; }

/* thumbnails strip */
.ns-pv-thumb { position: relative; }
.ns-pv-thumb img { display: block; }
.ns-pv-thumb-play {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: rgba(0, 0, 0, .6); pointer-events: none;
}
.ns-pv-thumb-play::before { content: ""; position: absolute; left: 12px; top: 9px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #fff; }
.ns-pv-thumb:not(:has(img)) { background: #222; min-height: 60px; }

/* other themes */
.ns-pv-standalone { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.ns-pv-standalone .ns-pv-stage { --ns-pv-stage: 9/16; border-radius: 8px; }

@media (max-width: 575px) {
  .ns-pv-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .ns-pv-play::before { left: 26px; top: 19px; border-width: 13px 0 13px 20px; }
}