/*
 * Gatilhos da coluna de compra (Partials/jv/pdp-gatilhos.template): linha do cashback (embaixo do preço) e linha de
 * estoque (embaixo do Comprar). Figma: "Ganhe até R$888,88 de cashback" (1421:9018) e a linha embaixo do Comprar
 * (1468:10135): texto cinza e o número em roxo, negrito. 16px, texto corrido (regra de 15/10).
 * Sem display nesta classe: o [hidden] do JS esconde a linha enquanto não há dado.
 */

.jv-pdp-trigger {
  margin: 0;
  color: var(--jv-color-text-muted);
  font-size: var(--jv-size-body);
  line-height: var(--jv-leading-tight);
}

/* Linha embaixo do Comprar: centralizada no celular, embaixo do botão de largura toda (usuário, 16/10/2026). */
@media (max-width: 1023px) {
  .jv-pdp-trigger--linha {
    text-align: center;
  }
}

/* Ícone na frente da frase (usuário, 19/10/2026; os das tags do Figma, na cor do texto, como nas tags), dentro da linha
   do texto: no celular, se a frase quebra, ele vai junto com a primeira linha, centralizado. O display é explícito porque
   um CSS do painel deixa todo svg em bloco. */
.jv-pdp-trigger__icone {
  display: inline-block;
  margin-inline-end: var(--jv-space-2);
  vertical-align: middle;
}

/* Logo embaixo do preço, como no Figma: 8px, e não os 16 da coluna. */
.jv-pdp-trigger--cashback {
  margin-block-start: calc(-1 * var(--jv-space-2));
}

.jv-pdp-trigger strong {
  color: var(--jv-color-brand);
  font-weight: var(--jv-weight-bold);
}

/* "Ver condições" do frete grátis: texto escuro com sublinhado verde, como o "veja aqui" do cartão de aviso (o verde não
   é cor de texto). Abre um cartão como o do cashback (usuário, 19/10/2026). */
.jv-pdp-trigger__link {
  color: var(--jv-color-text);
  font-weight: var(--jv-weight-bold);
  text-decoration: underline;
  text-decoration-color: var(--jv-color-action);
  text-decoration-thickness: var(--jv-border-thick);
  text-underline-offset: 0.2em;
}

.jv-pdp-trigger__link:hover {
  color: var(--jv-color-text);
  text-decoration-color: var(--jv-color-accent);
}

/* O cartão do "Ver condições" fica embaixo da linha toda (a linha é a referência), por cima do que vem depois, com o
   vidro e a seta do cartão do cashback; a seta segue o "Ver condições" (o pdp-gatilhos.js mede ao abrir). */
.jv-pdp-trigger--linha {
  position: relative;
  z-index: var(--jv-z-raised);
}

.jv-pdp-condicoes {
  display: inline-block;
}

.jv-pdp-condicoes__toggle {
  display: inline;
  list-style: none;
  cursor: pointer;
}

.jv-pdp-condicoes__toggle::-webkit-details-marker {
  display: none;
}

.jv-pdp-condicoes__card {
  max-inline-size: 100%;
  text-align: start;
}

/* "Centro-Oeste" e o valor não quebram no meio. */
.jv-pdp-condicoes__inteiro {
  white-space: nowrap;
}

/* Mais específico que o .jv-pdp-cashback__card::before, que vem depois. */
.jv-pdp-condicoes .jv-pdp-condicoes__card::before {
  inset-inline-start: calc(var(--jv-pdp-condicoes-seta, var(--jv-space-6)) - var(--jv-space-2) / 2);
}

/* No celular, a linha é centralizada: o cartão também. */
@media (max-width: 1023px) {
  .jv-pdp-condicoes .jv-pdp-condicoes__card {
    inset-inline: 0;
    margin-inline: auto;
  }
}

/* Cashback (usuário, 16/10/2026): frase fixa com o "i" de informação, e o texto todo abre um cartão de vidro com
   "Cashback para sua próxima compra.", com o vidro e o contorno do cartão do Compartilhar (pdp-share.css; usuário,
   16/10/2026: "faltou aquela transparência"). É um <details>: abre sem JavaScript, e o
   pdp-gatilhos.js fecha ao clicar fora e no Esc. O "i" é o AlertInfo do sprite, no azul informativo (LINK_INFO do
   Figma, 1421:9013). O cartão fica por cima do que vem embaixo (aro, Comprar), sem empurrar a coluna. */
.jv-pdp-cashback {
  position: relative;
  z-index: var(--jv-z-raised);
}

.jv-pdp-cashback[hidden] {
  display: none;
}

.jv-pdp-cashback__toggle {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--jv-space-1);
  list-style: none;
  cursor: pointer;
}

/* Sem o triângulo do navegador no <summary>. */
.jv-pdp-cashback__toggle::-webkit-details-marker {
  display: none;
}

/* O AlertInfo do sprite é só traço, sem cor: a cor e a espessura vêm daqui, como no aviso do aro (pdp-aro.css). */
.jv-pdp-cashback__icon {
  flex: none;
  color: var(--jv-color-info);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.jv-pdp-cashback__card {
  position: absolute;
  inset-block-start: calc(100% + var(--jv-space-3));
  inset-inline-start: 0;
  inline-size: max-content;
  max-inline-size: 100%;
  padding: var(--jv-space-3) var(--jv-space-4);
  border: var(--jv-border-thin) solid var(--jv-color-accent);
  border-radius: var(--jv-radius-md);
  background: var(--jv-color-glass);
  -webkit-backdrop-filter: blur(var(--jv-blur-glass));
  backdrop-filter: blur(var(--jv-blur-glass));
  box-shadow: var(--jv-shadow-popover);
  color: var(--jv-color-text);
  font-size: var(--jv-size-body);
  line-height: var(--jv-leading-normal);
  animation: jv-pdp-cashback-abrir var(--jv-duration-fast) var(--jv-ease);
}

/* Setinha para a frase, como a do Compartilhar: só a metade de fora do cartão. */
.jv-pdp-cashback__card::before {
  content: "";
  position: absolute;
  inset-block-start: calc(-1 * var(--jv-space-2) / 2 - var(--jv-border-thin));
  inset-inline-start: var(--jv-space-6);
  inline-size: var(--jv-space-2);
  block-size: var(--jv-space-2);
  border-block-start: var(--jv-border-thin) solid var(--jv-color-accent);
  border-inline-start: var(--jv-border-thin) solid var(--jv-color-accent);
  background: var(--jv-color-glass);
  -webkit-backdrop-filter: blur(var(--jv-blur-glass));
  backdrop-filter: blur(var(--jv-blur-glass));
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform: rotate(45deg);
}

@keyframes jv-pdp-cashback-abrir {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--jv-space-1)));
  }
}

.jv-pdp-cashback__card p {
  margin: 0;
}

/* Variação esgotada: o cartão do Avise-me toma o lugar, e as linhas saem junto com o preço. */
body.unavailable .jv-pdp-trigger {
  display: none;
}