.okgs-gallery-video,
.okgs-gallery-shortclip,
.okgs-gallery-video-slide {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  background: #000;
}

.woocommerce-product-gallery[style*="--okgs-gallery-frame-height"]
  .wd-carousel-container:not(.wd-gallery-thumb)
  .wd-carousel-wrap,
.woocommerce-product-gallery[style*="--okgs-gallery-frame-height"]
  .wd-carousel-container:not(.wd-gallery-thumb)
  .wd-carousel-item {
  height: var(--okgs-gallery-frame-height);
  max-height: var(--okgs-gallery-frame-height);
}

.woocommerce-product-gallery[style*="--okgs-gallery-frame-height"]
  .wd-carousel-container:not(.wd-gallery-thumb)
  .wd-carousel-item
  > .okgs-gallery-shortclip,
.woocommerce-product-gallery[style*="--okgs-gallery-frame-height"]
  .wd-carousel-container:not(.wd-gallery-thumb)
  .wd-carousel-item
  > .okgs-gallery-video,
.woocommerce-product-gallery[style*="--okgs-gallery-frame-height"]
  .wd-carousel-container:not(.wd-gallery-thumb)
  .wd-carousel-item
  > .okgs-gallery-video-slide {
  height: 100%;
  max-height: 100%;
}

.wd-carousel-item > .okgs-gallery-video,
.wd-carousel-item > .okgs-gallery-shortclip,
.wd-carousel-item > .okgs-gallery-video-slide,
.woocommerce-product-gallery__image.okgs-gallery-video,
.woocommerce-product-gallery__image.okgs-gallery-shortclip,
.wd-gallery-image.okgs-gallery-video,
.wd-gallery-image.okgs-gallery-shortclip,
.wd-gallery-image.okgs-gallery-video-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.okgs-gallery-video__play,
.okgs-gallery-shortclip__play {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
  transition: opacity 160ms ease;
}

.okgs-gallery-video__thumbnail,
.okgs-gallery-shortclip__thumbnail,
.okgs-gallery-shortclip__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #222;
}

.okgs-gallery-video__play-icon,
.okgs-gallery-shortclip__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.okgs-gallery-video__play-icon::after,
.okgs-gallery-shortclip__play-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
}

.okgs-gallery-video__player,
.okgs-gallery-shortclip__player {
  width: 100%;
  height: 100%;
}

.okgs-gallery-video__player:not([hidden]),
.okgs-gallery-shortclip__player:not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.okgs-gallery-video.is-playing:not(.is-revealing) .okgs-gallery-video__player:not([hidden]),
.okgs-gallery-shortclip.is-playing:not(.is-revealing)
  .okgs-gallery-shortclip__player:not([hidden]) {
  background: #000;
}

.okgs-gallery-video.is-revealing .okgs-gallery-video__play,
.okgs-gallery-shortclip.is-revealing .okgs-gallery-shortclip__play {
  z-index: 3;
  pointer-events: none;
}

.okgs-gallery-video__player video,
.okgs-gallery-shortclip__video,
.okgs-gallery-video__video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
}

.okgs-gallery-video__player video.okgs-gallery-video__video--preparing,
.okgs-gallery-shortclip__player video.okgs-gallery-video__video--preparing {
  opacity: 0;
}

.okgs-gallery-video__player video.okgs-gallery-video__video--revealed,
.okgs-gallery-shortclip__player video.okgs-gallery-video__video--revealed {
  opacity: 1;
  transition: opacity 160ms ease;
}

.okgs-gallery-video.is-loading .okgs-gallery-video__play-icon,
.okgs-gallery-shortclip.is-loading .okgs-gallery-shortclip__play-icon {
  opacity: 0.5;
}

.okgs-gallery-video.is-error .okgs-gallery-video__player,
.okgs-gallery-shortclip.is-error .okgs-gallery-shortclip__player {
  color: #fff;
  padding: 1rem;
  text-align: center;
  font-size: 14px;
}

.okgs-gallery-shortclip.is-pending-hidden {
  display: none !important;
}

.okgs-gallery-shortclip__player:not(:has(video)):not([hidden]) {
  position: relative;
  inset: auto;
  color: #fff;
  padding: 1rem;
  text-align: center;
  font-size: 14px;
}

.okgs-gallery-thumb-nav-item {
  position: relative;
}

.okgs-gallery-thumb-nav-item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.okgs-gallery-thumb-nav-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
  z-index: 1;
  pointer-events: none;
}

.okgs-gallery-shortclip.is-trailer-only .okgs-gallery-shortclip__player::after {
  content: "미리보기";
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 2px 8px;
  font-size: 11px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}

/*
 * 모바일/PC 공통 — 썸네일 내비게이션의 okgs 항목(세로 영상 등) 폭은 건드리지
 * 않는다: Swiper가 형제(.wd-carousel-item) 썸네일과 동일한 인라인 width를
 * 이미 부여하므로 폭은 항상 자동으로 일치한다. 세로 영상 소스 때문에 커지는
 * 것은 "높이"뿐이므로, 높이만 JS가 실측한 형제 높이(--okgs-thumb-nav-height,
 * gallery-video.js:syncThumbNavItemHeight)로 고정한다. 고정 px/미디어쿼리를
 * 쓰지 않는 이유는 WoodMart 썸네일 크기가 뷰포트 폭마다(모바일·PC 리사이즈
 * 모두) 달라지기 때문이다.
 */
.woocommerce-product-gallery[style*="--okgs-thumb-nav-height"]
  .wd-gallery-thumb
  .okgs-gallery-thumb-nav-item {
  overflow: hidden;
  height: var(--okgs-thumb-nav-height);
}

.okgs-gallery-thumb-nav-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * 모바일 가로 썸네일만 — WoodMart가 인라인 width로 칸 폭을 정하므로
 * 그 폭을 기준으로 1:1을 만든다. PC 왼쪽 세로 열(>1024)은 이 규칙을
 * 타지 않아 기존 122×71을 유지한다.
 */
@media (max-width: 1024px) {
  .woocommerce-product-gallery.wd-thumbs-wrap
    .wd-gallery-thumb
    .wd-carousel-item {
    aspect-ratio: 1 / 1;
    height: auto;
    overflow: hidden;
  }

  .woocommerce-product-gallery.wd-thumbs-wrap[style*="--okgs-thumb-nav-height"]
    .wd-gallery-thumb
    .okgs-gallery-thumb-nav-item {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .woocommerce-product-gallery.wd-thumbs-wrap
    .wd-gallery-thumb
    .wd-carousel-item
    img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width: 1024px) {
  .woocommerce-product-gallery.wd-thumbs-wrap .wd-gallery-thumb .wd-nav-arrows.wd-pos-sep {
    --wd-arrow-size: 30px;
  }

  .woocommerce-product-gallery.wd-thumbs-wrap .wd-gallery-thumb .wd-nav-arrows.wd-pos-sep .wd-btn-arrow {
    top: 100%;
  }
}