/* Go Break · botones de la ficha de producto */

.gb-acciones{
  --gb-primario: var(--e-global-color-primary, #003E5C);
  --gb-acento:   var(--e-global-color-secondary, #FFA525);
  --gb-wa:       #25D366;
  --gb-borde:    #DCE6EC;

  display: flex;
  align-items: stretch;   /* los dos botones, la misma altura */
  gap: 12px;
  margin: 22px 0;
  font-family: var(--e-global-typography-text-font-family, inherit);
}
.gb-acciones *{ box-sizing: border-box; }

.gb-accion{
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 15px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.gb-accion:hover{ transform: translateY(-1px); text-decoration: none; }
.gb-accion:focus-visible{ outline: 3px solid var(--gb-acento); outline-offset: 2px; }

.gb-accion svg{
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* El texto no se parte nunca: antes de eso, los botones se apilan */
.gb-accion span{ white-space: nowrap; }

/* Principal: es el que tiene que llamar la atención */
.gb-accion--wa{
  flex: 1 1 auto;
  background: var(--gb-wa);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(37, 211, 102, .9);
}
.gb-accion--wa:hover{ background: #1FB855; color: #fff; }

/* Secundario: mismo alto, sin robar protagonismo.
 *
 * El color NO puede ser fijo: esta ficha va sobre el azul de marca y un texto
 * azul sobre fondo azul no se ve. Por defecto hereda el color de texto de la
 * sección, y el JS afina añadiendo gb-sobre-oscuro / gb-sobre-claro según el
 * fondo que haya detrás de verdad.
 */
.gb-accion--share{
  flex: 0 0 auto;
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.gb-accion--share:hover{ border-color: currentColor; }

/* Sobre fondo oscuro (el caso de la ficha de producto) */
.gb-acciones.gb-sobre-oscuro .gb-accion--share{
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}
.gb-acciones.gb-sobre-oscuro .gb-accion--share:hover{
  background: rgba(255, 255, 255, .14);
  border-color: #fff;
}

/* Sobre fondo claro */
.gb-acciones.gb-sobre-claro .gb-accion--share{
  color: var(--gb-primario);
  border-color: var(--gb-borde);
}
.gb-acciones.gb-sobre-claro .gb-accion--share:hover{
  background: #F4F8FA;
  border-color: var(--gb-primario);
}

/* Confirmación de "enlace copiado": el ámbar de marca se lee sobre los dos */
.gb-accion--share.is-copiado,
.gb-acciones.gb-sobre-oscuro .gb-accion--share.is-copiado,
.gb-acciones.gb-sobre-claro .gb-accion--share.is-copiado{
  background: var(--gb-acento);
  border-color: var(--gb-acento);
  color: #3A2400;
}

/* Los dos textos completos piden unos 500 px. Por debajo de eso se apilan a
   ancho completo, que en el móvil además es mejor para el pulgar. */
@media (max-width: 640px){
  .gb-acciones{ flex-direction: column; gap: 10px; }
  .gb-accion{ width: 100%; padding: 15px 18px; }
}

@media (prefers-reduced-motion: reduce){
  .gb-accion{ transition: none; }
  .gb-accion:hover{ transform: none; }
}