/*
 * Brittany — cartão de produto (brittany-melhorias-20260925 §2) e botão «Pedir por WhatsApp» (§3).
 * Carregado pelo evento brittany_whatsapp em todas as páginas do catálogo. Vale para TODAS as listagens
 * (página inicial, categorias, pesquisa), porque todas usam o mesmo journal3/product_card.twig.
 *
 * Medido antes (25/09): no computador o Journal3 punha os botões `position:absolute` + `transform` POR CIMA
 * da foto, só visíveis com o rato por cima; no telemóvel eram ícones de 30 px sem texto (< 44 px).
 * Critério: foto limpa; coração pequeno num canto; nome e preço; «Agregar a mi pedido» cheio na cor do
 * logótipo (#3C040C, medido nos píxeis do logótipo; Gate 4, 26/09); WhatsApp no verde oficial (#25D366, Gate 4) ao lado; sem quantidade nem «comparar»;
 * sempre visível, sem depender do rato. Alvos de toque ≥ 44 px.
 */

/* foto limpa: sem a lupa da vista rápida por cima */
.product-thumb .btn-quickview { display: none !important; }
/* nos ecrãs tácteis o Journal3 volta a mostrar a lupa com uma regra mais forte (medido: display:flex no telemóvel) */
html body .product-thumb .quickview-button,
html body .product-thumb .quickview-button .btn-quickview { display: none !important; }

/* sem quantidade nem «comparar» no cartão (a quantidade escolhe-se em «Mi pedido») */
.product-thumb .button-group .stepper { display: none !important; }
.product-thumb .btn-compare { display: none !important; }

/* os botões saem de cima da foto e ficam sempre visíveis, por baixo do preço */
.product-thumb .buttons-wrapper {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100%;
  margin-top: 10px;
}
/* no computador o Journal3 escondia o grupo até ao rato (medido: opacity:0, visibility:hidden, transform) e o grupo
   era position:relative — o que prendia o coração ao fundo do cartão */
.product-thumb .button-group {
  display: block !important;
  width: 100%;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  position: static !important;
}
.product-thumb .cart-group {
  display: flex !important;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

/* botão principal: cheio, com texto */
.product-thumb .btn-cart {
  flex: 1 1 auto;
  width: auto !important;
  min-height: 44px;
  height: auto !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #3c040c !important;
  border: 1px solid #3c040c !important;
  border-radius: 4px;
  color: #fff !important;
}
.product-thumb .btn-cart::before { display: none !important; }
.product-thumb .btn-cart .btn-text {
  display: inline !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.product-thumb .btn-cart:hover,
.product-thumb .btn-cart:focus { background: #5c0a17 !important; border-color: #5c0a17 !important; }

/* coração dos favoritos: pequeno, no canto superior esquerdo da foto (os selos NUEVO/HOT estão à direita) */
/* a legenda deixa de ser a referência (era position:relative e o Journal3 punha top:197px): o canto passa a ser
   o do cartão (.product-thumb, position:relative), que é o canto da foto */
.product-thumb .caption { position: static !important; }
.product-thumb .wish-group {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3;
  margin: 0 !important;
}
.product-thumb .btn-wishlist {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.product-thumb .btn-wishlist .btn-text { display: none !important; }

/* WhatsApp: escondido até o JS ter o número (sem número, não aparece um botão morto) */
.brittany-btn-wa { display: none !important; }
.brittany-btn-wa.brittany-wa-pronto {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  background: #25d366;
  border: 1px solid #25d366;
  border-radius: 4px;
  color: #fff !important;
  text-decoration: none !important;
}
.brittany-btn-wa .fa { font-size: 20px; color: #fff; }
.brittany-btn-wa:hover,
.brittany-btn-wa:focus { background: #1ebe57; border-color: #1ebe57; }

/* no cartão, o WhatsApp é só o ícone (o cartão tem ~165 px no telemóvel); com espaço, leva o texto */
.product-thumb .brittany-btn-wa { flex: 0 0 auto; padding: 8px !important; }
.product-thumb .brittany-btn-wa .btn-text { display: none; }
@media (min-width: 1200px) {
  .product-thumb .brittany-btn-wa { padding: 8px 12px !important; }
  .product-thumb .brittany-btn-wa .btn-text { display: inline; font-size: 13px; font-weight: 600; }
}

/* página do produto: o botão fica ao lado do «Agregar a mi pedido», com texto */
.brittany-btn-wa-pagina.brittany-wa-pronto { margin-left: 8px; font-weight: 600; }
@media (max-width: 767px) {
  .brittany-btn-wa-pagina.brittany-wa-pronto { margin: 8px 0 0; width: 100%; }
}

/* produto SOB CONSULTA (preço 0, fase 5): desde o Gate 4 (26/09) PODE juntar-se ao pedido — o «Agregar» volta a
   aparecer (ver brittany-pedidos.css §2). No cartão o WhatsApp fica igual aos outros; a mensagem pede o preço.
   Na página, o link da fase 5 usa as mesmas regras do botão. */
.bb-consultar-preco.brittany-wa-pronto { padding: 11px 22px; margin: 6px 0 10px 0; }
.has-zero-price .product-thumb .brittany-btn-wa .btn-text { text-transform: none !important; letter-spacing: 0 !important; }

/* a etiqueta «Grátis» do Journal3 (módulo de etiquetas 133, condição preço 0) dizia que um produto SOB CONSULTA
   era grátis. Medido a 25/09 com um produto a preço 0 no staging: aparecia no cartão e na página. */
.has-zero-price .product-label-133 { display: none !important; }

/* o balão flutuante de WhatsApp (módulo «WhatsApp Support SG») sai SÓ da página de produto, que já tem o botão
   próprio (Gate 4, 26/09). Medido: o balão é .main-sgwa-wrapper-container; a página tem html.route-product-product. */
html.route-product-product .main-sgwa-wrapper-container { display: none !important; }

/* página do produto: o «Agregar a mi pedido» é o mesmo botão principal — bordô do logótipo, como nos cartões
   (sem isto ficava o azul-marinho do tema ao lado de cartões bordô). Gate 4, 26/09. */
html.route-product-product #button-cart {
  background: #3c040c !important;
  border-color: #3c040c !important;
  color: #fff !important;
}
html.route-product-product #button-cart:hover,
html.route-product-product #button-cart:focus { background: #5c0a17 !important; border-color: #5c0a17 !important; }