/* === FIX: Precio en modal no solapado con galería === */
/* El precio grande se cortaba o solapaba con las imágenes del lado izquierdo */
#productModal .detail-info,
.product-detail-modal .detail-info {
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Asegurar que el grid del modal siempre tenga 2 columnas en escritorio */
#productModal .product-detail-grid,
.product-detail-modal .product-detail-grid {
  overflow: visible !important;
  position: relative !important;
}

/* En móvil: columna derecha aparece DEBAJO, no oculta */
@media (max-width: 900px) {
  #productModal .product-detail-grid,
  .product-detail-modal .product-detail-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
  #productModal .detail-info,
  .product-detail-modal .detail-info {
    order: 2 !important;
    width: 100% !important;
  }
  #productModal .detail-image,
  .product-detail-modal .detail-image {
    order: 1 !important;
    width: 100% !important;
  }
}

#productModal .detail-price,
.product-detail-modal .detail-price,
#modalProductPrice {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  overflow: visible !important;
  white-space: nowrap !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  margin: 10px 0 8px !important;
  color: #2048a0 !important;
  font-weight: 900 !important;
}

/* SKU siempre visible y bien posicionado debajo del precio */
#modalProductSku,
.detail-sku {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: 6px !important;
  margin-bottom: 10px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Fix para que el detail-meta-row no colapse */
.detail-meta-row {
  min-height: 20px !important;
  overflow: visible !important;
}