/* Crownlight product-media component
   Reusable frame for real product screenshots/video. Reuses the page's
   existing --cl-* design tokens, so no colors are redefined here. */

.product-media{
  position:relative;
  display:block;
  width:100%;
  margin:0;
  overflow:hidden;
  border-radius:1.25rem;
  background:var(--cl-panel, #10172A);
  border:1px solid var(--cl-line, rgba(255,255,255,.10));
  box-shadow:0 20px 50px -12px rgba(0,0,0,.35);
  isolation:isolate;
}

.product-media picture,
.product-media img,
.product-media video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.product-media[data-size="lg"]{ aspect-ratio:16/10; }
.product-media[data-size="md"]{ aspect-ratio:16/10; }
.product-media[data-size="sm"]{ aspect-ratio:4/3; border-radius:1rem; }

.product-media[data-lightbox]{ cursor:zoom-in; }
.product-media[data-lightbox]:focus-visible{
  outline:2px solid var(--cl-gold, #F4B942);
  outline-offset:2px;
}

.product-media-badge{
  position:absolute;
  left:.85rem;
  top:.85rem;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .65rem;
  border-radius:9999px;
  background:rgba(7,10,20,.62);
  border:1px solid var(--cl-line, rgba(255,255,255,.14));
  color:#F8FAFC;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  backdrop-filter:blur(6px);
  pointer-events:none;
}

.product-media-zoom{
  position:absolute;
  right:.7rem;
  bottom:.7rem;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  border-radius:9999px;
  background:rgba(7,10,20,.6);
  border:1px solid var(--cl-line, rgba(255,255,255,.14));
  color:#F8FAFC;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

.product-media[data-lightbox]:hover .product-media-zoom,
.product-media[data-lightbox]:focus-visible .product-media-zoom{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .product-media-zoom{ transition:none; }
}

/* ---------------- Video layer ----------------
   The poster <picture><img> is always present underneath (first paint,
   no-JS fallback, LCP element). The <video> is an absolutely-positioned
   overlay that only fades in once it has actually started playing;
   until then — or if it errors — the poster stays fully visible, so
   there is never a blank frame. */

.product-media-video{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
  background:transparent;
}

.product-media-video.is-playing{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .product-media-video{ display:none !important; }
}

/* ---------------- Lightbox ---------------- */

.pm-lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(5,7,14,.86);
  backdrop-filter:blur(6px);
}

.pm-lightbox.is-open{ display:flex; }

.pm-lightbox-figure{
  position:relative;
  max-width:min(1100px,92vw);
  max-height:88vh;
  margin:0;
}

.pm-lightbox-figure img{
  display:block;
  width:100%;
  height:auto;
  max-height:88vh;
  object-fit:contain;
  border-radius:1rem;
  border:1px solid var(--cl-line, rgba(255,255,255,.14));
  box-shadow:0 30px 90px rgba(0,0,0,.5);
}

.pm-lightbox-caption{
  margin-top:.75rem;
  text-align:center;
  color:#D7DEEA;
  font-size:.88rem;
}

.pm-lightbox-close,
.pm-lightbox-nav{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  background:rgba(7,10,20,.7);
  border:1px solid var(--cl-line, rgba(255,255,255,.16));
  color:#F8FAFC;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}

.pm-lightbox-close:hover,
.pm-lightbox-nav:hover{
  background:rgba(7,10,20,.92);
  border-color:var(--cl-gold, #F4B942);
}

.pm-lightbox-close{
  top:-3rem;
  right:0;
  width:2.25rem;
  height:2.25rem;
}

.pm-lightbox-nav{
  top:50%;
  width:2.75rem;
  height:2.75rem;
  transform:translateY(-50%);
}

.pm-lightbox-nav.prev{ left:-3.5rem; }
.pm-lightbox-nav.next{ right:-3.5rem; }

@media (max-width:900px){
  .pm-lightbox-close{ top:-2.75rem; right:0; }
  .pm-lightbox-nav.prev{ left:.25rem; }
  .pm-lightbox-nav.next{ right:.25rem; }
}

/* ---------------- Product tour modal ---------------- */

.pm-tour-modal{
  position:fixed;
  inset:0;
  z-index:210;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(5,7,14,.88);
  backdrop-filter:blur(6px);
}

.pm-tour-modal.is-open{ display:flex; }

.pm-tour-figure{
  position:relative;
  width:min(1100px,94vw);
  margin:0;
  border-radius:1.25rem;
  overflow:hidden;
  border:1px solid var(--cl-line, rgba(255,255,255,.14));
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  background:var(--cl-panel, #10172A);
  aspect-ratio:16/10;
}

.pm-tour-figure video,
.pm-tour-figure img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.pm-tour-figure video{ position:absolute; inset:0; z-index:1; }

.pm-tour-close{
  position:absolute;
  top:.85rem;
  right:.85rem;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:9999px;
  background:rgba(7,10,20,.7);
  border:1px solid var(--cl-line, rgba(255,255,255,.16));
  color:#F8FAFC;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}

.pm-tour-close:hover{
  background:rgba(7,10,20,.92);
  border-color:var(--cl-gold, #F4B942);
}