/* ==========================================================================
   FAVORITAR — coração único do site (rodada 7, 08/09/2026)

   Um botão só, com a mesma marcação, na grade, nos carrosséis, no painel do
   mega-menu, nos relacionados, na busca e na página da peça. Contorno quando
   a peça não está guardada, cheio quando está. Nada de janela: o retorno é o
   próprio coração, o contador do topo e — só quando o cliente tira uma peça —
   um aviso no rodapé da tela com Desfazer.
   ========================================================================== */

/* --- 1. O botão --------------------------------------------------------- */
.bd-coracao{
  --bd-coracao-borda:var(--line);
  position:absolute;top:10px;right:10px;z-index:3;
  width:40px;height:40px;padding:0;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;cursor:pointer;-webkit-appearance:none;appearance:none;
  box-shadow:0 1px 6px rgba(58,26,36,.10);
  transition:border-color .25s var(--ease),color .25s var(--ease),
             opacity .3s var(--ease),transform .25s var(--ease);
}
/* O Storefront (e o CSS gerado pelo Customizer) pintam `button` e `button:hover`
   com cor fixa — `button:hover` tem mais peso que `.bd-coracao`, e era isso que
   deixava o coração cinza embaixo do ponteiro. As três situações vêm juntas,
   com peso de duas classes, para não sobrar estado sem dono. */
.bd-coracao,.bd-coracao:hover,.bd-coracao:focus,.bd-coracao:active,.bd-coracao[disabled]{
  background-color:var(--surface);border:1px solid var(--bd-coracao-borda);color:var(--ink)}
/* O pseudo-elemento estica a área só onde ela já é suficiente; medido por
   hit-test real (elementFromPoint a 21px do centro), no celular o ponto caía
   na FOTO, não no botão — ou seja, os 44px prometidos pelo ::after nunca
   existiram ali. No toque a caixa desenhada passa a ser 44 de verdade. */
.bd-coracao::after{content:"";position:absolute;inset:-2px;border-radius:999px}
@media (max-width:900px){
  .bd-coracao-canto{width:44px;height:44px}
  .bd-coracao-canto .bd-i{width:20px;height:20px}
}
.bd-coracao .bd-i{width:19px;height:19px;fill:currentColor;pointer-events:none}
.bd-coracao .bd-coracao-cheio{display:none}
.bd-coracao:hover,.bd-coracao:focus-visible{--bd-coracao-borda:var(--bordo-accent);color:var(--bordo-accent)}
.bd-coracao.is-on{--bd-coracao-borda:var(--gold-soft);color:var(--bordo-accent)}
.bd-coracao.is-on:hover{--bd-coracao-borda:var(--bordo-accent)}
.bd-coracao.is-on .bd-coracao-cheio{display:block}
.bd-coracao.is-on .bd-coracao-vazio{display:none}
.bd-coracao[disabled]{opacity:.55;cursor:default}

/* pulso curto ao guardar — um momento só, e some */
@keyframes bdFavPulso{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.bd-coracao.bd-coracao-pulsa .bd-i{animation:bdFavPulso .42s cubic-bezier(.22,1,.36,1)}

/* --- 2. Onde ele mora ---------------------------------------------------- */
/* carrossel (.bd-card) e grade/relacionados/busca (li.product) precisam de
   referência de posicionamento também no celular — o tema só criava a delas
   acima de 901px, quando o botão do plugin existia. */
.bd-card .bd-card-top{position:relative}
.woocommerce ul.products li.product{position:relative}
.bd-mf-peca-wrap{position:relative;min-width:0}
.bd-mm-item-wrap{position:relative;display:flex;min-width:0}
.bd-mm-item-wrap>.bd-mm-item{flex:1 1 auto;min-width:0}
.bd-mm-item-wrap>.bd-coracao{top:8px;right:8px;width:36px;height:36px}
.bd-mm-item-wrap>.bd-coracao::after{inset:-4px}
.bd-mm-item-wrap>.bd-coracao .bd-i{width:17px;height:17px}

/* Desktop: aparece quando o card recebe atenção — a peça já guardada fica
   sempre visível, senão o cliente não enxerga o que salvou. Celular: sempre. */
/* O gatilho é a classe do próprio botão (.bd-coracao-canto), e não o caminho até
   ele: com seletor longo, "peça já guardada continua à vista" perdia por peso
   para "esconder", e o cliente não enxergava o que tinha salvo. */
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .bd-coracao-canto{opacity:0}
  .bd-card:hover .bd-coracao-canto,.bd-card:focus-within .bd-coracao-canto,
  .woocommerce ul.products li.product:hover .bd-coracao-canto,
  .woocommerce ul.products li.product:focus-within .bd-coracao-canto,
  .bd-mm-item-wrap:hover>.bd-coracao-canto,.bd-mm-item-wrap:focus-within>.bd-coracao-canto,
  .bd-mf-peca-wrap:hover>.bd-coracao-canto,.bd-mf-peca-wrap:focus-within>.bd-coracao-canto,
  .bd-coracao-canto:focus-visible,.bd-coracao-canto.is-on{opacity:1}
}

/* --- 3. Na página da peça: mesmo botão, com o rótulo por extenso ---------- */
.bd-coracao-inline,.bd-coracao-inline:hover,.bd-coracao-inline:focus,.bd-coracao-inline:active{
  position:static;width:auto;height:42px;padding:0 22px;gap:9px;
  box-shadow:none;flex:0 0 auto;
  font-family:var(--body);font-size:.8rem;letter-spacing:.02em;
}
/* 10/09/2026: a variante inline trocava `position` para relative e NAO zerava o
   `top`, herdando os 10px que a variante do card usa para flutuar no canto. Era
   isso que deixava o botao 10px abaixo do "Adicionar a sacola", com a mesma
   altura nos dois. Causa na origem, nao remendo na pagina da peca. */
.bd-coracao-inline{position:relative;top:auto;right:auto;color:var(--ink-soft)}
/* a caixa fica em 42, como o "Adicionar à sacola" ao lado; o alvo de toque
   chega a 44 pelo pseudo-elemento, sem mexer no desenho */
.bd-coracao-inline::after{content:"";position:absolute;inset:-1px;border-radius:999px}
.bd-coracao-inline:hover{color:var(--bordo-accent)}
.bd-coracao-inline .bd-i{width:18px;height:18px}
.bd-coracao-inline.is-on{color:var(--bordo-accent)}
.single-product form.cart .bd-coracao-inline{align-self:center}
@media (max-width:900px){
  .single-product .bd-coracao-inline,.single-product .bd-coracao-inline:hover,
  .single-product .bd-coracao-inline:focus,.single-product .bd-coracao-inline:active{width:100%;height:44px;margin-top:2px}
}

/* --- 4. Contador do topo, no mesmo tratamento da sacola ------------------- */
.bd-fav-topo .bd-i-heart-fill{display:none}
.bd-fav-topo.is-on .bd-i-heart-fill{display:block}
.bd-fav-topo.is-on .bd-i-heart{display:none}
.bd-fav-topo.is-on{color:var(--bordo-accent)}
/* 9,28px sobre o traço fino do coração era o único número do site abaixo de
   10px, e é justamente o retorno principal do favoritar no desktop. Sobe
   para 11px numa bolha de 18 e sai de cima do ícone. */
.bd-ico.bd-fav-topo .bd-fav-n{
  position:absolute;top:0;right:-3px;width:18px;height:18px;
  background:var(--bordo);color:#F4EDE2;border-radius:50%;
  font-size:11px;font-weight:600;letter-spacing:0;line-height:1;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.bd-fav-n.esta-vazia{display:none!important}
.bd-fav-n.pulsa{animation:bdPulsa .5s cubic-bezier(.22,1,.36,1)}

/* menu do celular: o coração do cabeçalho não cabe ali, então o número
   acompanha o item "Favoritos" da lista */
#bd-menu .bd-menu-fav{display:flex;align-items:center;gap:10px}
#bd-menu .bd-menu-fav .bd-fav-n{
  min-width:22px;height:22px;padding:0 7px;border-radius:999px;
  background:var(--bordo);color:#F4EDE2;font-size:.72rem;font-weight:600;letter-spacing:0;
  display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}

/* --- 5. Aviso no rodapé da tela (nunca janela) ---------------------------- */
.bd-fav-aviso{
  position:fixed;left:18px;bottom:18px;z-index:1200;max-width:min(420px,calc(100vw - 36px));
  display:flex;align-items:center;gap:16px;
  padding:11px 12px 11px 18px;background:var(--bordo);color:var(--on-bordo);
  border:1px solid rgba(201,163,76,.34);
  box-shadow:0 10px 30px rgba(30,10,16,.30);
  font-family:var(--body);font-size:.83rem;line-height:1.35;
  opacity:0;transform:translateY(10px);
  transition:opacity .32s cubic-bezier(.16,1,.3,1),transform .32s cubic-bezier(.16,1,.3,1);
}
.bd-fav-aviso.is-on{opacity:1;transform:none}
.bd-fav-aviso-txt{flex:1 1 auto}
/* pílula, como todo botão da casa (34, a menor da régua); o alvo de toque
   chega a 44 pelo pseudo-elemento */
.bd-fav-aviso-acao,.bd-fav-aviso-acao:hover,.bd-fav-aviso-acao:focus,.bd-fav-aviso-acao:active{
  position:relative;flex:0 0 auto;height:34px;padding:0 16px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid rgba(201,163,76,.5);background-color:transparent;
  font-family:var(--body);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-on-dark)}
.bd-fav-aviso-acao::after{content:"";position:absolute;inset:-5px;border-radius:999px}
.bd-fav-aviso-acao:hover{border-color:var(--gold-on-dark);color:#E4C782}
.bd-fav-aviso-acao:focus-visible{outline:2px solid var(--gold-on-dark);outline-offset:3px}
.bd-fav-aviso.bd-fav-aviso-erro{background:var(--bordo-deep)}
@media (max-width:900px){
  /* No celular o aviso ficava lado a lado com o WhatsApp flutuante, os dois
     na mesma altura, disputando o canto — e sobravam 15px entre eles. Sobe
     para cima do botão e ocupa a linha inteira: uma coisa de cada vez. */
  .bd-fav-aviso{left:14px;right:14px;bottom:82px;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .bd-fav-aviso{transition:opacity .01ms}
  .bd-coracao.bd-coracao-pulsa .bd-i,.bd-fav-n.pulsa{animation:none}
}

/* --- 6. A janela que ainda é do plugin -----------------------------------
   O coração nunca abre janela (item 27). Mas "Levar tudo para a sacola", na
   página de Favoritos, ainda responde pela janela do plugin — e ela vinha
   com a caixa branca, o texto centrado, um ícone de outra família e o botão
   cinza do Storefront. Como o conteúdo dela agora está em português, vale
   ela estar também na régua da casa: caixa reta em marfim, texto à esquerda
   e um só botão, em pílula bordô.
   ------------------------------------------------------------------------ */
.tinv-modal .tinv-overlay{background:rgba(46,16,25,.55);opacity:1}
.tinv-modal .tinv-modal-inner{
  background:var(--surface);border:1px solid var(--line);border-radius:0;
  box-shadow:0 18px 50px rgba(30,10,16,.28);
  padding:30px 32px;max-width:480px;text-align:left}
.tinv-modal .tinv-modal-inner>i,.tinv-modal .tinv-modal-inner i[class*="icon_big"],
.tinv-modal .tinv-modal-inner i[class*="ftinvwl"]{display:none!important}
.tinv-modal .tinv-txt{
  font-family:var(--body);font-size:.9rem;line-height:1.6;color:var(--ink);text-align:left;margin:0}
.tinv-modal .tinvwl-buttons-group{margin-top:24px;text-align:left}
.tinv-modal .tinvwl-buttons-group .button,
.tinv-modal .tinvwl-buttons-group .button:hover,
.tinv-modal .tinvwl-buttons-group .button:focus{
  height:42px;padding:0 26px;border-radius:999px;border:1px solid var(--bordo);
  background-color:var(--bordo);color:var(--on-bordo);
  font-family:var(--body);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:0;float:none}
.tinv-modal .tinvwl-buttons-group .button:hover{background-color:var(--bordo-accent);border-color:var(--bordo-accent)}
.tinv-modal .tinvwl-buttons-group .button i{display:none}