/* ==========================================================================
   Turbo Garage — PDP  (v0.2.0)
   CSS da pagina de produto. Carregado por wp_enqueue_style() (arquivo real).
   ========================================================================== */

:root {
  --tg-red:    #E30613;
  --tg-ink:    #0E1116;
  --tg-ink-2:  #3C4552;
  --tg-ink-3:  #6B7684;
  --tg-line:   #E6E9EE;
  --tg-ok:     #0F9E50;
  --tg-radius: 12px;
}

/* --------------------------------------------------------------------------
   STICKY BUYBOX (mobile)
   Problema: depois de rolar a descricao, o cliente nao tem caminho de volta
   ao botao de compra. Todo grande e-commerce resolve com barra fixa.
   Aparece so quando o CTA real sai da tela.
   -------------------------------------------------------------------------- */
.tgp-sticky{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10000001;                 /* acima do WhatsApp (QLWApp usa 9999999) */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--tg-line);
  box-shadow: 0 -6px 20px rgba(14,17,22,.10);
  transform: translateY(115%);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.tgp-sticky.is-on { transform: none; }

.tgp-sticky__info { flex: 1 1 auto; min-width: 0; line-height: 1.2; }

.tgp-sticky__price{
  display: block;
  font-size: 17px; font-weight: 800; color: var(--tg-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tgp-sticky__note{
  display: block;
  font-size: 11px; color: var(--tg-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tgp-sticky__btn{
  flex: 0 0 auto;
  height: 46px; padding: 0 22px;
  border: 0; border-radius: 10px;
  font-size: 15px; font-weight: 800; color: #fff;
  background: #2E6FF2;               /* sobrescrito via JS com a cor real do CTA */
  cursor: pointer;
  transition: filter .15s ease;
}
.tgp-sticky__btn:active { filter: brightness(.93); }

/* So no mobile/tablet: no desktop o buybox ja fica sempre visivel na coluna */
@media (min-width: 1025px){
  .tgp-sticky { display: none !important; }
}

@media (prefers-reduced-motion: reduce){
  .tgp-sticky { transition: none; }
}


/* --------------------------------------------------------------------------
   DESTAQUE DA CONFIGURACAO
   Quando o cliente toca em "Comprar agora" na barra fixa sem ter escolhido a
   variacao, nos o levamos ate as opcoes. Este flash guia o olho pra onde ele
   precisa agir — sem isso, ele chega la e nao sabe o que mudou.
   -------------------------------------------------------------------------- */
.tgp-flash {
  animation: tgp-flash 1.6s ease-out;
  border-radius: var(--tg-radius);
}
@keyframes tgp-flash {
  0%   { box-shadow: 0 0 0 0 rgba(227,6,19,.45); }
  55%  { box-shadow: 0 0 0 8px rgba(227,6,19,0); }
  100% { box-shadow: 0 0 0 0 rgba(227,6,19,0); }
}
@media (prefers-reduced-motion: reduce){
  .tgp-flash { animation: none; box-shadow: 0 0 0 3px rgba(227,6,19,.35); }
}