/* ============================================================================
   UIXTRA — PRODUCT PAGE (DESIGN ONLY)
   No JS changes • No HTML changes • No Navbar changes
============================================================================ */

/* -----------------------------
   MEDIA WRAPPER
------------------------------*/
#product-media-wrapper {
  position: relative;
}

/* Imagen principal */
#product-main-image {
  background: radial-gradient(
    circle at center,
    rgba(255,255,255,0.05),
    rgba(0,0,0,0.4)
  );
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

#product-main-image:hover {
  transform: scale(1.015);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}

/* Cursor zoom */
#product-main-image {
  cursor: zoom-in;
}

/* -----------------------------
   GALLERY THUMBNAILS
------------------------------*/
#product-gallery img {
  background: #020712;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

#product-gallery img:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.4);
}

/* Active thumbnail */
#product-gallery img.ring-cyan-400 {
  box-shadow: 0 0 0 2px rgba(34,211,238,0.8),
              0 10px 40px rgba(34,211,238,0.25);
}

/* -----------------------------
   BUY BUTTON
------------------------------*/
.buy-btn {
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #020712;
  background: linear-gradient(
    135deg,
    #34d399,
    #22d3ee,
    #38bdf8
  );
  box-shadow:
    0 10px 35px rgba(34,211,238,0.35),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

.buy-btn:hover {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.05);
  box-shadow:
    0 15px 45px rgba(34,211,238,0.45),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

.buy-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Disabled */
.buy-btn.opacity-40 {
  pointer-events: none;
  filter: grayscale(1);
}

/* -----------------------------
   PRICE
------------------------------*/
#product-price {
  letter-spacing: -0.02em;
}

/* -----------------------------
   DESCRIPTION
------------------------------*/
#product-description-long p {
  margin-bottom: 0.75rem;
}

/* -----------------------------
   LIGHTBOX
------------------------------*/
#product-lightbox {
  backdrop-filter: blur(8px);
  animation: fadeIn 0.25s ease forwards;
}

#product-lightbox img {
  animation: zoomIn 0.25s ease forwards;
}

/* -----------------------------
   RELATED PRODUCTS
------------------------------*/
#related-products-grid > div {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

#related-products-grid > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 55px rgba(0,0,0,0.45);
}

/* -----------------------------
   ANIMATIONS
------------------------------*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.96);
  }
  to {
    transform: scale(1);
  }
}

/* -----------------------------
   RESPONSIVE TWEAKS
------------------------------*/
@media (max-width: 768px) {
  #product-main-image {
    max-height: 70vh;
  }

  .buy-btn {
    width: 100%;
    justify-content: center;
  }
}