/* /UrbanJ/css/VisualizarProducto.css */

/* Variables (heredadas de styles.css) */
/* --bg, --section, --card, --text, --muted, --accent, --font-h, --font-b */

.vp-container {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 0 1rem;
  color: var(--text);
}

.vp-producto {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

/* IMAGENES PRINCIPALES */
.vp-imagenes {
  flex: 1 1 400px;
}
.vp-imagenes #vp-main-img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  background: var(--card);
}

/* MINIATURAS */
.vp-thumb-wrapper {
  margin-top: 1rem;
  display: flex;
  gap: .5rem;
  overflow-x: auto;
}
.vp-thumb-wrapper::-webkit-scrollbar {
  display: none;
}
.vp-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: .6;
  border: 2px solid transparent;
  transition: opacity .2s, border-color .2s;
}
.vp-thumb:hover,
.vp-thumb.active {
  opacity: 1;
  border-color: var(--accent);
}

/* INFO PRODUCTO */
.vp-info {
  flex: 1 1 300px;
}
.vp-info h1 {
  font-family: var(--font-h);
  margin-bottom: .5rem;
  color: var(--accent);
}
.vp-precio {
  font-size: 1.75rem;
  color: var(--accent);
  margin-bottom: 1rem;
}
.vp-desc {
  margin-bottom: 1rem;
  line-height: 1.6;
}
.vp-meta {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}
.vp-meta li {
  margin-bottom: .3rem;
}
.vp-acciones {
  display: flex;
  gap: .5rem;
}
.vp-acciones .btn {
  padding: .6rem 1.2rem;
  border: none;
  border-radius: 4px;
  font-family: var(--font-h);
  cursor: pointer;
  transition: background .2s;
}
.vp-acciones .btn--primary {
  background: var(--accent);
  color: #fff;
}
.vp-acciones .btn--primary:hover {
  background: #c5333d;
}
.vp-acciones .btn--secondary {
  background: #555;
  color: #fff;
}
.vp-acciones .btn--secondary:hover {
  background: #666;
}

/* RESEÑAS */
.vp-reseñas {
  margin-top: 3rem;
}
.vp-reseñas h2 {
  font-family: var(--font-h);
  margin-bottom: 1rem;
  color: var(--accent);
}
.review-form {
  background: var(--card);
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 2rem;
}
.review-form label {
  display: block;
  margin-top: .75rem;
  font-weight: bold;
}
.review-form select,
.review-form textarea {
  width: 100%;
  padding: .5rem;
  margin-top: .25rem;
  border: 1px solid #444;
  border-radius: 4px;
  background: var(--section);
  color: var(--text);
}
.review-form button {
  margin-top: 1rem;
  padding: .6rem 1.2rem;
  border: none;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-h);
  cursor: pointer;
}
.error, .info {
  color: var(--muted);
  margin-bottom: 1rem;
}

/* LISTADO DE RESEÑAS */
.review {
  background: var(--card);
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.review .stars {
  color: var(--accent);
  font-size: 1.1rem;
  margin-bottom: .5rem;
}
.review p {
  margin-bottom: .5rem;
  line-height: 1.5;
}
.review .by {
  font-size: .85rem;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 768px) {
  .vp-producto {
    flex-direction: column;
  }
  .vp-imagenes,
  .vp-info {
    flex: 1 1 100%;
  }
}