/* ============================================================
   ZATYSHNO — Custom Product Gallery
   ============================================================ */

/* ── Обгортка ── */
.zg-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  user-select: none;
}

/* ════════ ГОЛОВНЕ ФОТО ════════ */
.zg-gallery__main {
  position: relative;
  width: 100%;
  aspect-ratio: 10 / 11;
  height: auto;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zg-gallery__main-img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  transition: opacity .14s ease;
}
.zg-gallery__main-img.zg-fade { opacity: 0; }

/* Стрілки ← → (з'являються при hover) */
.zg-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  transition: opacity .2s, background .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.zg-gallery__main:hover .zg-gallery__arrow { opacity: 1; }
.zg-gallery__arrow:hover { background: #fff; }
.zg-gallery__arrow--prev { left: 12px; }
.zg-gallery__arrow--next { right: 12px; }
.zg-gallery__arrow svg { width: 18px; height: 18px; display: block; }

/* Кнопка лупи — стиль сайту, рожева */
.zg-gallery__zoom-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #E94290;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: filter .2s;
  box-shadow: 0 2px 10px rgba(233,66,144,.35);
}
.zg-gallery__zoom-btn:hover { filter: brightness(.9); }
.zg-gallery__zoom-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke: #fff;
}

/* ════════ БЛОК МІНІАТЮР ════════ */
.zg-gallery__thumbs {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Кнопки прокрутки мініатюр */
.zg-gallery__thumbs-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid #FFDCEC;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, opacity .2s;
}
.zg-gallery__thumbs-btn:hover { background: #FFF1F8; }
.zg-gallery__thumbs-btn.zg-disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}
.zg-gallery__thumbs-btn svg { width: 13px; height: 13px; display: block; }

/* Viewport — ширина рівно під 4 мініатюри + gap */
.zg-gallery__thumbs-viewport {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

/* Track — рухається transform */
.zg-gallery__thumbs-track {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 2px 0;
  transition: transform .3s ease;
}

/* Одна мініатюра */
.zg-gallery__thumb {
  flex: 0 0 calc((100% - 30px) / 4);
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: #ffffff;
  transition: border-color .18s, transform .18s;
}
.zg-gallery__thumb:hover { border-color: #FFDCEC; transform: scale(1.04); }
.zg-gallery__thumb--active { border-color: #E94290 !important; }
.zg-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* ════════ LIGHTBOX ════════ */
#zg-lb {
  position: fixed;
  inset: 0;
  z-index: 9900;
  background: rgba(0,0,0,.93);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
#zg-lb.zg-lb--open {
  opacity: 1;
  pointer-events: auto;
}

.zg-lb__inner {
  max-width: min(92vw, 960px);
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zg-lb__img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 6px;
  display: block;
  transition: opacity .12s ease;
}
.zg-lb__img.zg-fade { opacity: 0; }

/* Стрілки lightbox */
.zg-lb__prev,
.zg-lb__next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  z-index: 1;
}
.zg-lb__prev:hover,
.zg-lb__next:hover { background: rgba(255,255,255,.22); }
.zg-lb__prev { left: 16px; }
.zg-lb__next { right: 16px; }
.zg-lb__prev svg,
.zg-lb__next svg { width: 20px; height: 20px; display: block; stroke: #fff; }

/* Кнопка закрити */
.zg-lb__close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  z-index: 1;
}
.zg-lb__close:hover { background: rgba(255,255,255,.22); }
.zg-lb__close svg { width: 16px; height: 16px; display: block; stroke: #fff; }

/* Лічильник */
.zg-lb__counter {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.65);
  font: 500 13px/1 "Commissioner", sans-serif;
  pointer-events: none;
}

/* ════════ АДАПТИВ ГАЛЕРЕЇ ════════ */

/* 768px — планшет */
@media (max-width: 768px) {
  .zg-gallery__arrow { opacity: 1; }
  .zg-gallery__thumb { flex: 0 0 calc((100% - 20px) / 3); }
}

/* 425px — великі мобільні */
@media (max-width: 425px) {
  .zg-gallery { gap: 8px; }
  .zg-gallery__thumb { flex: 0 0 calc((100% - 16px) / 3); }
  .zg-gallery__zoom-btn { width: 32px; height: 32px; top: 8px; right: 8px; }
  .zg-gallery__zoom-btn svg { width: 14px; height: 14px; }
  .zg-gallery__arrow { width: 32px; height: 32px; opacity: 1; }
  .zg-gallery__arrow--prev { left: 6px; }
  .zg-gallery__arrow--next { right: 6px; }
  .zg-lb__prev { left: 8px; }
  .zg-lb__next { right: 8px; }
}

/* 375px — iPhone */
@media (max-width: 375px) {
  .zg-gallery__thumb { flex: 0 0 calc((100% - 12px) / 3); }
  .zg-gallery__thumbs-btn { width: 24px; height: 24px; }
}

/* 320px — найменші */
@media (max-width: 320px) {
  .zg-gallery__thumb { flex: 0 0 calc((100% - 8px) / 2); }
  .zg-gallery__arrow { width: 28px; height: 28px; }
}

/* Низькі екрани: ноутбуки з малою висотою */
@media (max-height: 768px) and (min-width: 960px) {
  /* aspect-ratio сам адаптується, додаткові обмеження не потрібні */
}

/* ════════ МОБІЛЬНА ГАЛЕРЕЯ ════════ */
@media (max-width: 640px) {

  /* Головне фото — заокруглені кути */
  .zg-gallery__main {
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  /* Мініатюри — touch-scroll без кнопок */
  .zg-gallery__thumbs {
    gap: 6px !important;
    padding: 0 14px !important;
  }

  /* Ховаємо кнопки прокрутки — замінюємо на touch */
  .zg-gallery__thumbs-btn { display: none !important; }

  /* Viewport — повна ширина зі скролом */
  .zg-gallery__thumbs-viewport {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .zg-gallery__thumbs-viewport::-webkit-scrollbar { display: none !important; }

  /* Track — не трансформуємо через JS на мобільному, скрол нативний */
  .zg-gallery__thumbs-track {
    transition: none !important;
    padding-bottom: 2px !important;
  }

  /* Мініатюри — трохи більші на мобільному */
  .zg-gallery__thumb {
    flex: 0 0 72px !important;
    height: 72px !important;
    border-radius: 10px !important;
  }

  /* Стрілки — завжди видимі на мобільному */
  .zg-gallery__arrow {
    opacity: 1 !important;
    width: 34px !important;
    height: 34px !important;
  }
}

@media (max-width: 375px) {
  .zg-gallery__thumb {
    flex: 0 0 60px !important;
    height: 60px !important;
  }
  .zg-gallery__main {
    border-radius: 12px !important;
  }
}