/* Product image gallery (#pgal) + zoom lightbox (#glb). Replaces the old llbox.
   css8 language: square (no radius), white tiles behind images, --space-* rhythm,
   brand gradient title bar, --shadow-panel. Driven by js/gallery.js. */

/* ── In-page gallery ───────────────────────────────────────────────────────── */
#pgal { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); }

.pgal__stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  min-height: 320px;
  cursor: zoom-in;
}
.pgal__hero {
  max-width: 100%; max-height: 440px; height: auto; width: auto;
  object-fit: contain; display: block;
}
.pgal__expand {
  position: absolute; top: var(--space-1); right: var(--space-1);
  /* hidden on desktop — the hero's zoom-in cursor already hints "click to enlarge".
     Only surfaced on touch (below), where there's no cursor affordance. */
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: rgba(20, 22, 30, .55); color: #fff; border: 0; cursor: pointer;
  transition: background .15s ease;
}
.pgal__expand:hover { background: rgba(20, 22, 30, .8); }
.pgal__expand .icon { width: 18px; height: 18px; }
@media (hover: none) and (pointer: coarse) { .pgal__expand { display: flex; } }

.pgal__strip {
  display: flex; gap: var(--space-1);
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: var(--space-0);
  scrollbar-width: thin;
}
.pgal__thumb {
  flex: 0 0 auto;
  width: 64px; height: 64px; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e4e7ec; cursor: pointer;
  box-sizing: border-box;
  transition: border-color .15s ease, transform .1s ease;
}
.pgal__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.pgal__thumb:hover { transform: translateY(-1px); }
.pgal__thumb.is-active { border-color: var(--brand); border-width: 2px; }

/* ── Lightbox ──────────────────────────────────────────────────────────────── */
#glb[hidden] { display: none; }
#glb {
  position: fixed; inset: 0; z-index: 11000;
  display: flex; flex-direction: column;
  background: rgba(10, 12, 20, .92);
  opacity: 0; transition: opacity .2s ease;
}
#glb.is-open { opacity: 1; }
body.glb-open { overflow: hidden; }

.glb__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--brand-gradient); color: #fff;
}
.glb__cap   { flex: 1 1 auto; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glb__count { flex: 0 0 auto; font-size: 13px; opacity: .9; font-variant-numeric: tabular-nums; }
.glb__close {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: rgba(255, 255, 255, .15); color: #fff; border: 0; cursor: pointer;
  transition: background .15s ease;
}
.glb__close:hover { background: rgba(255, 255, 255, .3); }
.glb__close .icon { width: 20px; height: 20px; }

.glb__body { position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; }
.glb__stage {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.glb__img {
  max-width: 92%; max-height: 100%;
  width: auto; height: auto; object-fit: contain; display: block;
  background: #fff; padding: 10px; box-sizing: border-box;   /* opaque fill (+ breathing room) so transparent PNGs stay readable over the dark backdrop */
  cursor: zoom-in;   /* the zoom hint belongs to the image only — the dim backdrop closes, not zooms */
  transition: transform .15s ease, opacity .2s ease;
}
.glb__img.is-swapping { opacity: 0; }
.glb__stage.is-zoomed .glb__img { transform: scale(2.3); cursor: zoom-out; transition: none; }

/* loading spinner */
.glb__stage.is-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff;
  animation: glb-spin .7s linear infinite;
}
@keyframes glb-spin { to { transform: rotate(360deg); } }

.glb__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 64px; padding: 0;
  background: rgba(20, 22, 30, .45); color: #fff; border: 0; cursor: pointer;
  transition: background .15s ease;
}
.glb__nav:hover { background: rgba(20, 22, 30, .8); }
.glb__nav .icon { width: 28px; height: 28px; }
.glb__prev { left: var(--space-1); }
.glb__next { right: var(--space-1); }

.glb__film {
  flex: 0 0 auto;
  display: flex; gap: var(--space-1);
  padding: var(--space-2); overflow-x: auto;
  scrollbar-width: thin;
}
.glb__filmthumb {
  flex: 0 0 auto;
  width: 52px; height: 52px; padding: 3px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid transparent; cursor: pointer; box-sizing: border-box;
  opacity: .65; transition: opacity .15s ease, border-color .15s ease;
}
/* Centre the strip with auto margins, NOT justify-content:center — once the thumbs overflow (phones), a centred
   flex row pushes the first ones off the LEFT edge where scrolling can never reach them. */
.glb__filmthumb:first-child { margin-left: auto; }
.glb__filmthumb:last-child  { margin-right: auto; }
.glb__filmthumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.glb__filmthumb:hover { opacity: 1; }
.glb__filmthumb.is-active { opacity: 1; border-color: var(--brand); }

@media (max-width: 640px) {
  .glb__nav { width: 40px; height: 52px; }
  .glb__img { max-width: 100%; }
  .pgal__hero { max-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  #glb, .glb__img, .glb__img.is-swapping, .pgal__thumb, .glb__filmthumb, .glb__expand, .glb__nav, .glb__close { transition: none; }
  .glb__stage.is-loading::after { animation: none; }
}