/* ===========================
   Product videos (8 single-value product metafields)
   Round 80x80 thumbnail strip; fullscreen modal that plays
   the chosen video. Modal video fills 90% of the viewport
   height; the prev/next controls are anchored to the LEFT
   and RIGHT viewport edges so they sit outside the video
   frame. The bound-variant cards sit in a strip pinned to
   the bottom of the viewport: centered when there is 1
   card, scrolling horizontally when there are 2+.
   =========================== */

.product-videos {
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-videos__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.product-videos__item {
  flex: 0 0 auto;
}
.product-videos__thumb {
  position: relative;
  width: 80px;
  height: 80px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #000;
  overflow: hidden;
  cursor: pointer;
  display: block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: box-shadow 0.2s ease;
  /* No scale on hover/focus — design says hover only reveals
     the play icon. */
}
.product-videos__thumb:hover,
.product-videos__thumb:focus-visible {
  outline: none;
  /* No border / outline on hover. Hover only reveals the play
     icon. */
}
.product-videos__thumb-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.product-videos__thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.product-videos__thumb:hover .product-videos__thumb-play,
.product-videos__thumb:focus-visible .product-videos__thumb-play {
  opacity: 1;
}
.product-videos__thumb-play svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.product-videos__thumb-price {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.product-videos__thumb-price svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Modal */
.product-videos__overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.product-videos__overlay.is-open {
  display: flex;
}
body.product-videos--locked {
  overflow: hidden;
}
.product-videos__modal {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  outline: none;
}
.product-videos__close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.product-videos__close:hover {
  background: #fff;
}
.product-videos__stage {
  /* The video is sized to the natural aspect ratio of the
     file; we cap height at 90vh and let width shrink to fit
     the content. The stage also anchors the variants strip
     so it sits flush against the video's bottom edge. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 90vh;
  max-width: 100vw;
}
.product-videos__player {
  /* No native controls; we autoplay + loop. Cap the height to
     90% of the viewport; width follows the file's intrinsic
     aspect ratio. */
  max-height: 90vh;
  max-width: 100vw;
  width: auto;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.product-videos__nav {
  /* Anchored to the LEFT and RIGHT edges of the viewport so
     they sit outside the video element, matching the
     reference design. */
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.product-videos__nav:hover {
  background: #fff;
}
.product-videos__nav--prev { left: 16px; }
.product-videos__nav--next { right: 16px; }
.product-videos__mute {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease;
}
.product-videos__mute:hover {
  background: rgba(0, 0, 0, 0.7);
}
.product-videos__mute-icon {
  display: block;
  fill: #fff;
  width: 20px;
  height: 20px;
}
.product-videos__variants-wrap {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.product-videos__variants-wrap > .product-videos__variants {
  pointer-events: auto;
}
.product-videos__variants {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.product-videos__variants::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.product-videos__variants--single {
  justify-content: center;
}
.product-videos__variants--scroll {
  justify-content: flex-start;
}
.product-videos__variant-card {
  flex: 0 0 300px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 300px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  margin: 0 5px;
  padding: 6px 16px 6px 6px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.product-videos__variant-card:hover,
.product-videos__variant-card:focus-visible {
  outline: none;
}
.product-videos__variant-thumb {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: #f3f3f3 center/cover no-repeat;
  border-radius: 50%;
}
.product-videos__variant-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}
.product-videos__variant-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-videos__variant-options {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-videos__variant-arrow {
  color: rgba(0, 0, 0, 0.6);
  font-size: 28px;
  flex: 0 0 16px;
  text-align: right;
}

.product-videos__loading {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  padding: 4px 0;
}
.product-videos__load-error {
  font-size: 12px;
  color: #c43b3b;
  padding: 8px 10px;
  border: 1px solid #f3c4c4;
  background: #fff4f4;
  border-radius: 6px;
  max-width: 420px;
  word-break: break-word;
}
.product-videos__variants-empty {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  padding: 4px 8px;
}

@media (max-width: 480px) {
  .product-videos__variant-card {
    flex: 0 0 240px;
    width: 240px;
  }
  .product-videos__nav--prev { left: 8px; }
  .product-videos__nav--next { right: 8px; }
  .product-videos__mute {
    top: 8px;
    left: 8px;
    width: 36px;
    height: 36px;
  }
}