/* =========================================================
   custom-product.css  (Detalle de producto)
   - Capa de estilos minimalistas y premium
   - Namespacing con .pg-product para evitar colisiones
   ========================================================= */

/* ====== Tokens ====== */
:root{
  --brand:#0d6efd;
  --surface:#ffffff;
  --bg:#f8fafc;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;

  --success:#16a34a;
  --danger:#dc2626;
  --warning:#f59e0b;

  --radius:.75rem;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 6px 20px rgba(0,0,0,.08);
}

/* ====== Shell de la página ====== */
.pg-product{
  background:transparent;
  color:var(--text);
}

/* ====== Barra vendedor (una sola fila, elegante) ====== */
.pg-product .seller-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.75rem 1rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.pg-product .seller-meta{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.pg-product .seller-avatar{
  width:40px; height:40px; border-radius:50%;
  object-fit:cover; border:1px solid var(--border);
}
.pg-product .seller-name{ font-weight:600; font-size:.95rem; color:var(--text); }
.pg-product .seller-score{ font-size:.85rem; color:var(--muted); white-space:nowrap; }
.pg-product .btn-chat{
  background:#ef4444; color:#fff; border:0; border-radius:999px;
  font-weight:700; line-height:1; padding:.5rem .9rem;
}
.pg-product .rgm-stars i{ font-size:.9rem; color:#f59e0b; }
.pg-product .rgm-stars i.far{ color:#e5e7eb; }

/* ====== Galería (sin gradiente, imagen completa, premium) ====== */
.pg-product .product-slides{
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-md);
}
.pg-product .single-product-slide{
  width:100%;
  height:360px;              /* móvil */
  background:#fff;           /* fondo limpio */
  object-fit:contain;        /* imagen completa, sin recortes */
  display:block;
}
@media (min-width:768px){
  .pg-product .single-product-slide{ height:520px; } /* desktop */
}

/* Owl dots minimalistas */
.pg-product .owl-carousel .owl-stage-outer{ background:#fff; }
.pg-product .owl-dots{ text-align:center; padding:.5rem 0 .75rem; }
.pg-product .owl-dots .owl-dot span{
  width:6px; height:6px; display:inline-block; margin:0 4px;
  background:#d1d5db; border-radius:999px; transition:background .2s ease, transform .2s ease;
}
.pg-product .owl-dots .owl-dot.active span{ background:var(--brand); transform:scale(1.1); }

/* Botón FAVORITO (siempre visible, no rompe animaciones) */
.pg-product .fav-btn{
  position:absolute; top:.5rem; right:.5rem; z-index:20;
  width:36px; height:36px; border-radius:50%; border:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.95);
  color:#ef4444;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease;
}
.pg-product .fav-btn .lni{ font-size:18px; line-height:1; }
.pg-product .fav-btn:hover{ transform:translateY(-1px); }

/* Botón DENUNCIA (evita inline; forzamos estilo premium) */
.pg-product .showComplaint{
  position:absolute; right:.5rem; bottom:.5rem; z-index:20;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:0 !important;
  background:rgba(0,0,0,.5) !important;
  color:#fff; box-shadow:none !important;
  backdrop-filter:blur(6px);
}

/* ====== Título / precio (centrado, jerarquía clara) ====== */
.pg-product .product-description .container{ max-width:920px; }
.pg-product .p-title-price h2{
  margin:0 0 .25rem 0;
  line-height:1.3;
  font-size:1.25rem;
  font-weight:800;
}
@media (min-width:768px){
  .pg-product .p-title-price h2{ font-size:1.5rem; }
}
.pg-product .price{
  text-align:center;
}
.pg-product .price .amount{
  font-size:1.6rem; font-weight:800; color:#15803d;
}
.pg-product .price .currency{
  font-size:1rem; color:#065f46;
}
.pg-product .divider{ height:1px; background:var(--border); }

/* Pills auxiliares (envío, distancia, stock, etc) */
.pg-product .pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .5rem; font-size:.75rem; font-weight:600;
  border-radius:999px;
}
.pg-product .pill--green{ background:#dcfce7; color:#166534; }
.pg-product .pill--blue{ background:#dbeafe; color:#1e40af; }
.pg-product .pill--orange{ background:#ffedd5; color:#9a3412; }

/* ====== Contenido textual ====== */
.pg-product .p-specification{ background:#fff; border-radius:var(--radius); }
.pg-product .p-specification .container{ max-width:920px; }
.pg-product .p-specification .p-title-price h5{
  margin:0; font-weight:800; font-size:1rem;
}
.pg-product .product-description span,
.pg-product .product-description p{ color:#374151; }

/* ====== Barra inferior fija (acciones) ====== */
.pg-product .fixed-options{
  position:sticky; bottom:0; left:0; right:0;
  background:#fff; border-top:1px solid var(--border);
  box-shadow:0 -10px 30px rgba(0,0,0,.06);
  padding:.75rem;
}
.pg-product .fixed-options select{
  border:1px solid var(--border);
  border-radius:.5rem;
  outline:none;
}
.pg-product .btn-rounded{ border-radius:999px; font-weight:700; }

/* ====== Accesibilidad ====== */
.pg-product a:focus-visible,
.pg-product button:focus-visible,
.pg-product select:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* ====== Utilidades específicas ====== */
/* Quita forzado de 500px si llega de inline en otras vistas */
.pg-product .custom-image{
  height:auto !important;
}

/* Contenedor responsive de detalle (si se usa en esta vista) */
.pg-product .container-detail{ width:700px; }
@media (max-width:681px){
  .pg-product .container-detail{ width:100%; }
}

/* ====== Compat pequeños ====== */
/* Mantén las barras mini usadas en otros bloques si aparecen aquí */
.pg-product .ulti{ max-width:100%; height:15px; }
.pg-product .ultri{ max-width:11%; height:15px; }

/* Footer inline compacto (si se reaprovecha aquí) */
.pg-product .footer.content > img,
.pg-product .footer.content > p{ display:inline-block; }

/* ====== Helpers sin ruido visual ====== */
.pg-product .text-muted{ color:var(--muted); }
/* ====== Tira de miniaturas (synced con Owl) ====== */
.pg-product .thumbs-bar{ overflow:hidden; }
.pg-product .thumbs-track{
  display:flex; gap:.5rem; overflow-x:auto; padding:.25rem;
  -ms-overflow-style:none; scrollbar-width:none;
}
.pg-product .thumbs-track::-webkit-scrollbar{ display:none; }

.pg-product .thumb{
  flex:0 0 auto; width:64px; height:64px; padding:0;
  border:1px solid var(--border); border-radius:.5rem; background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.pg-product .thumb:hover{ transform:translateY(-1px); }
.pg-product .thumb img{ width:100%; height:100%; object-fit:cover; border-radius:.45rem; }

.pg-product .thumb.is-active,
.pg-product .thumb[aria-current="true"]{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(13,110,253,.15);
}
.pg-product .thumb:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}