/* ==============================
   producto_detalle.css
   Complemento del template final
   (NO reemplaza estilos inline; solo completa)
   ============================== */

/* Contenedor general: que respire y no se vea “pegado” */
.container.ajuste-top{
  margin-top: 18px;
}

/* ===== Miniaturas (columna izquierda) ===== */
.miniaturas{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0 6px 0;
  max-height: calc(100vh - 140px);
  overflow: auto;
  scrollbar-width: thin;
}

.miniaturas::-webkit-scrollbar{
  width: 8px;
}
.miniaturas::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.15);
  border-radius: 12px;
}

/* Miniaturas imagenes */
.miniatura-prod{
  width: 70px;
  height: 70px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: block;
}

.miniatura-prod:hover{
  transform: translateY(-1px);
  border-color: #cbd5e1;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* Para el contenedor sticky: mejor orden visual */
.sticky-img-box{
  display: grid;
  grid-template-columns: 86px 1fr; /* miniaturas | imagen */
  gap: 18px;
  align-items: start;
}

/* En móvil: miniaturas horizontales arriba */
@media (max-width: 900px){
  .sticky-img-box{
    grid-template-columns: 1fr;
  }

  .miniaturas{
    flex-direction: row;
    max-height: unset;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 0 10px 0;
  }

  .miniatura-prod,
  .video-thumb-wrap{
    flex: 0 0 auto;
  }
}

/* ===== Imagen principal (solo “polish”, el zoom lo controlas inline) ===== */
.img-zoom-container{
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* ===== Columna derecha: armonía y tipografía ===== */
.detalle-col-info{
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
}

.detalle-titulo{
  font-size: 1.7rem;
}

@media (max-width: 768px){
  .detalle-col-info{
    padding: 18px !important;
  }
  .detalle-titulo{
    font-size: 1.4rem;
  }
}

/* ===== Inputs / cantidad ===== */
.detalle-col-info input.form-control[type="number"]{
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

/* ===== Chips de variables (estado base; tu inline maneja .is-active) ===== */
.var-chip{
  border-radius: 10px;
}

/* ===== Cards de precio: micro-polish (no toca tus colores inline) ===== */
.price-card,
.prices-bottom-row{
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}
.price-card.selected,
.prices-bottom-row.selected{
  transform: translateY(-1px);
}

/* ===== Relacionados: que no se corte en móviles ===== */
.rel-shell{
  border-radius: 14px;
}
@media (max-width: 768px){
  .rel-shell{
    padding: 0 18px !important;
  }
  .rel-arrow{
    width: 40px !important;
    height: 40px !important;
  }
}

/* ===== Video thumb: coherencia con miniaturas ===== */
.video-thumb-wrap{
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.video-thumb-wrap:hover{
  transform: translateY(-1px);
}

/* ===== Modal: evitar que tape elementos fijos del sitio ===== */
#videoModal{
  z-index: 11000; /* por encima de WhatsApp y overlays */
}

/* ===== FIX ZOOM por encima de columna precios ===== */
.detalle-producto-wrapper{
  position: relative;
}

.sticky-img-box{
  position: relative;
  z-index: 2000; /* sube toda la columna izquierda */
}

.product-viewer{
  z-index: 3000 !important;
}

.img-zoom-result{
  z-index: 99999 !important;     /* por encima de TODO */
  pointer-events: none !important; /* para que no “rompa” el hover/mousemove */
}

/* dejamos la columna derecha por debajo del zoom */
.detalle-col-info{
  position: relative;
  z-index: 1 !important;
}

/* ===== Logo 29.COM más visible ===== */
.logo-29-img{
  height: 30px !important;   /* prueba 28–34 según te guste */
  width: auto !important;
  transform: translateY(1px);
}

/* Aumentar icono de Precio_29com.png */
img[src*="Precio_29com.png"]{
  width: 44px;
  height: auto;
}
@media (max-width: 768px){
  img[src*="Precio_29com.png"]{ width: 38px; }
}