/*
 * Histórico de Lances do leilão (Partials/pdp.auction.details). O bloco roxo é do styles.css; aqui ficam o aviso do sigilo
 * dos nomes, que foi para dentro do bloco, no fim, menor (usuário, 19/10/2026): 14px, branco sobre o roxo, alinhado com o
 * título e os nomes (32px à esquerda, como o h2 e a tabela do styles.css), e o bloco no fluxo da página no computador.
 */
.jv-leilao-lances__aviso {
  margin: 0;
  padding: var(--jv-space-3) var(--jv-space-4) 0 var(--jv-space-8);
  color: rgb(255 255 255 / 70%); /* discreto: o branco chamava mais atenção que a tabela (usuário, 22/10/2026) */
  font-size: var(--jv-text-xs);
  line-height: var(--jv-leading-normal);
}

/* O lance que está vencendo (linha lilás do styles.css): texto preto para dar contraste e o troféu do sprite antes do
   nome; a data vem curta (DD/MM/AA HH:mm) pelo Scripts/jv/leilao-lances.js (usuário, 22/10/2026). */
.history-bids tr.winner td {
  color: var(--jv-color-text) !important;
}

/* Histórico de Lances (usuário, 23/10/2026): o título em Sora (Figma 003-PRODUCT: Sora Bold de 22px), alinhado à coluna
   "Participante", e não ao troféu; o troféu maior (24px), com 8px de recuo; e o mesmo espaço entre as colunas
   Participante, UF, Data e Valor. A sobra da largura é repartida igualmente pelo Scripts/jv/leilao-lances.js, que mede
   cada coluna; aqui as colunas ficam sem recuo próprio, numa linha só e alinhadas à esquerda, para o espaço entre elas
   ser só a sobra repartida. O aviso do sigilo acompanha o título. --jv-leilao-lances-nome é onde começa o nome: 8px +
   o troféu + 8px. */
.history-bids {
  --jv-leilao-lances-recuo: var(--jv-space-2);
  --jv-leilao-lances-trofeu: 1.5rem;
  --jv-leilao-lances-nome: calc(var(--jv-leilao-lances-recuo) + var(--jv-leilao-lances-trofeu) + var(--jv-leilao-lances-recuo));
}

.jv-leilao-lances__trofeu {
  display: block;
  width: var(--jv-leilao-lances-trofeu);
  height: var(--jv-leilao-lances-trofeu);
}

body.product-auction-detail .history-bids h2 {
  padding-left: var(--jv-leilao-lances-nome);
  font-family: var(--jv-font-sans);
  font-size: var(--jv-text-xl);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-tight);
}

.jv-leilao-lances__aviso {
  padding-left: var(--jv-leilao-lances-nome);
  padding-right: var(--jv-space-5);
}

/* As células sem recuo próprio, numa linha só e alinhadas à esquerda. Os seletores repetem os do styles.css (com thead/tr
   e a classe da coluna) para ganhar dele pela ordem. */
body.product-auction-detail .wd-product-auction-bid-list table thead th,
body.product-auction-detail .wd-product-auction-bid-list table tr td,
body.product-auction-detail .wd-product-auction-bid-list table thead th.customer,
body.product-auction-detail .wd-product-auction-bid-list table tr td.customer,
body.product-auction-detail .wd-product-auction-bid-list table thead th.date,
body.product-auction-detail .wd-product-auction-bid-list table tr td.date {
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  white-space: nowrap;
  text-align: left;
}

body.product-auction-detail .wd-product-auction-bid-list table thead th.trofeu,
body.product-auction-detail .wd-product-auction-bid-list table tr td.trofeu {
  width: var(--jv-leilao-lances-nome);
  padding-left: var(--jv-leilao-lances-recuo);
  padding-right: var(--jv-leilao-lances-recuo);
}

/* O Valor alinhado à esquerda, como as outras colunas (usuário, 27/10/2026), com o recuo da borda da caixa à direita. */
body.product-auction-detail .wd-product-auction-bid-list table thead th.value,
body.product-auction-detail .wd-product-auction-bid-list table tr td.value {
  padding-right: var(--jv-space-5);
  text-align: left;
}

/* Tela estreita (o script põe a classe quando as colunas não cabem com folga): a data quebra em 2 linhas, o dia em cima
   e a hora embaixo, no lugar de a tabela passar da caixa roxa (como passava no celular). */
body.product-auction-detail .wd-product-auction-bid-list table.jv-leilao-lances--estreita thead th.date,
body.product-auction-detail .wd-product-auction-bid-list table.jv-leilao-lances--estreita tr td.date {
  white-space: normal;
}

/* Ainda sem folga (celular): o valor também quebra em 2 linhas, o "12x R$" em cima, que não se separa (espaço sem quebra,
   do Scripts/jv/leilao-lances.js), e o número embaixo (usuário, 27/10/2026). */
body.product-auction-detail .wd-product-auction-bid-list table.jv-leilao-lances--estreita-valor thead th.value,
body.product-auction-detail .wd-product-auction-bid-list table.jv-leilao-lances--estreita-valor tr td.value {
  white-space: normal;
}

/* Celular: o troféu de 20px com 6px de cada lado, o nome em 16px (era 18) e o Valor a 8px da borda, para as colunas
   caberem na caixa roxa com espaço entre elas. */
@media (max-width: 767px) {
  .history-bids {
    --jv-leilao-lances-recuo: 6px;
    --jv-leilao-lances-trofeu: 1.25rem;
  }

  body.product-auction-detail .wd-product-auction-bid-list table thead th.customer,
  body.product-auction-detail .wd-product-auction-bid-list table tr td.customer {
    font-size: var(--jv-text-md);
  }

  body.product-auction-detail .wd-product-auction-bid-list table thead th.value,
  body.product-auction-detail .wd-product-auction-bid-list table tr td.value {
    padding-right: var(--jv-space-2);
  }
}

/* Computador: o bloco ficava solto da página (lg:absolute no template, com 8rem reservados em cima, do styles.css) e,
   com as abas do redesenho logo depois, passava por cima delas e das Facilidades (visto em 19/10/2026). Agora ocupa o
   próprio espaço e empurra o que vem embaixo, com o mesmo respiro do celular. */
@media (min-width: 1024px) {
  body.product-auction-detail .wp-history-bids {
    padding-block-start: var(--jv-space-4);
  }

  body.product-auction-detail .history-bids {
    position: static;
  }
}

/* Computador: a faixa branca das abas sobe por trás do Histórico de Lances até a metade dele, com corte seco, sem
   degradê (usuário, 19/10/2026). O cinza de cima é o fundo da página; a altura da faixa vem do Scripts/jv/leilao-lances.js. */
@media (min-width: 1024px) {
  body.product-auction-detail #product-detail .wp-pdp {
    background-image: linear-gradient(to bottom, transparent calc(100% - var(--jv-leilao-faixa, 0px)), var(--jv-color-surface) 0);
  }
}