/* ==========================================================================
   SORIAN JOYERÍA - BOLITA DE WHATSAPP Y BOTONES DE COMPRA (whatsapp.css)
   Verde de WhatsApp solo en la bolita, para que se reconozca al instante.
   ========================================================================== */

.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #25D366;
  color: #FFFFFF;
  font-size: 1.85rem;
  text-decoration: none;
  box-shadow: 0 10px 28px -6px rgba(18, 140, 70, 0.55), 0 0 0 4px rgba(255, 255, 255, 0.9);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s ease;
  animation: waFloatIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.6s both;
}

.wa-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -6px rgba(18, 140, 70, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.95);
}

.wa-float:active {
  transform: scale(0.95);
}

.wa-float:focus-visible {
  outline: 3px solid #A67C1E;
  outline-offset: 4px;
}

/* Etiqueta que aparece al pasar el cursor (solo en computador) */
.wa-float-label {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  padding: 9px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #EADFC4;
  box-shadow: 0 8px 22px -10px rgba(43, 35, 38, 0.35);
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  color: #2B2326;
  opacity: 0;
  transform: translate(6px, -50%);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) {
  .wa-float:hover .wa-float-label,
  .wa-float:focus-visible .wa-float-label {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

@keyframes waFloatIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* No tapar la bolsa ni las ventanas abiertas */
body:has(.cart-drawer.active) .wa-float,
body:has(.modal-overlay.active) .wa-float {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 600px) {
  .wa-float {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
    font-size: 1.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float {
    animation: none;
    transition: none;
  }
}

/* Botón «Consultar por WhatsApp» en la vista rápida */
.qv-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 13px 20px;
  background: #FFFFFF;
  border: 1px solid #25D366;
  border-radius: 999px;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #128C4A;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.16s ease-out;
}

.qv-wa-btn i {
  font-size: 1.05rem;
}

.qv-wa-btn:hover {
  background: #F0FBF4;
}

.qv-wa-btn:active {
  transform: scale(0.98);
}

/* Botón de WhatsApp en la sección de contacto del inicio */
.sj-btn-whatsapp {
  background: #25D366;
  color: #0B2E17;
  border-color: #25D366;
}

.sj-btn-whatsapp:hover {
  background: #2EE070;
  color: #0B2E17;
  border-color: #2EE070;
}

[data-social][hidden],
[data-social-item][hidden] {
  display: none !important;
}

/* Ayudas bajo los campos del panel */
.cms-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.74rem;
  line-height: 1.5;
  color: #6A615B;
}