/* product.css — gallery + crazy effects */

.product-media{position:relative}
.product-stage{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:rgba(15,23,42,.35);
  border:1px solid rgba(148,163,184,.35);
  box-shadow: 0 18px 55px rgba(2,6,23,.45);
  transform-style:preserve-3d;
}
.product-stage img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transform: translateZ(0);
  transition: opacity .18s ease, transform .45s ease, filter .45s ease;
  will-change: transform, filter, opacity;
  user-select:none;
  -webkit-user-drag:none;
}

.stage-bling{
  position:absolute; inset:-2px;
  pointer-events:none;
  opacity:.0;
  transition: opacity .25s ease;
}
.stage-bling::before{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 20% 20%, rgba(99,102,241,.50), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(34,211,238,.40), transparent 50%),
    radial-gradient(circle at 50% 85%, rgba(251,55,255,.35), transparent 55%);
  filter: blur(18px);
  transform: translateZ(40px);
  animation: blobMove 7s ease-in-out infinite;
}
.stage-bling::after{
  content:"";
  position:absolute; inset:-30%;
  background: conic-gradient(from 90deg,
    rgba(34,211,238,.0),
    rgba(34,211,238,.55),
    rgba(251,55,255,.55),
    rgba(99,102,241,.55),
    rgba(34,211,238,.0)
  );
  filter: blur(22px);
  mix-blend-mode: screen;
  opacity:.35;
  animation: spinGlow 10s linear infinite;
}

.product-media.hype-on .stage-bling{opacity:1}
.product-media.hype-on .product-stage{
  border-color: rgba(99,102,241,.55);
  box-shadow: 0 30px 120px rgba(99,102,241,.25), 0 18px 55px rgba(2,6,23,.55);
}
.product-media.hype-on #mainImg{
  filter: saturate(1.18) contrast(1.05);
}

@keyframes blobMove{
  0%{transform: translate(-2%, -1%) scale(1) rotate(0deg)}
  50%{transform: translate(2%, 1%) scale(1.06) rotate(18deg)}
  100%{transform: translate(-2%, -1%) scale(1) rotate(0deg)}
}
@keyframes spinGlow{
  from{transform: rotate(0deg)}
  to{transform: rotate(360deg)}
}

.product-thumbs{
  display:flex;
  gap:.55rem;
  overflow:auto;
  padding: .2rem .1rem .35rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.product-thumbs::-webkit-scrollbar{height:8px}
.product-thumbs::-webkit-scrollbar-thumb{background:rgba(148,163,184,.25);border-radius:999px}

.thumb{
  border:1px solid rgba(148,163,184,.28);
  background: rgba(2,6,23,.15);
  border-radius:14px;
  width:72px;height:54px;
  flex: 0 0 auto;
  padding:0;
  overflow:hidden;
  scroll-snap-align: start;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover{transform: translateY(-2px); border-color: rgba(99,102,241,.45)}
.thumb.is-active{
  border-color: rgba(99,102,241,.7);
  box-shadow: 0 12px 35px rgba(99,102,241,.18);
  transform: translateY(-2px) scale(1.02);
}

.lightbox{
  position:fixed; inset:0;
  background: rgba(2,6,23,.82);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:18px;
  backdrop-filter: blur(8px);
}
.lightbox.is-open{display:flex}
.lightbox-img{
  max-width: min(1100px, 96vw);
  max-height: 86vh;
  border-radius: 22px;
  box-shadow: 0 24px 100px rgba(0,0,0,.55);
}
.lightbox-close{
  position:fixed;
  top:16px;
  left:16px;
  border-radius: 999px;
  border:1px solid rgba(148,163,184,.35);
  background: rgba(15,23,42,.55);
  color:#fff;
  width:44px;height:44px;
  display:grid;place-items:center;
}

.lens{
  position:absolute;
  width:140px;height:140px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  pointer-events:none;
  background-repeat:no-repeat;
  display:none;
  mix-blend-mode: screen;
}
.product-media.lens-on .lens{display:block}

/* crazy hover on product cards (extra punch) */
.product-card .product-thumb img,
.card-product img{
  transition: transform .35s ease, filter .35s ease;
}
.product-card:hover .product-thumb img,
.card-product:hover img{
  transform: scale(1.08) rotate(-0.4deg);
  filter: saturate(1.15) contrast(1.05);
}