/* ════════ ULTRASZONE | PRODUCT PAGE GALLERY (pdp-gallery.css) ════════
   25.10.2026. Styles for pdp-gallery.js: the swipe gallery in the main
   frame, the thumbnails under it and the full-screen viewer.
   ════════════════════════════════════════════════════════════════════ */

/* ── Main frame ─────────────────────────────────────────────────── */
.pdp-main-img.uzg-host { display:block; padding:0; }
.uzg { position:absolute; inset:0; }
.uzg-track {
  position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; outline:none;
}
.uzg-track::-webkit-scrollbar { display:none; }
.uzg-track:focus-visible { box-shadow:inset 0 0 0 2px var(--act,#fff); }
.uzg-slide {
  position:relative; flex:0 0 100%; width:100%; height:100%;
  scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden; cursor:zoom-in;
}
/* Real photos are 4:5 inside a square frame: the empty sides get a soft,
   dark blur of the same photo instead of flat bars. */
.uzg-slide.is-real { background:#0b0b0b; }
.uzg-slide.is-real::before {
  content:''; position:absolute; inset:-30px; background:var(--uzg-bg) center/cover no-repeat;
  filter:blur(22px) brightness(.42) saturate(1.1); transform:scale(1.1);
}
.pdp-main-img .uzg-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; -webkit-user-drag:none; user-select:none; }

/* "Real photo" label on every real slide */
.uzg-badge {
  display:inline-flex; align-items:center; gap:6px;
  font:600 .78rem/1 var(--f-body,'Rubik','Heebo',sans-serif); letter-spacing:0;
  color:#fff; background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.22);
  padding:7px 10px; border-radius:999px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.uzg-slide .uzg-badge { position:absolute; top:12px; inset-inline-start:12px; z-index:2; pointer-events:none; }

/* "+4 real photos" pill on the main image */
.uzg-more {
  position:absolute; bottom:38px; inset-inline-start:12px; z-index:3;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font:700 .82rem/1 var(--f-body,'Rubik','Heebo',sans-serif); color:var(--act-ink,#111);
  background:var(--act,#f2c200); border:0; padding:9px 13px; border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.45); transition:opacity .25s, transform .25s;
}
.uzg-more:hover { transform:translateY(-1px); }
.uzg-more.is-gone { opacity:0; pointer-events:none; transform:translateY(6px); }

/* Arrows */
.uzg-nav {
  position:absolute; top:50%; z-index:3; width:44px; height:44px; margin-top:-22px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:#fff; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25); border-radius:50%;
  transition:background .2s, opacity .2s;
}
.uzg-nav:hover { background:rgba(0,0,0,.8); }
.uzg-nav[hidden] { display:none; }
.uzg-prev { inset-inline-start:10px; }
.uzg-next { inset-inline-end:10px; }
.uzg .uzg-nav { opacity:0; }
.uzg:hover .uzg-nav, .uzg .uzg-nav:focus-visible { opacity:1; }
@media (hover:none) { .uzg .uzg-nav { display:none; } }

/* Dots */
.uzg-dots {
  position:absolute; bottom:12px; left:0; right:0; z-index:3;
  display:flex; justify-content:center; gap:4px; pointer-events:none;
}
.uzg-dot {
  pointer-events:auto; width:22px; height:22px; padding:0; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.uzg-dot::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.45); box-shadow:0 0 0 1px rgba(0,0,0,.35); transition:all .2s;
}
.uzg-dot.is-on::before { width:20px; border-radius:4px; background:#fff; }

/* ── Thumbnails ────────────────────────────────────────────────── */
.uzg-thumbs {
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px; margin-top:12px;
}
.uzg-thumbs::-webkit-scrollbar { display:none; }
.uzg-thumb {
  position:relative; flex:0 0 72px; height:72px; padding:0; cursor:pointer; overflow:hidden;
  background:#000; border:2px solid var(--rail,#333); border-radius:var(--r,6px); opacity:.7;
  transition:border-color .2s, opacity .2s;
}
.uzg-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.uzg-thumb:not(.is-real) img { object-fit:contain; }
.uzg-thumb:hover { opacity:1; }
.uzg-thumb.is-on { opacity:1; border-color:var(--act,#fff); }
.uzg-thumb.is-real::after {
  content:''; position:absolute; bottom:4px; inset-inline-start:4px; width:16px; height:16px; border-radius:50%;
  background:rgba(0,0,0,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center/10px no-repeat;
}
@media (max-width:700px) {
  .uzg-thumbs { display:none; }          /* swipe + dots on phones */
}

/* ── Full-screen viewer ────────────────────────────────────────── */
.uzg-lb { position:fixed; inset:0; z-index:100001; display:none; background:#000; color:#fff; }
.uzg-lb.open { display:block; animation:uzgIn .18s ease; }
@keyframes uzgIn { from { opacity:0 } to { opacity:1 } }
.uzg-lb-track {
  position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; overscroll-behavior:contain; scrollbar-width:none;
}
.uzg-lb-track::-webkit-scrollbar { display:none; }
.uzg-lb-track.is-locked { overflow:hidden; }
.uzg-lb-slide {
  flex:0 0 100%; width:100%; height:100%; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; align-items:center; justify-content:center; padding:64px 16px 70px; box-sizing:border-box; overflow:hidden;
}
.uzg-lb-slide img {
  max-width:100%; max-height:100%; object-fit:contain; display:block; cursor:zoom-in;
  transition:transform .25s ease; -webkit-user-drag:none; user-select:none;
}
.uzg-lb-slide.is-zoomed img { cursor:grab; touch-action:none; transition:transform .25s ease, transform-origin 0s; }
.uzg-lb-top {
  position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background:linear-gradient(rgba(0,0,0,.6),transparent); pointer-events:none;
}
.uzg-lb-count { font:600 .9rem/1 var(--f-body,'Rubik','Heebo',sans-serif); letter-spacing:1px; opacity:.85; }
.uzg-lb-close {
  pointer-events:auto; width:46px; height:46px; font-size:2rem; line-height:1; cursor:pointer;
  color:#fff; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.25); border-radius:50%;
}
.uzg-lb-close:hover { background:rgba(255,255,255,.12); }
.uzg-lb .uzg-prev { inset-inline-start:16px; }
.uzg-lb .uzg-next { inset-inline-end:16px; }
@media (hover:none) { .uzg-lb .uzg-nav { display:none; } }
.uzg-lb-cap {
  position:absolute; bottom:0; left:0; right:0; margin:0; padding:14px 16px 18px; text-align:center;
  font:500 .9rem/1.4 var(--f-body,'Rubik','Heebo',sans-serif); color:rgba(255,255,255,.85);
  background:linear-gradient(transparent,rgba(0,0,0,.6)); pointer-events:none;
}
.uzg-lb-cap .uzg-badge { vertical-align:middle; }

@media (prefers-reduced-motion:reduce) {
  .uzg-lb.open, .uzg-lb-slide img, .uzg-more, .uzg-dot::before { animation:none; transition:none; }
}