/* ============================================================
   Swiper Gallery Widget – sgw-style.css  v3.2
   ============================================================ */

.sgw-wrap {
  --sgw-accent:     #c9a227;
  --sgw-thumb-size: 90px;
  position: relative; width: 100%;
}

/* ── MAIN SLIDER ─────────────────────────────────────────── */
.sgw-main {
  width: 100%; aspect-ratio: 16/9;
  border-radius: 4px; overflow: hidden; background: #000;
}
.sgw-main .swiper-slide {
  display: flex; align-items: center; justify-content: center; background: #000;
}
.sgw-main .swiper-slide img {
  width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in;
}
.sgw-main .swiper-button-prev,
.sgw-main .swiper-button-next {
  color: #fff; background: rgba(0,0,0,.45);
  width: 42px; height: 42px; border-radius: 50%;
  backdrop-filter: blur(4px); transition: background .2s;
}
.sgw-main .swiper-button-prev:hover,
.sgw-main .swiper-button-next:hover { background: rgba(0,0,0,.75); }
.sgw-main .swiper-button-prev::after,
.sgw-main .swiper-button-next::after { font-size: 15px; font-weight: 700; }
.sgw-main .sgw-hidden { display: none !important; }

.sgw-progress-bar {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 3px; background: rgba(255,255,255,.2); z-index: 10;
}
.sgw-progress-fill { display: block; height: 100%; width: 0%; background: var(--sgw-accent); }

/* ── THUMBNAILS ──────────────────────────────────────────── */
.sgw-thumbs { margin-top: 8px; }
.sgw-thumbs .swiper-slide {
  width: var(--sgw-thumb-size) !important;
  height: var(--sgw-thumb-size) !important;
  cursor: pointer; border-radius: 3px; overflow: hidden;
  opacity: .5; outline: 2px solid transparent; outline-offset: 1px;
  transition: opacity .25s, outline-color .25s; flex-shrink: 0;
}
.sgw-thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgw-thumbs .swiper-slide-thumb-active { opacity: 1; outline-color: var(--sgw-accent); }

@media (max-width: 600px) { .sgw-wrap { --sgw-thumb-size: 60px; } }


/* ══════════════════════════════════════════════════════════
   LIGHTBOX
   ══════════════════════════════════════════════════════════ */

.sgw-lightbox {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
  overflow: hidden;
  touch-action: none;
}
.sgw-lightbox.sgw-lb-open {
  opacity: 1; pointer-events: all;
}

/* blurred background */
.sgw-lb-bg {
  position: absolute; inset: -60px;
  background-size: cover; background-position: center;
  filter: blur(24px) brightness(.35);
  transform: scale(1.1);
  z-index: 0;
}

/* TOP BAR */
.sgw-lb-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,.65) 0%, transparent 100%);
  z-index: 30; pointer-events: none;
}
.sgw-lb-topbar > * { pointer-events: all; }

.sgw-lb-counter {
  color: #fff; font-size: 15px; font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: .04em; text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.sgw-lb-topright { display: flex; align-items: center; gap: 2px; }

.sgw-lb-icon-btn {
  width: 40px; height: 40px; border: none; background: transparent;
  color: #fff; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; padding: 0; flex-shrink: 0;
}
.sgw-lb-icon-btn:hover      { background: rgba(255,255,255,.14); }
.sgw-lb-close-btn:hover     { background: rgba(200,40,40,.55); }
.sgw-lb-icon-btn svg        { pointer-events: none; display: block; }

/* ── IMAGE STAGE ─────────────────────────────────────────── */
/*
 * KEY RULES:
 * 1. NO animation property here — entrance anim is on overlay fade-in.
 * 2. NO transition on transform — JS sets it directly, transitions fight it.
 * 3. NO max-width / max-height — the img inside handles display size;
 *    the stage must be free to scale beyond viewport.
 * 4. transform-origin: center center (default) — correct anchor for scale().
 */
.sgw-lb-stage {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transform-origin: center center;
  /* entrance handled by CSS class toggled by JS */
}
.sgw-lb-stage.sgw-lb-entering {
  animation: sgwStageIn .25s cubic-bezier(.22,1,.36,1) both;
}
@keyframes sgwStageIn {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1);   }
}

.sgw-lb-img {
  display: block;
  max-width: 80vw;
  max-height: 82vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 24px 64px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.05);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* PREV / NEXT */
.sgw-lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 46px; height: 72px;
  border: none; background: rgba(0,0,0,.38); color: #fff;
  border-radius: 4px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: background .15s, opacity .2s;
  z-index: 20;
}
.sgw-lb-prev { left: 10px; }
.sgw-lb-next { right: 10px; }
.sgw-lb-nav:hover { background: rgba(0,0,0,.65); }
.sgw-lb-nav svg   { pointer-events: none; }

/* ZOOM TOOLBAR */
.sgw-lb-toolbar {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  background: rgba(12,12,12,.75); border: 1px solid rgba(255,255,255,.1);
  border-radius: 40px; padding: 5px 12px;
  backdrop-filter: blur(12px); z-index: 30; user-select: none;
  white-space: nowrap;
}
.sgw-lb-zoom-btn {
  width: 34px; height: 34px; border: none; background: transparent;
  color: #fff; border-radius: 50%; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; flex-shrink: 0;
}
.sgw-lb-zoom-btn:hover { background: rgba(255,255,255,.18); }
.sgw-lb-zoom-btn svg   { pointer-events: none; display: block; }
.sgw-lb-zoom-reset {
  border-radius: 20px; width: auto; padding: 0 10px;
  font-size: 11px; font-family: inherit;
  letter-spacing: .05em; text-transform: uppercase; display: none;
}
.sgw-lb-zoom-label {
  color: rgba(255,255,255,.85); font-size: 13px; font-family: inherit;
  min-width: 44px; text-align: center; letter-spacing: .03em; font-weight: 500;
}

/* MOBILE */
@media (max-width: 640px) {
  .sgw-lb-img   { max-width: 96vw; max-height: 70vh; }
  .sgw-lb-prev  { left: 2px; }
  .sgw-lb-next  { right: 2px; }
  .sgw-lb-nav   { width: 36px; height: 56px; }
}