/* =========================================================
   HS Quick View Gallery — Flatsome 퀵뷰 왼쪽 사진
   .product-lightbox 안에서만 — 상품 상세 페이지 갤러리는 건드리지 않는다.
========================================================= */

/* 사진 틀 고정: 정사각형, 사진은 통째로 보이게 (세로로 길어도 팝업이 늘지 않음) */
.product-lightbox .product-gallery-slider .slide,
.product-lightbox .product-gallery-slider > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f7;
  overflow: hidden;
}

.product-lightbox .product-gallery-slider .slide img,
.product-lightbox .product-gallery-slider > img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

/* 썸네일 줄이 있으면 점은 숨긴다 */
.product-lightbox .product-gallery:has(.hs-qv-thumbs) .flickity-page-dots {
  display: none;
}

/* 썸네일 줄 */
.product-lightbox .hs-qv-thumbs {
  display: flex;
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
  background: #fff;
  /* 스크롤바는 숨긴다 — 터치는 밀어서, 마우스는 끌어서(quickview.js) 넘긴다 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.product-lightbox .hs-qv-thumbs::-webkit-scrollbar {
  display: none;
}

.product-lightbox .hs-qv-thumbs.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.product-lightbox .hs-qv-thumbs.is-dragging .hs-qv-thumb {
  cursor: grabbing;
}

.product-lightbox .hs-qv-thumb img {
  -webkit-user-drag: none;   /* 사진을 끌면 브라우저가 사진을 집어 들지 않게 */
}

.product-lightbox .hs-qv-thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #f5f5f7;
  overflow: hidden;
  cursor: pointer;
  opacity: .6;
  transition: opacity .15s, border-color .15s;
}

.product-lightbox .hs-qv-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-lightbox .hs-qv-thumb:hover,
.product-lightbox .hs-qv-thumb:focus-visible {
  opacity: 1;
}

.product-lightbox .hs-qv-thumb.is-active {
  opacity: 1;
  border-color: #7d28d4;   /* 브랜드 보라 — 예약 버튼과 같은 색 */
}

/* 요약 표를 사진 칸 아래 끝선에 맞춘다 — 사진·정보 두 칸이 나란할 때만 (Flatsome large-6 = 850px~).
   위: 제목·한줄요약 / 아래: 표. 한줄요약이 짧으면 가운데가 비고, 길면 최소 24px 띄우고 이어서 흐른다.
   정보 칸 높이는 Flatsome .row(flex, stretch)가 사진 칸에 맞춰 준다. */
@media (min-width: 850px) {
  .product-lightbox .product-info {
    display: flex;
    flex-direction: column;
  }
  .product-lightbox .product-lightbox-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .product-lightbox .product-lightbox-inner .product-short-description {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .product-lightbox .product-short-description .hs-psum {
    margin-top: auto;
  }
  .product-lightbox .product-short-description .hs-psum-intro {
    margin-bottom: 24px;
  }
}

/* 찜 하트 — 정보 칸 오른쪽 위. 긴 제목이 하트 밑으로 들어가지 않게 제목 오른쪽을 비워 둔다 */
.product-lightbox .product-lightbox-inner {
  position: relative;
}

.product-lightbox .product-lightbox-inner > a.plain h1 {
  padding-right: 48px;
}

.product-lightbox .hs-qv-fav {
  position: absolute;
  top: 22px;
  right: 20px;
  z-index: 5;
}

.product-lightbox .hs-qv-fav .hs-btn-fav {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
}

.product-lightbox .hs-qv-fav .hs-btn-fav:hover {
  background: #fdf2f4;
}

.product-lightbox .hs-qv-fav .hs-ico {
  width: 26px;
  height: 26px;
}

@media (max-width: 549px) {
  .product-lightbox .hs-qv-thumb {
    width: 48px;
    height: 48px;
  }
}