/* ==========================================================================
   Product media gallery (stage + caption + thumbnail strip) and lightbox.
   ========================================================================== */

.gallery { display: block; }

.gallery__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: radial-gradient(80% 80% at 50% 38%, #17110d, #060403);
  touch-action: pan-y; /* let the page scroll vertically, we handle horizontal swipes */
}
.gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: opacity 0.3s var(--ease);
}
.gallery__img[data-fit="cover"] { object-fit: cover; }
.gallery__img.is-fresh { animation: shot-in 0.45s var(--ease); }
.gallery__stage.is-loading .gallery__img { opacity: 0.25; }
@keyframes shot-in {
  from { opacity: 0; transform: scale(1.015); }
  to { opacity: 1; transform: none; }
}

/* round-cornered nothing: square gold-rimmed controls, like the rest of the chrome */
.gallery__btn,
.gallery__zoom,
.lightbox__close {
  display: grid;
  place-items: center;
  background: rgba(8, 6, 5, 0.74);
  border: 1px solid var(--gold-500);
  color: var(--gold-200);
  cursor: pointer;
  font-size: 1.25rem;
  transition: border-color 0.25s, color 0.25s, box-shadow 0.25s, background 0.25s;
}
.gallery__btn:hover,
.gallery__zoom:hover,
.lightbox__close:hover {
  border-color: var(--ember-300);
  color: var(--ember-200);
  background: rgba(30, 14, 6, 0.85);
  box-shadow: 0 0 20px -4px rgba(255, 138, 42, 0.6);
}
.gallery__btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px; height: 44px;
  margin-top: -22px;
}
.gallery__btn--prev { left: 12px; }
.gallery__btn--next { right: 12px; }
.gallery__btn--prev .ico { transform: rotate(180deg); }
.gallery__zoom {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 38px; height: 38px;
}

.gallery__cap {
  display: grid;
  gap: 3px;
  min-height: 4.7rem;
  padding: 13px 18px;
  border-top: 1px solid var(--line-2);
  background: rgba(10, 7, 5, 0.92);
}
.gallery__cap strong {
  font: 700 0.76rem/1.2 var(--f-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-200);
}
.gallery__cap span { font-size: 0.97rem; line-height: 1.4; color: var(--ash-300); }

.gallery__thumbs {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-500) transparent;
  border-top: 1px solid var(--line-2);
  background: linear-gradient(180deg, #0d0a08, #080605);
}
.gallery__thumb {
  flex: 1 0 78px;
  aspect-ratio: 16 / 10;
  padding: 0;
  overflow: hidden;
  background: #050403;
  border: 1px solid var(--line-2);
  cursor: pointer;
  opacity: 0.55;
  scroll-snap-align: center;
  transition: opacity 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 0.9; transform: translateY(-2px); }
.gallery__thumb[aria-current="true"] {
  opacity: 1;
  border-color: var(--ember-300);
  box-shadow: 0 0 0 1px rgba(255, 138, 42, 0.35), 0 0 18px -4px rgba(255, 106, 26, 0.55);
}

@media (max-width: 560px) {
  .gallery__btn { width: 36px; height: 36px; margin-top: -18px; left: 8px; }
  .gallery__btn--next { left: auto; right: 8px; }
  .gallery__cap { padding: 11px 14px; }
}

/* ---------- lightbox ---------- */
body:has(dialog[open]) { overflow: hidden; }

.lightbox {
  width: min(96vw, 1320px);
  max-height: 94vh;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background: #060403;
  border: 1px solid var(--gold-500);
  color: var(--ash-200);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.9), inset 0 0 0 1px #000;
}
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.lightbox::backdrop {
  background: rgba(4, 3, 2, 0.9);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.lightbox__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, #17110d, #0d0a08);
}
.lightbox__bar > div { display: grid; flex: 1; min-width: 0; gap: 2px; }
.lightbox__bar strong {
  font: 700 0.8rem/1.2 var(--f-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-200);
}
.lightbox__bar span { font-size: 0.92rem; color: var(--ash-300); }
.lightbox__count { font: 700 0.68rem/1 var(--f-display); letter-spacing: 0.2em; color: var(--ash-400); white-space: nowrap; }
.lightbox__close { width: 40px; height: 40px; }
.lightbox__close .ico { transform: rotate(45deg); }
.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 14px 64px;
}
.lightbox__stage img {
  display: block;
  max-width: 100%;
  max-height: calc(94vh - 96px);
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 700px) {
  .lightbox__stage { padding: 10px; }
  .lightbox__stage .gallery__btn { top: auto; bottom: 14px; margin-top: 0; }
}