/* Hero gallery with a video first slot — see js/pdp-media-gallery.js */
.pdp-media-gallery { min-width: 0; }
.pdp-media-gallery:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.pdp-media-stage { position: relative; aspect-ratio: 16 / 9; background: var(--charcoal); overflow: hidden; }
.pdp-media-stage > .pack-video-media { position: absolute; inset: 0; aspect-ratio: auto; }
.pdp-media-stage > [hidden] { display: none !important; }
.pdp-media-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp-media-caption { margin: 10px 0 0; font-size: 0.85rem; opacity: 0.8; }
.pdp-media-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.pdp-media-thumb { position: relative; padding: 3px; border: 2px solid transparent; background: none; color: inherit; font: inherit; font-size: 0.75rem; cursor: pointer; text-align: center; }
.pdp-media-thumb[aria-pressed="true"] { border-color: var(--gold); }
.pdp-media-thumb:hover { border-color: rgba(255,255,255,0.4); }
.pdp-media-thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.pdp-media-thumb span { display: block; padding: 6px 0 2px; }
.pdp-media-thumb[data-kind="video"]::after {
  content: "\25B6"; position: absolute; top: calc(3px + 50% - 30px); left: 50%; transform: translateX(-50%);
  width: 34px; height: 34px; line-height: 34px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 14px;
}
@media (max-width: 600px) { .pdp-media-thumbs { gap: 6px; } .pdp-media-thumb { font-size: 0.65rem; padding: 2px; } }