/* 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);
}

/* Click-to-play video: collapsed thumbnail -> full-viewport player */
.video-lightbox .video-frame {
  width: min(92vw, calc((100vh - 150px) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: #000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.65);
}
.video-lightbox .video-frame iframe {
  display: block; width: 100%; height: 100%; border: 0;
}
.video-lightbox .lb-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 18px; max-width: 82vw; text-align: center;
  font-size: 13px; color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.yt-trigger { min-height: 260px; }
.yt-trigger img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.yt-trigger.no-thumb { min-height: 300px; }

/* Auto-cycling hover rows */
.cycle-item { transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s, color 0.25s; }
.chip.cycle-item:hover,
.glass.cycle-item:hover {
  border-color: rgba(173, 255, 47, 0.45);
  background-color: rgba(173, 255, 47, 0.12);
  color: #adff2f;
}
.chip.cycle-item.cycle-active,
.glass.cycle-item.cycle-active {
  border-color: rgba(173, 255, 47, 0.45);
  background-color: rgba(173, 255, 47, 0.12);
  color: #adff2f;
  box-shadow: 0 0 26px rgba(173, 255, 47, 0.16);
}
.btn-accent.cycle-item.cycle-active { box-shadow: 0 0 24px rgba(173, 255, 47, 0.3); transform: translateY(-2px); }
.btn-ghost.cycle-item.cycle-active { border-color: rgba(173, 255, 47, 0.6); color: #adff2f; }

/* 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; }
/* Light "official product shot" panel — keeps original photos' colors untouched */
.product-shot { background: linear-gradient(160deg, #ffffff, #e9edf3); }
.product-shot .slide { padding: 18px; }
.product-shot .dots button { border-color: rgba(26, 29, 39, 0.35); }
.product-shot .dots button.active { background: #f4003c; border-color: #f4003c; }
.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; }

/* Nav guard: links keep on one line (desktop nav) */
nav[aria-label="Main"] a { white-space: nowrap; }