/*
 * Leilão: cartão, bloco do lance, contador, janela de login e PLP/PDP, pelo Figma (cartão "LEILÃO_PRODUCT" 1410:8319,
 * PLP "004-CATEGORY" 1600:9280, PDP "003-PRODUCT" 1657:15783, contador "COUNTDOWN BANNER-LEILÃO" 1659:17071 e
 * "LOGIN-POP-UP" 1621:14870; usuário, 22/10/2026: "questão de layout é no Figma"). As funções (sugestão, lance
 * mínimo, animação do botão, login em janela) vêm do protótipo do usuário no CodePen. Cores e tamanhos presos aos
 * tokens; o lilás do Figma no nome e no valor da frase virou o roxo da marca (lilás como texto não passa no contraste).
 * Modelos: product.auction.line (cartão, na raiz do tema), Partials/jv/leilao-lance (bloco), Partials/jv/leilao-contador,
 * Pages/grid.auctions (PLP) e Partials/pdp.auction.details (PDP). A janela de login é montada pelo Scripts/jv/leilao-lance.js.
 * O CSS antigo (styles.css, compilado pelo painel) deita o cartão na grade do /leilao (flex-direction: row, margem de
 * 3rem, 1 coluna com !important, .bid 48px à direita) e, no lote, pinta e aumenta todo <strong> com seletores com id:
 * as regras da seção 1 repetem o peso dele e as do lote usam !important onde ele passa por cima.
 * Diferenças do Figma por regra do site: rótulo de botão com 14px (jv-text-label), textos de 16 e 14px.
 */

/* 1. PLP do leilão: sem filtros, grade de cartões em pé: 4 por fileira no computador, numa grade mais larga que o
   container do site (usuário, 23/10/2026: "pode aumentar e deixar 4 por linha"; até 1.600px, como a PLP do Figma em
   1920: 4 × 384px), 3 entre 1024 e 1279px, 2 no tablet e 1 no celular. */
body.grid-products.ProductAuctionRoute #grid .wd-browsing-auction-list .list,
body.grid-empty.ProductAuctionRoute #grid .wd-browsing-auction-list .list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)) !important;
  gap: var(--jv-space-8) var(--jv-space-6);
  overflow: visible;
}

@media (min-width: 1024px) {
  body.ProductAuctionRoute #grid.jv-leilao-plp {
    width: 100%;
    max-width: 100rem; /* o container do site tem 1.280px; a grade do leilão pode ir a 1.600 */
  }

  body.grid-products.ProductAuctionRoute #grid .wd-browsing-auction-list .list,
  body.grid-empty.ProductAuctionRoute #grid .wd-browsing-auction-list .list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1280px) {
  body.grid-products.ProductAuctionRoute #grid .wd-browsing-auction-list .list,
  body.grid-empty.ProductAuctionRoute #grid .wd-browsing-auction-list .list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

body.grid-products.ProductAuctionRoute #grid .wd-browsing-auction-list .list > li,
body.grid-empty.ProductAuctionRoute #grid .wd-browsing-auction-list .list > li {
  width: auto;
  height: auto;
  margin: 0;
}

body.grid-products.ProductAuctionRoute #grid .wd-browsing-auction-list .list .auction-line.jv-leilao-cartao,
body.grid-empty.ProductAuctionRoute #grid .wd-browsing-auction-list .list .auction-line.jv-leilao-cartao {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  grid-template-areas: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

body.grid-products.ProductAuctionRoute #grid .wd-browsing-auction-list .list .auction-line.jv-leilao-cartao .link-product,
body.grid-empty.ProductAuctionRoute #grid .wd-browsing-auction-list .list .auction-line.jv-leilao-cartao .link-product {
  width: auto;
  margin: 0;
}

body.grid-products.ProductAuctionRoute #grid .wd-browsing-auction-list .list .auction-line.jv-leilao-cartao .bid,
body.grid-empty.ProductAuctionRoute #grid .wd-browsing-auction-list .list .auction-line.jv-leilao-cartao .bid {
  position: static;
  top: auto;
  left: auto; /* o CSS antigo empurra o .bid 48px para a direita no computador */
  flex: none;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}

body.ProductAuctionRoute #grid.jv-leilao-plp .products {
  width: 100% !important; /* o CSS antigo (body.show-facets #grid .main .products) deixa a lista com 75%, pensando nos filtros */
  max-width: none !important;
  flex: none !important;
}

@media (max-width: 1023px) {
  body.ProductAuctionRoute #grid.jv-leilao-plp {
    padding-bottom: 6.5rem; /* espaço para o contador preso no rodapé */
  }
}

/* 2. Cartão (Figma 1410:8319; exemplo do usuário de 23/10/2026): foto limpa, nome em 2 linhas, o bloco do lance e,
   embaixo do botão, a caixa do gatilho. A frase saiu de cima da foto (cobria a joia, principalmente nos colares). */
.jv-leilao-cartao {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.jv-leilao-cartao__foto {
  display: block;
}

.jv-leilao-cartao__foto figure {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--jv-radius-md);
  background: var(--jv-color-surface);
}

.jv-leilao-cartao__foto figure > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Segunda foto ao passar o mouse (usuário, 23/10/2026: "igual dos produtos normais"): o leilao-lance.js põe a 2ª foto do
   lote por cima da 1ª, e ela aparece com o mouse em cima, em 0,2 s, como nos produtos normais (styles.css: .second). */
.jv-leilao-cartao__foto-2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .jv-leilao-cartao__foto:hover .jv-leilao-cartao__foto-2.is-pronta {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jv-leilao-cartao__foto-2 {
    transition: none;
  }
}

/* A frase que o script antigo escreve (.bid .message p) fica escondida; o leilao-lance.js a copia para a caixa. */
.jv-leilao-cartao__frase-fonte {
  display: none !important;
}

.jv-leilao-cartao__nome {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: calc(2 * 1.25em);
  margin: var(--jv-space-3) 0 0;
  overflow: hidden;
  font-size: var(--jv-size-body);
  font-weight: var(--jv-weight-regular);
  line-height: 1.25;
  text-align: left;
  color: var(--jv-color-text);
}

.jv-leilao-cartao__nome a {
  color: inherit;
  text-decoration: none;
}

/* Leilão encerrado: a faixa de conquista (usuário, 23/10/2026: "a mensagem é mais para o cliente que arrematou ver... se
   sentir o maioral"), no lugar do selo vermelho "Encerrado": fundo lilás claro como a caixa do gatilho, o troféu animado
   (Lottie/leilao-trofeu.json pelo Scripts/jv/lottie.js, toca 2 vezes) e "LEILÃO ENCERRADO" + "Fulana venceu!" em roxo. */
.jv-leilao-vencedor {
  display: flex;
  align-items: center;
  gap: var(--jv-space-3);
  margin-top: var(--jv-space-3);
  padding: var(--jv-space-3);
  border-radius: var(--jv-radius-md);
  background: color-mix(in srgb, var(--jv-palette-lilac) 16%, var(--jv-color-surface));
  text-align: left;
}

/* O desenho do troféu ocupa só o miolo do quadro do Lottie (1920 × 1920, com margens largas e os confetes em volta):
   o elemento é 1,7 vez a área de 56px que ele ocupa na faixa, e as margens negativas centram o troféu nessa área
   (o centro do desenho fica a 52% / 59% do quadro). A imagem parada tem o mesmo quadro, então casa com a animação. */
.jv-leilao-vencedor__trofeu {
  position: relative;
  flex: none;
  display: block;
  width: 5.9375rem;
  height: 5.9375rem;
  margin: -1.75rem -1.1rem -0.6875rem -1.3375rem;
  pointer-events: none;
}

.jv-leilao-vencedor__trofeu img {
  display: block;
  width: 100%;
  height: 100%;
}

.jv-leilao-vencedor__texto {
  flex: 1;
  min-width: 0;
}

.jv-leilao-vencedor__rotulo {
  display: block;
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jv-color-brand);
}

.jv-leilao-vencedor__frase {
  margin: var(--jv-space-1) 0 0;
  font-size: var(--jv-text-lg);
  font-weight: var(--jv-weight-bold);
  line-height: 1.2;
  color: var(--jv-color-brand);
  overflow-wrap: anywhere;
}

.jv-leilao-vencedor__frase[hidden] {
  display: none;
}

/* No cartão, a frase em 14px (usuário, 24/10/2026: em 18px ficava "muito grande" na vitrine da home, cujos cartões têm
   230px, com 3 linhas; medido em 24/10: 14px negrito fica em 1 a 3 linhas, e 16px ainda em 3). "Leilão encerrado" fica
   como está. Na PDP do lote a faixa é larga e a frase continua em 18px. */
.jv-leilao-cartao .jv-leilao-vencedor__frase {
  font-size: var(--jv-size-label);
}

/* Só para quem venceu, logada (COPY e usuário, 23/10/2026): "Conclua o pagamento para garantir a joia." Texto, não link:
   o link de pagamento da Linx (BasketAuctionRecovery) leva um Hash que só vai no e-mail de vencedora. */
.jv-leilao-vencedor__pagar {
  display: block;
  margin: var(--jv-space-1) 0 0;
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-regular);
  line-height: 1.35;
  color: var(--jv-color-text);
}

/* Na PDP do leilão a faixa fica no lugar da barra vermelha, dentro da coluna de compra (o gap do bloco já separa). */
.jv-leilao-lote .jv-leilao-vencedor {
  margin-top: 0;
}

.jv-leilao-vencedor__pagar[hidden] {
  display: none;
}

/* Selo do martelo no canto da foto: a imagem parada e, por cima, a animação Lottie (Scripts/jv/lottie.js); o usuário
   quis o martelinho de volta em cima da foto (23/10/2026). */
.jv-leilao-cartao__martelo {
  position: absolute;
  top: 10px;
  left: 10px;
  display: block;
  width: 54px;
  height: 54px;
}

.jv-leilao-cartao__martelo img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Caixa do gatilho (cartão e PDP; usuário, 23/10/2026): só um complemento, sem chamar atenção: fundo lilás claro
   (HOVER da paleta diluída em branco), o ícone da mão com a plaquinha (Images/svg/Lance-Leilao.svg, em roxo para ter
   contraste no lilás) e a frase inteira em 14px, corrida, sem quebra depois da abertura. Vazia, o script a esconde. */
.jv-leilao-gatilho {
  display: flex;
  align-items: center;
  gap: var(--jv-space-2);
  margin-top: var(--jv-space-3);
  padding: var(--jv-space-2) var(--jv-space-3);
  border-radius: var(--jv-radius-md);
  background: color-mix(in srgb, var(--jv-palette-lilac) 16%, var(--jv-color-surface));
  text-align: left;
}

.jv-leilao-gatilho[hidden] {
  display: none;
}

.jv-leilao-gatilho::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1.625rem;
  background: var(--jv-color-brand);
  -webkit-mask: url("../../../Images/svg/Lance-Leilao.svg") center / contain no-repeat;
  mask: url("../../../Images/svg/Lance-Leilao.svg") center / contain no-repeat;
}

.jv-leilao-gatilho__texto {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--jv-size-label);
  line-height: 1.35;
  color: var(--jv-color-text);
}

.jv-leilao-gatilho__texto[hidden] {
  display: none;
}

/* O texto da frase vem num <span> só (jv-leilao-frase__texto), como o script o monta; a abertura ("A disputa está
   acirrada!") fica em negrito roxo, em linha. Os !important passam por cima do CSS antigo da PDP, que aumenta todo
   <strong> dentro de .bid. */
.jv-leilao-frase__texto {
  display: inline;
}

.jv-leilao-gatilho__texto strong,
.jv-leilao-gatilho__texto span {
  font-size: inherit !important;
  line-height: inherit !important;
  color: var(--jv-color-brand) !important;
}

.jv-leilao-gatilho__texto strong {
  font-weight: var(--jv-weight-bold);
}

.jv-leilao-gatilho__texto .name,
.jv-leilao-gatilho__texto .lance {
  font-weight: var(--jv-weight-bold);
  white-space: nowrap;
}

/* 3. Bloco do lance ("Dê seu lance", o campo com o "12x" num selo, a mensagem e o botão), à esquerda, como no exemplo
   do usuário (23/10/2026). */
.jv-lance {
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* No cartão, "Dê seu lance", o selo "12x" e o valor ficam centrados (usuário, 23/10/2026); na PDP, à esquerda. */
.jv-lance:not(.jv-lance--lote) {
  text-align: center;
}

.jv-lance:not(.jv-lance--lote) .jv-lance__campo {
  justify-content: center;
}

.jv-lance:not(.jv-lance--lote) .jv-lance__input {
  flex: 0 1 7em;
  text-align: center !important;
}

.jv-lance__titulo {
  margin: var(--jv-space-3) 0 var(--jv-space-2);
  font-family: var(--jv-font-sans);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  letter-spacing: 0.08em;
  line-height: var(--jv-leading-normal);
  text-transform: uppercase;
  color: var(--jv-color-text-muted);
}

.jv-lance__campo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--jv-space-3);
  margin-bottom: var(--jv-space-3);
  padding-bottom: var(--jv-space-1);
  border-bottom: var(--jv-border-thin) solid var(--jv-color-border);
  cursor: text;
  transition: border-color var(--jv-duration-fast) var(--jv-ease);
}

.jv-lance__campo:focus-within {
  border-color: var(--jv-color-brand);
}

/* O "12x" num selo lilás claro com o texto roxo (exemplo do usuário). */
.jv-lance__parcelas {
  flex: none;
  padding: var(--jv-space-1) var(--jv-space-3);
  border-radius: var(--jv-radius-md);
  background: color-mix(in srgb, var(--jv-palette-lilac) 16%, var(--jv-color-surface));
  font-family: var(--jv-font-sans);
  font-size: var(--jv-size-body);
  font-weight: var(--jv-weight-bold);
  line-height: 1.5;
  color: var(--jv-color-brand);
}

/* O CSS antigo desenha caixa, borda e altura em todo input da grade e do lote (seletores com #grid e .details):
   os !important devolvem o campo aberto do Figma, só com a linha de baixo. O valor segue como está (exemplo em cinza). */
.jv-lance__input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-family: var(--jv-font-sans);
  font-size: 1.625rem !important; /* 26 (Figma) */
  font-weight: var(--jv-weight-regular);
  line-height: 1.15;
  text-align: left !important;
  color: var(--jv-color-text) !important;
  -moz-appearance: textfield;
}

.jv-lance__input:focus,
.jv-lance__input:focus-visible {
  outline: none !important; /* o foco aparece na linha do campo (jv-lance__campo:focus-within) */
  box-shadow: none !important;
}

.jv-lance__input::placeholder {
  color: var(--jv-palette-gray-400);
  opacity: 1;
}

/* A mensagem usa a caixa de erro padrão do site (erro.css, seção 1b: respiro, fundo do tamanho do texto, 14px e o "i" de
   informação; usuário, 26/10/2026). Aqui ficam as cores por tipo e o sucesso em verde, sem o "i". */
.jv-lance__mensagem {
  display: none;
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-regular);
  line-height: 1.35;
  color: var(--jv-color-info);
}

.jv-lance__mensagem:not(:empty) {
  margin: 0 0 var(--jv-space-3);
}

/* A caixa fica centrada no bloco, no cartão e também na PDP do lote (usuário, 26/10/2026). */
.jv-lance .jv-lance__mensagem {
  align-self: center;
}

/* No lote, o CSS antigo aumenta e pinta de roxo todo <strong> e <span> dentro de #product-detail .details (seletor
   com id): a mensagem herda tamanho e cor daqui, com !important para passar por cima. */
.jv-lance__mensagem strong,
.jv-lance__mensagem u,
.jv-lance__mensagem span,
.jv-lance__mensagem button {
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

.jv-lance__mensagem strong {
  font-weight: var(--jv-weight-bold);
}

.jv-lance__mensagem--aviso {
  color: var(--jv-color-info);
}

.jv-lance__mensagem--sucesso {
  column-gap: 0;
  border-color: var(--jv-color-success) !important;
  background-color: var(--jv-color-success-bg) !important;
  color: var(--jv-color-success-text);
}

.jv-lance__mensagem--sucesso::after {
  display: none;
}

/* Dentro da caixa padrão, o botão da sugestão tem o tamanho do texto, sem respiro próprio e alinhado à esquerda: o vão
   entre o "i" e o texto fica o mesmo de todas as mensagens (usuário, 26/10/2026: "precisa ter um padrão"). */
.jv-lance__sugestao {
  width: auto;
  padding: 0;
  text-align: left;
  border: 0;
  border-radius: var(--jv-radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(185 148 254 / 28%);
}

.jv-lance__sugestao u {
  font-weight: var(--jv-weight-bold);
  white-space: nowrap;
}

@media (hover: hover) {
  .jv-lance__sugestao:hover {
    opacity: 0.85;
  }
}

.jv-lance__mensagem .jv-lance__destaque {
  color: var(--jv-color-brand) !important;
  font-weight: var(--jv-weight-bold);
}

/* PDP do leilão: os números grandes (Figma: "12X R$888,88" com 34px). */
.jv-lance--lote .jv-lance__parcelas {
  padding: var(--jv-space-2) var(--jv-space-4);
  font-size: var(--jv-text-2xl);
}

.jv-lance--lote .jv-lance__input {
  flex: none;
  width: 9em !important;
  font-size: var(--jv-text-4xl) !important;
}

.jv-lance--lote .jv-lance__titulo {
  margin-top: 0;
}

.jv-lance--lote .jv-lance__botao {
  max-width: none;
}

/* 4. Botão: "Dar lance" verde cheio; "Fazer login" só com o contorno verde (Figma). A animação do lance: o texto some,
   o botão vira um círculo com o martelo, gira enquanto o lance vai para a Linx, o martelo some, o botão volta inteiro e
   verde-claro ("Confirmado") e depois volta a "Dar lance". */
.jv-lance__botao {
  position: relative;
  display: block;
  width: 100%;
  max-width: 21.5625rem; /* 345px (Figma) */
  height: 2.75rem;
  margin: 0 auto;
  padding: 0;
  border: 1.5px solid var(--jv-color-action);
  border-radius: var(--jv-radius-pill);
  background: var(--jv-color-action);
  color: var(--jv-color-on-action);
  overflow: hidden;
  transition:
    width 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease,
    transform 0.08s ease;
}

.jv-lance__botao--entrar {
  background: transparent;
  color: var(--jv-color-text);
}

@media (hover: hover) {
  .jv-lance__botao:not([data-anim-state]):hover {
    border-color: var(--jv-color-accent);
    background: var(--jv-color-accent);
    color: var(--jv-color-on-accent);
  }
}

.jv-lance__botao:not([data-anim-state]):active {
  transform: scale(0.96);
}

.jv-lance__botao:disabled {
  cursor: default;
}

.jv-lance__botao-texto {
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.jv-lance__botao-icone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.625rem;
  height: 1.625rem;
  background: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  -webkit-mask: url("../../../Images/svg/Lance-Leilao.svg") center / contain no-repeat;
  mask: url("../../../Images/svg/Lance-Leilao.svg") center / contain no-repeat;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.jv-lance__botao[data-anim-state="fading-text"] .jv-lance__botao-texto,
.jv-lance__botao[data-anim-state="expanding"] .jv-lance__botao-texto {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
}

.jv-lance__botao[data-anim-state="shrinking"],
.jv-lance__botao[data-anim-state="icon-appearing"],
.jv-lance__botao[data-anim-state="spinning"],
.jv-lance__botao[data-anim-state="icon-fading"] {
  width: 2.75rem;
}

.jv-lance__botao[data-anim-state="shrinking"] .jv-lance__botao-texto,
.jv-lance__botao[data-anim-state="icon-appearing"] .jv-lance__botao-texto,
.jv-lance__botao[data-anim-state="spinning"] .jv-lance__botao-texto,
.jv-lance__botao[data-anim-state="icon-fading"] .jv-lance__botao-texto {
  opacity: 0;
}

.jv-lance__botao[data-anim-state="icon-appearing"] .jv-lance__botao-icone,
.jv-lance__botao[data-anim-state="spinning"] .jv-lance__botao-icone {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.jv-lance__botao[data-anim-state="spinning"] {
  animation: jv-lance-girar 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.jv-lance__botao[data-anim-state="expanding"],
.jv-lance__botao[data-anim-state="confirmed"] {
  border-color: var(--jv-color-success-bg);
  background: var(--jv-color-success-bg);
  color: var(--jv-color-success-text);
}

.jv-lance__botao[data-anim-state="confirmed"] .jv-lance__botao-texto {
  animation: jv-lance-confirmado 0.4s ease both;
}

@keyframes jv-lance-girar {
  0% { transform: rotate(0deg); }
  35% { transform: rotate(130deg) scale(0.95); }
  70% { transform: rotate(270deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes jv-lance-confirmado {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 5px)) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* 5. Erro com movimento (usuário, 22/10/2026: clientes mais velhas): a MENSAGEM de erro treme e pisca a cada tentativa
   errada. O tremor (.jv-tremer) passou a valer para o site todo e mora no Styles/jv/components/erro.css (23/10/2026);
   aqui fica só o botão sem animação para quem pede "menos movimento". */
@media (prefers-reduced-motion: reduce) {
  .jv-lance__botao,
  .jv-lance__botao-texto,
  .jv-lance__botao-icone {
    transition: none;
    animation: none;
  }
}

/* 6. Contador único (Figma 1659:17071; referência do usuário de 23/10/2026): faixa roxa em pílula, o relógio num círculo
   branco, uma divisória, "Leilão encerra hoje," e "às 18h" em duas linhas e as caixas h/m/s (brancas, como estavam;
   sempre três, com as horas passando de 24 no lugar de uma caixa de dias: usuário, 26/10/2026).
   PDP no computador: no topo da coluna; PLP no computador: a mesma faixa, fixa no centro embaixo (regras mais abaixo).
   Celular: presa no rodapé, como a faixa antiga. */
.jv-leilao-contador {
  display: flex;
  align-items: center;
  gap: var(--jv-space-3);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--jv-space-3) var(--jv-space-5) var(--jv-space-3) var(--jv-space-3); /* 12px em volta do selo (usuário, 24/10/2026: o relógio ficava colado na borda roxa) */
  border-radius: var(--jv-radius-pill);
  background: var(--jv-color-brand);
  color: var(--jv-color-on-brand);
}

.jv-leilao-contador[hidden] {
  display: none;
}

.jv-leilao-contador__selo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--jv-color-surface);
  color: var(--jv-color-brand);
}

/* O relógio do Figma ("ICON-ALERT_CLOCK", 1657:17053; usuário, 23/10/2026: o desenhado à mão não era o do Figma),
   exportado do Figma em 4x e usado como máscara: o desenho é o do Figma, e a cor, a do selo. */
.jv-leilao-contador__icone {
  display: block;
  flex: none;
  width: 1.625rem;
  height: 1.5625rem;
  background: currentColor;
  -webkit-mask: url("../../../Images/jv/leilao-relogio.png") center / contain no-repeat;
  mask: url("../../../Images/jv/leilao-relogio.png") center / contain no-repeat;
}

.jv-leilao-contador__texto {
  max-width: 18rem; /* era 12rem; "Leilão encerra amanhã, às 18h" quebrava em 3 linhas (usuário, 26/10/2026: "a área do texto pode ser maior") */
  padding-left: var(--jv-space-3);
  border-left: var(--jv-border-thin) solid rgb(255 255 255 / 35%);
  font-size: var(--jv-size-body);
  font-weight: var(--jv-weight-bold);
  line-height: 1.2;
}

.jv-leilao-contador__hora {
  display: inline; /* "às 18h" segue a frase e quebra onde couber, sem quebra forçada (usuário, 26/10/2026); o nowrap só mantém "às" e "18h" juntos */
  white-space: nowrap;
}

.jv-leilao-contador__caixas {
  display: flex;
  gap: var(--jv-space-1);
  margin-left: var(--jv-space-2);
}

/* Cada caixa: o número e a unidade na mesma linha ("04h"), alinhados pela base do texto e centrados na caixa, um pouco
   maiores (usuário, 23/10/2026; antes, a unidade ficava embaixo do número, com 18px). O grid centra o par na caixa e
   o align-items: baseline deixa o "h" na mesma linha de base do número. */
.jv-leilao-contador__caixa {
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  align-items: baseline;
  column-gap: 1px;
  min-width: 3.5rem;
  height: 3rem;
  padding: 0 var(--jv-space-2);
  border: var(--jv-border-thin) solid rgb(255 255 255 / 45%);
  border-radius: var(--jv-radius-md);
  background: rgb(255 255 255 / 14%); /* estilo vidro: translúcido sobre o roxo (referência do usuário, 23/10/2026) */
  line-height: 1;
}

.jv-leilao-contador__caixa[hidden] {
  display: none;
}

.jv-leilao-contador__caixa strong {
  font-size: var(--jv-text-xl);
  font-weight: var(--jv-weight-bold);
  color: var(--jv-color-on-brand);
  font-variant-numeric: tabular-nums;
}

.jv-leilao-contador__caixa small {
  font-size: var(--jv-text-sm);
  font-weight: var(--jv-weight-bold);
  color: rgb(255 255 255 / 80%);
}

.jv-leilao-contador--encerrado .jv-leilao-contador__caixas {
  opacity: 0.6;
}

/* Leilão fechado (usuário, 23/10/2026): "Leilão encerrado" maior e em negrito e, embaixo, "Próximo leilão sábado a partir
   das 12h" menor, em letra normal e sem quebra forçada (pedidos das 21h30 e das 22h; no celular quebra onde couber),
   com as mesmas caixas h/m/s contando até lá. */
.jv-leilao-contador--proximo .jv-leilao-contador__antes {
  display: block;
  font-size: var(--jv-text-lg);
}

.jv-leilao-contador--proximo .jv-leilao-contador__dia,
.jv-leilao-contador--proximo .jv-leilao-contador__hora {
  display: inline;
  white-space: normal;
}

.jv-leilao-contador--proximo .jv-leilao-contador__texto {
  max-width: 18rem;
}

.jv-leilao-contador--proximo .jv-leilao-contador__dia,
.jv-leilao-contador--proximo .jv-leilao-contador__hora {
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-regular);
  color: rgb(255 255 255 / 90%);
}

.jv-leilao-contador--proximo .jv-leilao-contador__quando {
  display: block;
  margin-top: var(--jv-space-1);
}

/* PLP no computador: o contador é a mesma faixa da PDP, flutuando fixa no centro embaixo da tela até o fim do leilão
   (usuário, 23/10/2026: "igual o da PDP, mas surge no centro embaixo e fica fixo"); entra subindo. O aviso antigo da
   Linx "Fulana acabou de dar um lance" (#auction-fixed) saiu da PLP (usuário, 23/10/2026: as frases dos cartões têm o
   mesmo propósito e o aviso só poluía). */
@media (min-width: 1024px) {
  body.ProductAuctionRoute #grid.jv-leilao-plp {
    padding-bottom: 6rem; /* a última fileira não fica atrás da faixa */
  }

  #grid.jv-leilao-plp .jv-leilao-contador {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    z-index: var(--jv-z-sticky);
    margin: 0;
    transform: translateX(-50%);
    animation: jv-contador-surgir 0.5s ease-out both;
  }
}

@keyframes jv-contador-surgir {
  from {
    opacity: 0;
    transform: translate(-50%, 150%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #grid.jv-leilao-plp .jv-leilao-contador {
    animation: none;
  }
}

@media (max-width: 1023px) {
  .jv-leilao-contador {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--jv-z-sticky);
    justify-content: center;
    width: auto;
    max-width: none;
    margin: 0;
    border-radius: 0;
    padding: var(--jv-space-2) var(--jv-space-4);
  }

  /* Celular: o círculo e a letra menores, para "Leilão encerra hoje," caber numa linha e "às 18h" na outra. */
  .jv-leilao-contador__selo {
    width: 2.5rem;
    height: 2.5rem;
  }

  .jv-leilao-contador__icone {
    width: 1.375rem;
    height: 1.3125rem;
  }

  .jv-leilao-contador__texto {
    max-width: 10rem;
    font-size: var(--jv-size-label);
  }

  /* Na barra do rodapé, as caixas um pouco menores que no computador e os espaços mais curtos, para "Leilão encerra"
     caber numa linha no celular de 360px. */
  .jv-leilao-contador {
    gap: var(--jv-space-2);
    padding: var(--jv-space-3); /* 12px em volta do selo, como no computador (24/10/2026) */
  }

  .jv-leilao-contador__caixas {
    margin-left: 0;
  }

  .jv-leilao-contador__caixa {
    min-width: 3rem;
    height: 2.75rem;
    padding: 0 var(--jv-space-1);
  }

  .jv-leilao-contador__caixa strong {
    font-size: 1.25rem; /* 20px: entre o text-lg (18, o de antes) e o text-xl (22, o do computador) */
  }

  .jv-leilao-contador__caixa small {
    font-size: var(--jv-text-xs);
  }

  /* Leilão fechado no celular: sem o ícone (usuário, 23/10/2026: com três linhas de texto a barra estourava e a última
     caixa saía da tela), "Leilão encerrado" em 16px e as outras duas linhas em 14px normal, numa coluna que cabe com
     as três caixas num celular de 360px. */
  .jv-leilao-contador--proximo .jv-leilao-contador__selo {
    display: none;
  }

  .jv-leilao-contador--proximo .jv-leilao-contador__texto {
    max-width: 11.5rem;
    padding-left: 0;
    border-left: 0;
  }

  .jv-leilao-contador--proximo .jv-leilao-contador__antes {
    font-size: var(--jv-size-body);
  }
}

/* 7. PDP do leilão (Figma 1657:15783; usuário, 22 e 23/10/2026): contador alinhado à esquerda com o nome, "Valor de
   mercado" pequeno e colado ao "Dê seu lance", a caixa do gatilho embaixo do botão, códigos no fim. No computador, as
   colunas são as da PDP padrão (pdp-gallery.css): a galeria com a foto do mesmo tamanho e a coluna de compra com o
   resto (usuário, 23/10/2026: a foto estava menor que na PDP padrão). */
.jv-leilao-lote .jv-leilao-contador {
  margin: 0;
}

.jv-leilao-lote .wp-bid {
  gap: var(--jv-space-3);
}

.jv-leilao-lote__codigos {
  display: flex;
  gap: var(--jv-space-4);
}

.jv-leilao-lote__mercado {
  margin-bottom: calc(-1 * var(--jv-space-1));
  font-size: var(--jv-size-label);
  color: var(--jv-color-text-muted);
}

.jv-leilao-lote__mercado span {
  color: inherit;
}

.jv-leilao-lote__codigos small {
  font-size: var(--jv-size-label);
  color: var(--jv-color-text-muted);
}

@media (min-width: 1024px) {
  body.product-auction-detail #product-detail .wp-pdp .main {
    display: grid;
    grid-template-columns: minmax(0, var(--jv-size-pdp-gallery-max)) minmax(var(--jv-size-pdp-buy), 1fr);
    align-items: start;
    gap: var(--jv-space-5);
  }

  body.product-auction-detail #product-detail .wp-pdp .main > .product-info {
    grid-column: 1;
    min-inline-size: 0;
    max-inline-size: none;
    margin-block-end: 0;
  }

  body.product-auction-detail #product-detail .wp-pdp .main > .details {
    grid-column: 2;
    min-inline-size: 0;
  }
}

/* Nome da joia no padrão da PDP (jv-text-title: Playfair negrito, 24px no celular e 28px no computador; usuário,
   27/10/2026: "deixar no padrão do pdp"). O styles.css punha 36px em todas as telas, com o mesmo seletor; este arquivo
   carrega depois. */
body.product-auction-detail #product-detail .details .name-price .name h1 {
  font-family: var(--jv-font-display);
  font-size: var(--jv-size-title);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-heading);
  color: var(--jv-color-text);
}

/* Espaço para o contador preso no rodapé (81px com "Leilão encerrado" em 3 linhas, 24/10/2026) no fim da página, como na
   lista do leilão. No bloco do lote, ele abria um vão depois dos códigos, porque as abas e as outras joias vêm depois
   (usuário, 27/10/2026). */
@media (max-width: 1023px) {
  body.product-auction-detail #content {
    padding-bottom: 6rem;
  }
}

/* 8. Janela de login (Figma 1621:14870): foto da modelo de um lado, o formulário do outro; no celular, o formulário
   primeiro e a foto embaixo (usuário, 22/10/2026). Nativa (<dialog>), montada pelo script quando alguém sem login toca
   no botão. */
.jv-login {
  width: min(68.375rem, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100% - 2rem);
  margin: auto; /* o reset do site (* { margin: 0 }) tira o centro que o navegador dá ao <dialog> */
  padding: 0;
  border: 0;
  border-radius: 1.375rem;
  background: var(--jv-color-surface-alt);
  color: var(--jv-color-text);
  box-shadow: 0 18px 60px rgb(0 0 0 / 30%);
  overflow: auto;
}

.jv-login::backdrop {
  background: rgb(0 0 0 / 60%);
}

.jv-login[open] {
  animation: jv-login-abrir 0.25s ease;
}

.jv-login__form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
  min-height: 43.5rem;
}

.jv-login__foto {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 1.375rem 0 0 1.375rem;
}

.jv-login__conteudo {
  padding: 6.625rem 2.5rem 2.5rem 1.25rem;
}

.jv-login__fechar {
  position: absolute;
  top: var(--jv-space-3);
  right: var(--jv-space-3);
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--jv-touch-min);
  height: var(--jv-touch-min);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--jv-color-text);
}

.jv-login__fechar svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (hover: hover) {
  .jv-login__fechar:hover {
    color: var(--jv-color-brand);
  }
}

.jv-login__titulo {
  margin-bottom: var(--jv-space-1);
  font-family: var(--jv-font-sans);
  font-size: var(--jv-text-4xl);
  font-weight: var(--jv-weight-bold);
  line-height: 1.2;
  color: var(--jv-color-brand);
}

.jv-login__sub {
  margin-bottom: var(--jv-space-8);
  font-size: var(--jv-size-body);
  color: var(--jv-color-text);
}

.jv-login__campo {
  margin-bottom: var(--jv-space-4);
}

.jv-login__campo label {
  display: block;
  margin-bottom: var(--jv-space-1);
  font-size: var(--jv-size-label);
}

.jv-login__campo input {
  width: 100%;
  height: 2.625rem;
  padding: var(--jv-space-2) var(--jv-space-3);
  border: 1px solid var(--jv-color-border);
  border-radius: 6px;
  background: var(--jv-color-surface);
  font-size: var(--jv-size-body);
  color: var(--jv-color-text);
}

.jv-login__campo input:focus {
  outline: none;
  border-color: var(--jv-color-brand);
  box-shadow: 0 0 0 3px rgb(85 63 152 / 16%);
}

.jv-login__campo input.jv-tremer {
  border-color: var(--jv-color-info);
}

.jv-login__senha {
  position: relative;
}

.jv-login__senha input {
  padding-right: 3rem;
}

.jv-login__olho {
  position: absolute;
  top: 50%;
  right: var(--jv-space-1);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--jv-color-text);
  transform: translateY(-50%);
}

.jv-login__olho svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jv-login__olho[aria-pressed="true"] .jv-login__olho-risco {
  display: none;
}

.jv-login__erro {
  display: none;
  margin-top: var(--jv-space-1);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  line-height: 1.3;
  color: var(--jv-color-info);
}

.jv-login__erro:not(:empty) {
  display: block;
}

.jv-login__erro--geral:not(:empty) {
  margin: 0 0 var(--jv-space-3);
}

.jv-login__esqueci {
  display: inline-block;
  margin: calc(-1 * var(--jv-space-2)) 0 var(--jv-space-6);
  font-size: var(--jv-size-label);
  color: var(--jv-color-text);
  text-decoration: underline;
}

@media (hover: hover) {
  .jv-login__esqueci:hover {
    color: var(--jv-color-brand);
  }
}

.jv-login__entrar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--jv-space-2);
  width: 100%;
  max-width: 21.5625rem;
  min-height: 3.125rem;
  margin: 0 auto;
  padding: var(--jv-space-3) var(--jv-space-5);
  border: 0;
  border-radius: var(--jv-radius-pill);
  background: var(--jv-color-action);
  color: var(--jv-color-on-action);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.jv-login__entrar svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .jv-login__entrar:hover {
    background: var(--jv-color-accent);
    color: var(--jv-color-on-accent);
  }
}

.jv-login__entrar:disabled {
  opacity: 0.7;
  cursor: progress;
}

.jv-login__criar-texto {
  margin-top: var(--jv-space-6);
  font-size: var(--jv-text-lg);
  text-align: center;
}

.jv-login__criar {
  font-weight: var(--jv-weight-bold);
  color: inherit;
  text-decoration: underline;
}

@media (hover: hover) {
  .jv-login__criar:hover {
    color: var(--jv-color-brand);
  }
}

.jv-login__linha {
  height: 0;
  margin: var(--jv-space-6) 0 var(--jv-space-4);
  border: 0;
  border-top: 1px solid var(--jv-color-border);
}

.jv-login__legal,
.jv-login__recaptcha {
  font-size: var(--jv-text-xs);
  line-height: 1.4;
  color: var(--jv-color-text);
}

.jv-login__recaptcha {
  margin-top: var(--jv-space-2);
  color: var(--jv-color-text-muted);
}

.jv-login__legal a,
.jv-login__recaptcha a {
  color: inherit;
  text-decoration: underline;
}

html[data-jv-recaptcha] .grecaptcha-badge {
  visibility: hidden;
}

@keyframes jv-login-abrir {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767px) {
  .jv-login {
    width: calc(100% - 2rem);
    border-radius: var(--jv-radius-lg);
  }

  .jv-login__form {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .jv-login__conteudo {
    order: 1;
    padding: 2.5rem var(--jv-space-5) var(--jv-space-6);
  }

  .jv-login__foto {
    order: 2;
    height: 12.5rem;
    min-height: 0;
    border-radius: 0 0 var(--jv-radius-lg) var(--jv-radius-lg);
  }

  .jv-login__titulo {
    font-size: var(--jv-text-2xl);
  }

  .jv-login__criar-texto {
    font-size: var(--jv-size-body);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jv-login[open] {
    animation: none;
  }
}

/* 9. "Outras joias em leilão" na PDP do leilão (Figma 1657:15783), no padrão do "Selecionados para você" (pdp-related):
   título e frase, "Ver todos" (contorno verde no celular, verde cheio ao lado do título no computador) e a vitrine, que o
   script antigo do painel monta com o Swiper dentro de .auction-list-dynamic (os cartões são os da PLP). */
.jv-leilao-outras {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "lista"
    "todos";
  gap: var(--jv-space-4);
  width: 100%;
  max-width: var(--jv-size-container);
  margin: var(--jv-space-8) auto 0;
  padding: 0 var(--jv-space-4);
}

.jv-leilao-outras__head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: var(--jv-space-2);
  text-align: center;
}

.jv-leilao-outras__title {
  color: var(--jv-color-brand);
}

.jv-leilao-outras__eyebrow {
  font-size: var(--jv-size-body);
  line-height: var(--jv-leading-normal);
}

.jv-leilao-outras__all {
  grid-area: todos;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--jv-touch-min);
  padding: 0 var(--jv-space-6);
  border: var(--jv-border-thick) solid var(--jv-color-action);
  border-radius: var(--jv-radius-pill);
  color: var(--jv-color-text);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  text-decoration: none;
  text-transform: uppercase;
}

@media (hover: hover) {
  .jv-leilao-outras__all:hover {
    border-color: var(--jv-color-accent);
    background: var(--jv-color-accent);
    color: var(--jv-color-on-accent);
  }
}

.jv-leilao-outras__lista {
  grid-area: lista;
  min-height: 1px;
}

.jv-leilao-outras__lista .showcase {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.jv-leilao-outras__lista .swiper {
  padding: 0 0 var(--jv-space-2);
}

.jv-leilao-outras__lista .swiper-slide {
  width: 17.5rem;
  height: auto;
}

/* Sem o limite de 60% que o CSS antigo põe nos cartões de vitrine (body .showcase .wd-product-list .list li[class*="product-"]):
   com ele, o cartão ficava com 197px no celular de 360px, e a foto, pequena (usuário, 27/10/2026). */
.jv-leilao-outras__lista .showcase .wd-product-list .list li.swiper-slide {
  max-width: none;
}

/* Setas no padrão do "Selecionados para você" (pdp-related.css; usuário, 24/10/2026: estavam brancas sobre branco, porque
   o ::after do CSS antigo pinta a seta de branco): só no computador, círculo verde de 44px com a seta branca (o mesmo
   desenho do pdp-related, como máscara no lugar da fonte de ícones do Swiper) e verde-escuro com o mouse em cima. No
   celular, só o arrasto, como no padrão. */
.jv-leilao-outras .jv-leilao-outras__lista .swiper .swiper-button-prev,
.jv-leilao-outras .jv-leilao-outras__lista .swiper .swiper-button-next {
  display: none;
}

@media (min-width: 1024px) {
  .jv-leilao-outras .jv-leilao-outras__lista .swiper-initialized .swiper-button-prev,
  .jv-leilao-outras .jv-leilao-outras__lista .swiper-initialized .swiper-button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--jv-touch-min);
    height: var(--jv-touch-min);
    margin-top: calc(-1 * var(--jv-touch-min) / 2);
    border-radius: var(--jv-radius-pill);
    background: var(--jv-color-action);
    color: var(--jv-color-on-action);
    opacity: 1;
    box-shadow: none;
  }

  .jv-leilao-outras__lista .swiper .swiper-button-prev::after,
  .jv-leilao-outras__lista .swiper .swiper-button-next::after {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    color: inherit; /* a seta na cor do botão (preta no verde, como o padrão; usuário, 26/10/2026): o CSS antigo pinta este ::after de branco */
    background: currentColor;
    -webkit-mask: var(--jv-seta) center / contain no-repeat;
    mask: var(--jv-seta) center / contain no-repeat;
  }

  .jv-leilao-outras__lista .swiper .swiper-button-prev::after {
    --jv-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 5l-7 7 7 7' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .jv-leilao-outras__lista .swiper .swiper-button-next::after {
    --jv-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  @media (hover: hover) {
    .jv-leilao-outras .jv-leilao-outras__lista .swiper .swiper-button-prev:hover,
    .jv-leilao-outras .jv-leilao-outras__lista .swiper .swiper-button-next:hover {
      background: var(--jv-color-accent);
      color: var(--jv-color-on-accent);
    }
  }
}

/* A vitrine traz o próprio lote da página; o Scripts/jv/leilao-lance.js o tira; até lá fica escondido. */
.jv-leilao-outras__lista [data-jv-outras-mesmo] {
  display: none;
}

@media (min-width: 1024px) {
  .jv-leilao-outras {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "head todos"
      "lista lista";
    align-items: center;
    gap: var(--jv-space-4) var(--jv-space-8);
  }

  .jv-leilao-outras__head {
    flex-direction: column-reverse;
    gap: var(--jv-space-1);
    text-align: start;
  }

  .jv-leilao-outras__all {
    background: var(--jv-color-action);
  }

  .jv-leilao-outras__lista .swiper-slide {
    width: 18.75rem;
  }
}

/* 10. Janela "Esqueceu sua senha?" (XD do designer, enviado pelo usuário em 22/10/2026): cabeçalho roxo com título em
   Playfair e a frase de apoio, X redondo; corpo claro com o campo e o botão "Alterar senha" colados e as duas notas. A
   resposta da Linx (Login/RecoverPassword) aparece embaixo do campo. Aberta pelo "Esqueceu sua senha?" da janela de login. */
.jv-senha {
  width: min(53rem, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100% - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 1.25rem;
  background: var(--jv-color-bg);
  color: var(--jv-color-text);
  box-shadow: 0 18px 60px rgb(0 0 0 / 30%);
  overflow: hidden;
}

.jv-senha::backdrop {
  background: rgb(0 0 0 / 60%);
}

.jv-senha[open] {
  animation: jv-login-abrir 0.25s ease;
}

.jv-senha__form {
  position: relative;
}

.jv-senha__topo {
  padding: var(--jv-space-6) var(--jv-space-12) var(--jv-space-6);
  background: var(--jv-color-brand);
  color: var(--jv-color-on-brand);
  text-align: center;
}

.jv-senha__titulo {
  font-family: var(--jv-font-display);
  font-size: var(--jv-text-4xl);
  font-weight: var(--jv-weight-bold);
  line-height: 1.1;
}

.jv-senha__sub {
  max-width: 36rem;
  margin: var(--jv-space-2) auto 0;
  font-size: var(--jv-size-body);
  line-height: var(--jv-leading-normal);
}

.jv-senha__fechar {
  position: absolute;
  top: var(--jv-space-4);
  right: var(--jv-space-4);
  display: grid;
  place-items: center;
  width: var(--jv-touch-min);
  height: var(--jv-touch-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--jv-color-on-brand);
}

.jv-senha__fechar svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.jv-senha__corpo {
  padding: var(--jv-space-6) var(--jv-space-6) var(--jv-space-8);
  text-align: center;
}

.jv-senha__rotulo {
  display: block;
  margin-bottom: var(--jv-space-2);
  font-size: var(--jv-size-body);
}

.jv-senha__linha {
  display: flex;
  max-width: 35rem;
  margin: 0 auto;
}

.jv-senha__linha input {
  flex: 1;
  min-width: 0;
  height: 2.875rem;
  padding: var(--jv-space-2) var(--jv-space-3);
  border: 1px solid var(--jv-color-border);
  border-right: 0;
  border-radius: var(--jv-radius-sm) 0 0 var(--jv-radius-sm);
  background: var(--jv-color-surface);
  font-size: var(--jv-size-body);
  color: var(--jv-color-text);
}

.jv-senha__linha input:focus {
  outline: none;
  border-color: var(--jv-color-brand);
  box-shadow: inset 0 0 0 1px var(--jv-color-brand);
}

.jv-senha__enviar {
  flex: none;
  min-width: 11rem;
  padding: 0 var(--jv-space-5);
  border: 0;
  border-radius: 0 var(--jv-radius-sm) var(--jv-radius-sm) 0;
  background: var(--jv-color-action);
  color: var(--jv-color-on-action);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

@media (hover: hover) {
  .jv-senha__enviar:hover {
    background: var(--jv-color-accent);
    color: var(--jv-color-on-accent);
  }
}

.jv-senha__enviar:disabled {
  opacity: 0.7;
  cursor: progress;
}

.jv-senha__resposta {
  display: none;
  max-width: 35rem;
  margin: var(--jv-space-3) auto 0;
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  line-height: 1.35;
  color: var(--jv-color-info);
}

.jv-senha__resposta:not(:empty) {
  display: block;
}

.jv-senha__resposta--ok {
  color: var(--jv-color-success-text);
}

.jv-senha__notas {
  margin-top: var(--jv-space-6);
  font-size: var(--jv-size-label);
  line-height: var(--jv-leading-normal);
}

@media (max-width: 767px) {
  .jv-senha__topo {
    padding: var(--jv-space-6) var(--jv-space-5) var(--jv-space-5);
  }

  .jv-senha__titulo {
    font-size: var(--jv-text-3xl);
  }

  .jv-senha__fechar {
    top: var(--jv-space-2);
    right: var(--jv-space-2);
  }

  .jv-senha__corpo {
    padding: var(--jv-space-5) var(--jv-space-4) var(--jv-space-6);
  }

  .jv-senha__linha {
    flex-direction: column;
    gap: var(--jv-space-2);
  }

  .jv-senha__linha input {
    border-right: 1px solid var(--jv-color-border);
    border-radius: var(--jv-radius-sm);
  }

  .jv-senha__enviar {
    min-height: var(--jv-touch-min);
    border-radius: var(--jv-radius-pill);
  }
}

/* 11. Lote de leilão na grade normal de joias (Partials/product.auction.line.in.grid; usuário, 24/10/2026: "deixar no
   padrão esses cards de leilão"): é o mesmo cartão da PLP do leilão, mas nessa grade o servidor não entrega o estado do
   lote, então o cartão traz o bloco do lance e a faixa de conquista, e o script antigo do painel (grid.auctions.js)
   grava data-is-executing pelo leilao/{id}.json quando o cartão entra na tela; até lá, nenhum dos dois aparece. */
.jv-leilao-cartao.auction-in-grid:not([data-is-executing="true"]) .jv-leilao-cartao__lance,
.jv-leilao-cartao.auction-in-grid:not([data-is-executing="false"]) .jv-leilao-vencedor {
  display: none;
}

/* 12. "Meus Lances" no painel do cliente (Partials/jv/meus-lances, página de conteúdo "meus-lances"; XD antigo do
   usuário, 24/10/2026): o menu lateral e a moldura são os do painel (Styles/panel.css, pela classe area-profile que o
   master põe no body pelo PageInfo.BodyClass); aqui, o título, a linha de estado,
   a grade dos cartões do leilão (1 por fileira no celular, porque o trilho do menu do painel deixa o miolo com uns 300px
   e a faixa de conquista quebrava palavra em 2 colunas; 2 a partir de 600px, 3 no computador, 4 em telas largas), a
   linha com o lance da cliente embaixo do nome, e os avisos (sem login, sem leilão, sem lance, erro) com o botão verde
   do padrão. */
.jv-meus-lances__estado {
  margin: 0 0 var(--jv-space-4);
  font-size: var(--jv-size-body);
  color: var(--jv-color-text-muted);
}

.jv-meus-lances__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--jv-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jv-meus-lances__item {
  min-width: 0;
}

.jv-meus-lances__situacao {
  margin: var(--jv-space-1) 0 0;
  font-size: var(--jv-size-label);
  line-height: 1.3;
  color: var(--jv-color-text-muted);
}

.jv-meus-lances__situacao--frente {
  font-weight: var(--jv-weight-bold);
  color: var(--jv-color-brand);
}

.jv-meus-lances__situacao--superado {
  color: var(--jv-color-text);
}

.jv-meus-lances__aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--jv-space-4);
  padding: var(--jv-space-8) var(--jv-space-4);
  border-radius: var(--jv-radius-md);
  background: color-mix(in srgb, var(--jv-palette-lilac) 16%, var(--jv-color-surface));
  text-align: center;
}

.jv-meus-lances__estado[hidden],
.jv-meus-lances__lista[hidden],
.jv-meus-lances__aviso[hidden] {
  display: none;
}

.jv-meus-lances__aviso-texto {
  margin: 0;
  font-size: var(--jv-size-body);
  color: var(--jv-color-text);
}

.jv-meus-lances__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--jv-touch-min);
  padding: 0 var(--jv-space-6);
  border-radius: var(--jv-radius-pill);
  background: var(--jv-color-action);
  color: var(--jv-color-on-action);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  text-decoration: none;
  text-transform: uppercase;
}

@media (hover: hover) {
  .jv-meus-lances__botao:hover {
    background: var(--jv-color-accent);
    color: var(--jv-color-on-accent);
  }
}

@media (min-width: 600px) {
  .jv-meus-lances__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .jv-meus-lances__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .jv-meus-lances__lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}