/* Fanor · Producto — Comprar ahora (widget suelto)
 *
 * Los defaults reproducen el botón que hoy pinta el widget de Acciones dentro de
 * la caja de compra: contorno oscuro sobre blanco, en versalitas. El rojo sólido
 * se reserva para «Agregar al carrito», que es la acción principal; si los dos
 * botones tiraran igual del ojo, ninguno lo haría.
 *
 * ── El rosa que se colaba ──
 * Hello Elementor (y el reset de muchos temas) pinta TODOS los botones:
 *   [type=button], button            { border: 1px solid #c36; color: #c36 }      (0,1,0)
 *   [type=button]:hover, button:focus { background-color: #c36; color: #fff }     (0,2,0)
 * Con `.fanor-prod-comprar-ahora__btn` a secas (0,1,0) el reposo quedaba empatado —
 * ganaba la hoja que cargara después— y el botón deshabilitado no tenía hover
 * propio, así que el rosa entraba directo al pasar el cursor por uno agotado.
 *
 * Por eso: selector con la raíz (0,2,0) y `!important` SOLO en fondo, color y
 * borde, que llegan por variables (los controles de Elementor escriben las
 * variables, no estas propiedades: siguen mandando). Relleno, tipografía y sombra
 * no llevan `!important`; sus controles usan `{{WRAPPER}} …__btn` (0,3,0) y ganan
 * igual. */

.fanor-prod-comprar-ahora {
  display: flex;
}

.fanor-prod-comprar-ahora .fanor-prod-comprar-ahora__btn {
  width: 100%;
  height: auto;
  min-height: var(--fcb-alto, 52px);
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: var(--fcb-bg, #fff) !important;
  color: var(--fcb-color, var(--fn-texto)) !important;
  border: var(--fcb-borde-grosor, 1.5px) solid var(--fcb-borde, var(--fn-texto)) !important;
  border-radius: var(--fcb-radio, 6px) !important;
  box-shadow: none;
  cursor: pointer;
  font-family: var(--fn-fuente);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  text-decoration: none !important;
  text-shadow: none;
  text-transform: uppercase;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.fanor-prod-comprar-ahora .fanor-prod-comprar-ahora__btn:hover:not(:disabled),
.fanor-prod-comprar-ahora .fanor-prod-comprar-ahora__btn:focus:not(:disabled),
.fanor-prod-comprar-ahora .fanor-prod-comprar-ahora__btn:active:not(:disabled) {
  background: var(--fcb-bg-hover, var(--fn-texto)) !important;
  color: var(--fcb-color-hover, #fff) !important;
  border-color: var(--fcb-borde-hover, var(--fcb-borde, var(--fn-texto))) !important;
  outline: none;
}

/* Deshabilitado (agotado): se queda con los colores de reposo aunque el cursor pase
   por encima o tenga el foco. Sin esto era justo aquí donde aparecía el rosa. */
.fanor-prod-comprar-ahora .fanor-prod-comprar-ahora__btn:disabled,
.fanor-prod-comprar-ahora .fanor-prod-comprar-ahora__btn:disabled:hover,
.fanor-prod-comprar-ahora .fanor-prod-comprar-ahora__btn:disabled:focus,
.fanor-prod-comprar-ahora .fanor-prod-comprar-ahora__btn:disabled:active {
  background: var(--fcb-bg, #fff) !important;
  color: var(--fcb-color, var(--fn-texto)) !important;
  border-color: var(--fcb-borde, var(--fn-texto)) !important;
}

/* Ancho automático: el botón se ajusta a su texto en vez de estirarse. */
.fanor-prod-comprar-ahora.is-ancho-auto {
  display: block;
}

.fanor-prod-comprar-ahora.is-ancho-auto .fanor-prod-comprar-ahora__btn {
  width: auto;
  display: inline-flex !important;
}

.fanor-prod-comprar-ahora__icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  color: inherit;
}

.fanor-prod-comprar-ahora__icon svg {
  display: block;
  width: var(--fcb-icono, 18px);
  height: var(--fcb-icono, 18px);
}

/* ---- Estados ---- */
.fanor-prod-comprar-ahora__btn:disabled,
.fanor-prod-comprar-ahora__btn.is-cargando {
  opacity: .65;
  cursor: not-allowed;
}