.video-media-section {
  padding-block: var(--space-6);
  scroll-margin-block-start: var(--space-4);
}

.video-media-inner {
  max-inline-size: 64rem;
}

.video-media-frame {
  position: relative;
  background: var(--sortino-obsidian);
  border: 1px solid var(--sortino-gold);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-media-frame video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.video-media-play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  color: var(--sortino-white);
  background: rgb(11 11 12 / 78%);
  border: 1px solid var(--sortino-gold);
  font: inherit;
  cursor: pointer;
}

[dir='rtl'] .video-media-play {
  transform: translate(50%, -50%);
}

.video-media-play[hidden],
.video-media-error[hidden] {
  display: none;
}

.video-media-play-icon {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  background: var(--sortino-gold);
  color: var(--sortino-obsidian);
  font-size: var(--text-xl);
  padding-inline-start: 0.15rem;
}

.video-media-play:focus-visible {
  outline: 3px solid var(--sortino-gold);
  outline-offset: 4px;
}

.video-media-error {
  color: var(--sortino-danger);
  font-size: var(--text-sm);
}

.product-detail-video-action {
  margin-block-start: var(--space-3);
}