/* Site-specific custom styles — loaded after Tailwind (kept out of @layer to
   avoid Tailwind dropping plain CSS rules). */

video.case-video {
  aspect-ratio: 16 / 9; width: 100%; border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1); background: #000;
  object-fit: cover; display: block;
}
.gallery-trigger { cursor: zoom-in; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center;
  background: rgba(5, 8, 14, 0.92); backdrop-filter: blur(10px);
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 88vw; max-height: 82vh; border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff; font-size: 20px; cursor: pointer; transition: 0.2s;
}
.lightbox .lb-nav:hover { background: rgba(173, 255, 47, 0.18); border-color: rgba(173, 255, 47, 0.5); color: #adff2f; }
.lightbox .lb-prev { left: 24px; }
.lightbox .lb-next { right: 24px; }
.lightbox .lb-close {
  position: absolute; top: 20px; right: 24px; width: 42px; height: 42px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff; font-size: 18px; cursor: pointer; transition: 0.2s;
}
.lightbox .lb-close:hover { background: rgba(244, 0, 60, 0.25); border-color: rgba(244, 0, 60, 0.6); }
.lightbox .lb-counter {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

/* Auto-cycling hover rows */
.cycle-item { transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s, color 0.25s; }
.cycle-item:hover {
  border-color: rgba(173, 255, 47, 0.45) !important;
  background-color: rgba(173, 255, 47, 0.12) !important;
  color: #adff2f !important;
}
.cycle-item.cycle-active {
  border-color: rgba(173, 255, 47, 0.45);
  background-color: rgba(173, 255, 47, 0.12);
  box-shadow: 0 0 26px rgba(173, 255, 47, 0.16);
}

/* Media carousel (product combo slides) */
.media-carousel { position: relative; overflow: hidden; }
.media-carousel .slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s;
  pointer-events: none; width: 100%; height: 100%; object-fit: contain;
}
.media-carousel .slide.active { opacity: 1; pointer-events: auto; }
.media-carousel .dots {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 5;
}
.media-carousel .dots button {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55); background: transparent; cursor: pointer;
}
.media-carousel .dots button.active { background: #adff2f; border-color: #adff2f; }