/* Collore — botão "Finalizar no WhatsApp" (só nas pashminas).
   Mesma forma do botão de carrinho do site (raio 10px, padding 14/28, peso 600). */

body.collore-wa-produto form.cart .single_add_to_cart_button,
body.collore-wa-produto form.cart .single_add_to_cart_button.button {
  display: none !important;
}

.collore-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: #fff !important;
  text-decoration: none !important;
  border: 0;
  border-radius: 10px;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  transition: filter .15s ease, transform .05s ease;
}

.collore-wa-btn:hover,
.collore-wa-btn:focus {
  color: #fff !important;
  filter: brightness(.93);
}

.collore-wa-btn:active {
  transform: translateY(1px);
}

.collore-wa-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex: none;
}

@media (max-width: 600px) {
  .collore-wa-btn {
    width: 100%;
    justify-content: center;
  }

  /* Com o botao de carrinho escondido, sobrava a caixa de quantidade sozinha:
     112px de largura, 50px de altura e o numero colado a esquerda, acima de um
     botao verde de 370px. Parecia sobra de layout. Aqui ela vira um campo de
     largura cheia, mesma altura e mesmo raio do botao, com o numero centrado.

     NAO mexer no `display` do `form.cart`: ele tambem contem os campos do
     WowAddons, e virar flex mudou a altura do bloco de opcoes no teste. */
  body.collore-wa-produto form.cart .quantity {
    width: 100%;
    margin: 0 0 10px !important;
  }
  body.collore-wa-produto form.cart .quantity input.qty {
    width: 100% !important;
    max-width: none !important;
    height: 48px;
    text-align: center;
    padding: 12px 16px;
    border-radius: 10px;
  }
}