/*
 * Página de categoria, busca e marca (#grid.jv-plp, Pages/grid; Figma "002-CATEGORY" 1221:6404 no computador e
 * "001-CATEGORY" 504:5357 no celular; usuário, 29/10/2026: "No figma tem exatamente oq preciso"). Entra pelo
 * Templates/masters/includes/PageFooter nas páginas de grade (grid-products e grid-empty), fora o /leilao, que tem a
 * própria grade (leilao-lance.css, seção 1).
 * Seções: 1. barra de filtros (celular: dois botões; computador: pílulas, chips e "Organizar por"); 2. grade;
 * 3. cartão (Partials/jv/produto-cartao); 4. lote de leilão deitado no celular (Partials/product.auction.line.in.grid);
 * 5. "Organizar por" (#sorter-fk, que o Scripts/jv/plp.js leva do widget da grade para a barra); 6. texto SEO;
 * 7. banner da categoria, baixo.
 * O CSS antigo (styles.css, compilado pelo painel) escondia os filtros numa coluna à esquerda no computador, dava 3
 * colunas à grade e desenhava o cartão com o nome sublinhado, 70px de altura mínima e o preço em 24px. As regras daqui
 * começam por "body #grid.jv-plp" para empatar ou passar a especificidade dele (body.grid-products #grid ...), e vencem
 * no empate porque este arquivo vem depois, no rodapé.
 * Tamanhos do Figma pela regra do site: texto corrido 16px e rótulo 14px (no Figma, 10px nas tags e nos chips).
 */

/* 1. Barra de filtros. No celular, "Filtrar por" (abre o painel de sempre) e "Organizar por", duas pílulas verdes
   lado a lado, como o Figma 001-CATEGORY. */
body #grid.jv-plp .jv-plp__corpo {
  gap: var(--jv-space-4);
}

body #grid.jv-plp .filters-total {
  display: flex;
  align-items: stretch;
  gap: var(--jv-space-3);
}

body #grid.jv-plp .filters-total .open-facets,
body #grid.jv-plp .jv-ordenar__botao {
  box-sizing: border-box;
  flex: 1 1 auto; /* cada pílula parte da largura do próprio texto (no Figma, 158 e 191px) e as duas crescem juntas */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--jv-space-1);
  width: auto;
  min-height: var(--jv-touch-min);
  margin: 0;
  padding: var(--jv-space-3);
  border: var(--jv-border-thin) solid var(--jv-color-border); /* só o contorno, para a página ficar menos carregada (usuário, 29/10/2026) */
  border-radius: var(--jv-radius-pill);
  background-color: transparent;
  color: var(--jv-color-text);
  font-family: var(--jv-font-sans);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-none);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* Total e a escolha de como ver as joias, no celular (usuário, 29/10/2026, pelo exemplo da C&A): "N produtos" à
   esquerda e três botões à direita; o escolhido fica preto, os outros cinza. */
body #grid.jv-plp .jv-plp__vista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jv-space-3);
}

body #grid.jv-plp .jv-plp__total {
  font-family: var(--jv-font-sans);
  font-size: var(--jv-size-label);
  color: var(--jv-color-text-muted);
}

body #grid.jv-plp .jv-plp__vistas {
  display: flex;
  gap: var(--jv-space-2);
}

body #grid.jv-plp .jv-plp__vista-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--jv-touch-min);
  height: var(--jv-touch-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--jv-palette-gray-400);
  cursor: pointer;
}

body #grid.jv-plp .jv-plp__vista-botao[aria-pressed="true"] {
  color: var(--jv-color-text);
}

body #grid.jv-plp .jv-plp__vista-botao[aria-pressed="true"] svg {
  stroke-width: 2;
}

body #grid.jv-plp .filters-total .open-facets svg,
body #grid.jv-plp .jv-ordenar__botao svg {
  flex: none;
  width: 1rem;
  height: 1rem;
}

body #grid.jv-plp .filters-total .open-facets {
  order: 0; /* o CSS antigo o manda para a direita (order: 1) */
}

body #grid.jv-plp .jv-plp__ordenar {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

/* O widget do ordenador fica vazio no cabeçalho e no rodapé da grade depois que o plp.js leva o #sorter-fk embora;
   o CSS antigo o punha 50px acima da grade, no celular. */
body #grid.jv-plp .wd-browsing-grid header .wd-browsing-grid-sorter,
body #grid.jv-plp .wd-browsing-grid footer .wd-browsing-grid-sorter {
  display: none;
}

/* Filtros escolhidos em chips (a Linx os desenha em .selected-facets, que o CSS antigo escondia): no computador, na
   linha abaixo das pílulas, com o "Limpar Filtro" na ponta; no celular, no alto do painel de filtros. */
body #grid.jv-plp .wd-facet-group .selected-facets {
  display: block;
}

body #grid.jv-plp .wd-facet-group .selected-facets.hidden {
  display: none; /* a Linx deixa a classe hidden enquanto não há filtro escolhido */
}

/* O bloco que a Linx preenche com os filtros escolhidos também leva a classe "template" (div.facet-type-selected.template):
   não esconder por ela, senão os chips somem (30/10/2026). */
body #grid.jv-plp .wd-facet-group .selected-facets .selected-facet-name,
body #grid.jv-plp .wd-facet-group .selected-facets .markup-color,
body #grid.jv-plp .wd-facet-group .selected-facets .no-data {
  display: none;
}

body #grid.jv-plp .wd-facet-group .selected-facets .facet-type-selected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jv-space-1);
}

body #grid.jv-plp .wd-facet-group .selected-facets .selected-facet,
body #grid.jv-plp .wd-facet-group .selected-facets .selected-facet ul {
  display: contents;
}

body #grid.jv-plp .wd-facet-group .selected-facets .selected-option {
  display: inline-flex;
  align-items: center;
  gap: var(--jv-space-1);
  padding: var(--jv-space-1) var(--jv-space-3);
  border-radius: var(--jv-radius-pill);
  background-color: var(--jv-color-surface-alt);
  color: var(--jv-color-text);
  font-family: var(--jv-font-sans);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-none);
  text-transform: uppercase;
  cursor: pointer;
}

body #grid.jv-plp .wd-facet-group .selected-facets .clear-filter {
  font-size: 1.125em;
  line-height: 1;
}

body #grid.jv-plp .wd-facet-group .selected-facets:has(.selected-option) {
  margin-top: var(--jv-space-3);
}

body #grid.jv-plp .jv-plp__limpar {
  font-family: var(--jv-font-sans);
  font-size: var(--jv-size-body);
  color: var(--jv-color-text);
  text-decoration: underline;
  white-space: nowrap;
}

body #grid.jv-plp .jv-plp__limpar[hidden] {
  display: none;
}

/* 1b. Painel de filtros do celular (usuário, 30/10/2026, pela referência: "mais sóbrio"): tela branca com "Filtros" e
   "Fechar" no alto, cada grupo da Linx como um título e as opções em cartões de 3 por linha (cinza claro; lilás com o
   texto preto quando escolhida; no futuro, uma imagem acima do nome em .jv-filtro__imagem), e a barra fixa embaixo com
   o botão redondo de limpar e "Ver N joias". A cliente escolhe primeiro e aplica depois (plp.js: a classe jv-alternado
   no li marca o que mudou em relação ao que está aplicado, li.selected). O CSS antigo pintava o painel de roxo, com
   caixinhas de marcar e "+"/"-" nos títulos; as regras daqui vencem por especificidade e por vir depois. Os chips de
   filtro escolhido (.selected-facets) somem aqui: o cartão lilás já mostra o estado. */
@media (max-width: 63.98rem) {
  /* O painel ocupa a tela toda (left/right 0, sem largura fixa) e corta o que passar da borda: o respiro lateral fica
     nos filhos (cabeçalho, grupos e barra de baixo), sem margem negativa, porque ela alargava o painel e a tela. */
  body.show-facets #grid.jv-plp .main .filters {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    box-sizing: border-box;
    padding: 0;
    background-color: var(--jv-color-surface);
    color: var(--jv-color-text);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body #grid.jv-plp .filters .jv-filtros__topo {
    position: sticky;
    top: 0;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: var(--jv-space-4);
    border-bottom: var(--jv-border-thin) solid var(--jv-color-border);
    background-color: var(--jv-color-surface);
  }

  body #grid.jv-plp .filters .jv-filtros__titulo {
    margin: 0;
    font-family: var(--jv-font-sans);
    font-size: 1.25rem; /* 20 */
    font-weight: var(--jv-weight-bold);
    line-height: var(--jv-leading-none);
    color: var(--jv-color-text);
  }

  body #grid.jv-plp .filters .jv-filtros__fechar {
    display: inline-flex;
    align-items: center;
    gap: var(--jv-space-2);
    position: static;
    width: auto; /* o CSS antigo faz do .button-close uma bolinha cinza de 36px, sem texto */
    height: auto;
    min-height: var(--jv-touch-min);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--jv-color-text);
    font-family: var(--jv-font-sans);
    font-size: var(--jv-size-label);
    font-weight: var(--jv-weight-bold);
    text-decoration: none;
  }

  body #grid.jv-plp .filters .jv-filtros__fechar span {
    font-size: var(--jv-size-label) !important; /* algum CSS antigo zera o texto do .button-close */
    line-height: var(--jv-leading-none);
  }

  body #grid.jv-plp .filters .jv-filtros__fechar svg {
    flex: none;
    stroke: currentColor;
  }

  body #grid.jv-plp .filters .wd-facet-group .selected-facets,
  body #grid.jv-plp .filters .wd-facet-group .loading-label {
    display: none;
  }

  body #grid.jv-plp .filters .wd-facet-group .facets {
    flex-direction: column;
    gap: 0;
    padding: 0 var(--jv-space-4) var(--jv-space-6);
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type {
    margin-top: var(--jv-space-6);
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-type-list.static {
    display: block;
    gap: 0;
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-title,
  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-title.facet-closed {
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--jv-color-text);
    font-family: var(--jv-font-sans);
    font-size: var(--jv-size-body);
    font-weight: var(--jv-weight-bold);
    line-height: var(--jv-leading-heading);
    text-transform: none;
    cursor: default;
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-title h3 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-title::after,
  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-title.facet-closed::after {
    content: none;
  }

  /* Os cartões: 3 por linha, sempre à mostra (o "+"/"-" do título não fecha mais o grupo). */
  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-title + ul,
  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-title.facet-closed + ul,
  body #grid.jv-plp .filters .wd-facet-group .facet-type.colors .facet-title + ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--jv-space-2);
    margin: 0;
    padding: var(--jv-space-3) 0 0;
    font-weight: var(--jv-weight-regular);
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-title + ul > li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-title + ul > li > h4 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-title + ul > li ul,
  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-title + ul > li .expander {
    display: none; /* os níveis de dentro (Modelo) e o "+" deles ficam de fora dos cartões */
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type ul li [rel=facet] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--jv-space-2);
    position: relative;
    width: 100%;
    min-height: 4.5rem; /* 72 */
    padding: var(--jv-space-3) var(--jv-space-2);
    border: var(--jv-border-thin) solid transparent;
    border-radius: var(--jv-radius-md);
    background-color: var(--jv-color-surface-alt);
    color: var(--jv-color-text);
    font-family: var(--jv-font-sans);
    font-size: var(--jv-size-label);
    font-weight: var(--jv-weight-regular);
    line-height: var(--jv-leading-heading);
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color var(--jv-duration-fast) var(--jv-ease);
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type.wd-facet-type-list:not(.colors) ul li [rel=facet]::before,
  body #grid.jv-plp .filters .wd-facet-group .facet-type.wd-facet-type-list:not(.colors) ul li [rel=facet]::after {
    content: none; /* sem a caixinha de marcar e o ✓ do CSS antigo */
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type ul li [rel=facet] .option-title {
    flex: none;
    width: 100%;
    font-size: inherit;
  }

  /* O CSS antigo troca o texto das duas pontas do preço ("0 até 300" e "5000 até 999999") por "Menor que R$300" e
     "Maior que R$5000": some com o texto original (font-size 0) e escreve o novo no ::before. */
  body #grid.jv-plp .filters .wd-facet-group .facet-type ul li [rel=facet][data-url="0-em-300"] .option-title,
  body #grid.jv-plp .filters .wd-facet-group .facet-type ul li [rel=facet][data-url="5000-em-999999"] .option-title {
    font-size: 0;
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type ul li [rel=facet][data-url="0-em-300"] .option-title::before,
  body #grid.jv-plp .filters .wd-facet-group .facet-type ul li [rel=facet][data-url="5000-em-999999"] .option-title::before {
    font-size: var(--jv-size-label);
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type ul li [rel=facet] .option-count,
  body #grid.jv-plp .filters .wd-facet-group .facet-type:not(.colors) ul li [rel=facet] .markup-color {
    display: none;
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type.colors ul li [rel=facet] .markup-color {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    border: var(--jv-border-thin) solid var(--jv-color-border);
    border-radius: 50%;
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type ul li [rel=facet] .jv-filtro__imagem {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
  }

  /* Escolhido = aplicado (li.selected) ou alternado agora (li.jv-alternado), mas não os dois: lilás com o texto preto. */
  body #grid.jv-plp .filters .wd-facet-group .facet-type ul li.selected:not(.jv-alternado) [rel=facet],
  body #grid.jv-plp .filters .wd-facet-group .facet-type ul li.jv-alternado:not(.selected) [rel=facet] {
    border-color: var(--jv-color-accent);
    background-color: var(--jv-color-accent);
    color: var(--jv-color-on-accent);
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type.colors ul li.selected [rel=facet] .markup-color::before {
    content: none;
  }

  /* Barra de baixo: o botão redondo de limpar e o "Ver N joias", presos no pé do painel. */
  body.show-facets #grid.jv-plp .main .filters .bottom {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--jv-space-3);
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: var(--jv-space-3) var(--jv-space-4) calc(var(--jv-space-3) + env(safe-area-inset-bottom, 0px));
    border-top: var(--jv-border-thin) solid var(--jv-color-border);
    background-color: var(--jv-color-surface);
  }

  body.show-facets #grid.jv-plp .main .filters .bottom .reset {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0;
    padding: 0;
    border: var(--jv-border-thin) solid var(--jv-color-border);
    border-radius: 50%;
    background-color: transparent;
    color: var(--jv-color-text);
    font-size: 0;
  }

  body.show-facets #grid.jv-plp .main .filters .bottom .apply-filters {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    margin: 0;
    padding: var(--jv-space-3) var(--jv-space-5);
    border: 0;
    border-radius: var(--jv-radius-pill);
    background-color: var(--jv-color-action); /* o verde padrão dos botões do site (usuário, 30/10/2026) */
    color: var(--jv-color-on-action);
    font-family: var(--jv-font-sans);
    font-size: var(--jv-size-body);
    font-weight: var(--jv-weight-bold);
    line-height: var(--jv-leading-none);
    text-transform: none;
    white-space: nowrap;
  }

  body.show-facets #grid.jv-plp .main .filters .bottom .apply-filters.jv-filtros__aplicar--contando {
    opacity: 0.7; /* enquanto o número das joias é buscado */
  }

  /* O "Filtrar por" mostra quantos filtros estão aplicados (plp.js escreve data-jv-filtros). */
  body #grid.jv-plp .filters-total .open-facets[data-jv-filtros]:not([data-jv-filtros=""])::after {
    content: attr(data-jv-filtros);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 var(--jv-space-1);
    border-radius: var(--jv-radius-pill);
    background-color: var(--jv-color-accent);
    color: var(--jv-color-on-accent);
    font-size: var(--jv-text-xs);
    line-height: 1;
  }
}

/* Computador (Figma 002-CATEGORY): os filtros saem da coluna escondida à esquerda e viram uma fileira de pílulas acima
   da grade, cada grupo com a lista suspensa embaixo; "Organizar por" na ponta direita; chips e, logo depois deles, o
   "Limpar Filtro" na linha de baixo (a coluna dos chips é "auto": cresce até a largura dos chips, e o "Limpar Filtro"
   começa onde eles acabam). A grade cresce até 1.600px, como a PLP do leilão. A trilha ("Página Inicial • Joias") sai
   da tela (usuário, 30/10/2026); o HTML fica, pelo dado estruturado BreadcrumbList. */
@media (min-width: 64rem) {
  body #grid.jv-plp {
    width: 100%;
    max-width: 100rem;
  }

  body #grid.jv-plp .jv-plp__trilha {
    display: none;
  }

  body #grid.jv-plp .jv-plp__corpo {
    gap: var(--jv-space-6);
  }

  body #grid.jv-plp .main .filters,
  body.show-facets #grid.jv-plp .main .filters {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "grupos grupos vistas ordenar"
      "chips limpar limpar limpar";
    align-items: center;
    column-gap: var(--jv-space-4);
    row-gap: 0;
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    padding: 0;
    overflow: visible;
  }

  body #grid.jv-plp .main .products,
  body.show-facets #grid.jv-plp .main .products {
    flex: none;
    width: 100%;
    max-width: none;
  }

  body #grid.jv-plp .filters .wd-facet-group {
    display: contents;
  }

  body #grid.jv-plp .filters .wd-facet-group .loading-label {
    display: none;
  }

  body #grid.jv-plp .filters .wd-facet-group .facets {
    grid-area: grupos;
    display: flex;
    flex-direction: row; /* o CSS antigo empilha os grupos (column) */
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--jv-space-2);
    padding: 0;
  }

  body #grid.jv-plp .filters .jv-plp__vistas--pc {
    grid-area: vistas;
  }

  body #grid.jv-plp .filters .jv-plp__ordenar {
    grid-area: ordenar;
    flex: none;
    justify-self: end;
    width: auto;
  }

  body #grid.jv-plp .filters .wd-facet-group .selected-facets {
    grid-area: chips;
  }

  body #grid.jv-plp .filters .jv-plp__limpar {
    grid-area: limpar;
    justify-self: start;
    margin-top: var(--jv-space-3);
  }

  /* Cada grupo: a pílula (só o contorno fino, sem fundo: usuário, 30/10/2026; lilás quando aberta) e a lista suspensa,
     que fica com o fundo. O plp.js põe jv-aberto no grupo aberto; a classe facet-closed, da Linx, não manda mais aqui. */
  body #grid.jv-plp .filters .wd-facet-group .facet-type {
    position: relative;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--jv-space-3);
    min-height: var(--jv-touch-min);
    padding: var(--jv-space-3) var(--jv-space-5);
    border: var(--jv-border-thin) solid var(--jv-color-border);
    border-radius: var(--jv-radius-pill);
    background-color: transparent;
    color: var(--jv-color-text);
    font-family: var(--jv-font-sans);
    font-size: var(--jv-size-label);
    font-weight: var(--jv-weight-bold);
    line-height: var(--jv-leading-none);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--jv-duration-fast) var(--jv-ease), border-color var(--jv-duration-fast) var(--jv-ease);
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-title h3 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-transform: inherit;
    color: inherit;
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-title::after,
  body #grid.jv-plp .filters .wd-facet-group .facet-type .facet-title.facet-closed::after {
    content: "";
    flex: none;
    width: 0.5em;
    height: 0.5em;
    margin-top: -0.25em;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    transition: transform var(--jv-duration-fast) var(--jv-ease);
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type.jv-aberto .facet-title {
    border-color: var(--jv-color-accent);
    background-color: var(--jv-color-accent);
    color: var(--jv-color-on-accent);
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type.jv-aberto .facet-title::after,
  body #grid.jv-plp .filters .wd-facet-group .facet-type.jv-aberto .facet-title.facet-closed::after {
    margin-top: 0.25em;
    transform: rotate(225deg);
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type:not(.jv-aberto) .facet-title + ul {
    display: none;
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type.jv-aberto .facet-title + ul,
  body #grid.jv-plp .filters .wd-facet-group .facet-type.jv-aberto .facet-title.facet-closed + ul {
    display: flex;
    flex-direction: column;
    gap: var(--jv-space-2);
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 6;
    box-sizing: border-box;
    width: 15.625rem; /* 250px (Figma) */
    max-height: 24rem;
    margin: 0;
    padding: var(--jv-space-5);
    overflow: auto;
    border-radius: var(--jv-radius-sm);
    background-color: var(--jv-color-bg);
    box-shadow: var(--jv-shadow-popover);
    font-weight: var(--jv-weight-regular);
  }

  /* As opções: caixa de 24px só com o contorno, sem o branco (usuário, 30/10/2026; o CSS antigo a desenha com ::before e
     o ✓ com ::after), e o texto em 14px. */
  body #grid.jv-plp .filters .wd-facet-group .facet-type ul li [rel=facet] {
    gap: var(--jv-space-1);
    min-height: 1.5rem;
    font-family: var(--jv-font-sans);
    font-size: var(--jv-size-label);
    font-weight: var(--jv-weight-regular);
    line-height: var(--jv-leading-normal);
    color: var(--jv-color-text);
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type ul li [rel=facet] .option-title {
    flex: 1 1 auto;
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type.wd-facet-type-list:not(.colors) ul li [rel=facet]::before {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border: var(--jv-border-thin) solid var(--jv-color-border);
    border-radius: var(--jv-radius-sm);
    background-color: transparent;
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type.wd-facet-type-list:not(.colors) ul li [rel=facet]::after {
    top: 0.25rem;
    left: 0.375rem;
    color: var(--jv-color-on-brand);
    font-weight: var(--jv-weight-bold);
  }

  body #grid.jv-plp .filters .wd-facet-group .facet-type.wd-facet-type-list:not(.colors) ul li.selected [rel=facet]::before {
    border-color: var(--jv-color-brand);
    background-color: var(--jv-color-brand);
  }
}

/* 2. Grade: 2 joias por linha no celular, 3 no tablet e de 1024 a 1279px, 4 a partir de 1280px (usuário, 29/10/2026:
   "4 produtos por linha no desktop"). O lote de leilão ocupa a linha inteira no celular (seção 4). As colunas levam
   !important porque o CSS antigo força 3 colunas com !important entre 1081 e 1536px; o minmax(0, 1fr) impede que um
   cartão alargue a coluna (o "1fr" sozinho do CSS antigo deixava, e foi o caso do lote de leilão em 29/10/2026). */
body #grid.jv-plp .wd-browsing-grid .wd-browsing-grid-list .list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--jv-space-6) var(--jv-space-4);
  overflow: visible;
}

body #grid.jv-plp .wd-browsing-grid .list > li,
body #grid.jv-plp .wd-browsing-grid .list > li.swiper-slide {
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
}

/* Joia que saiu do leilão e voltou à venda normal (usuário, 30/10/2026: "Sim precisa igualar"): o cartão novo
   (Partials/jv/produto-cartao, pelo Widgets/browsing.grid.list) vem dentro do bloco .wp-product-line-fk, que o
   grid.auctions.js mostra no lugar do cartão do leilão. O bloco precisa da altura da célula para o height: 100% do
   cartão valer e o Comprar alinhar com os da fileira. */
body #grid.jv-plp .wd-browsing-grid .list > li.swiper-slide > .wp-product-line-fk {
  height: 100%;
}

@media (min-width: 48rem) {
  body #grid.jv-plp .wd-browsing-grid .wd-browsing-grid-list .list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 64rem) {
  body #grid.jv-plp .wd-browsing-grid .wd-browsing-grid-list .list {
    gap: var(--jv-space-8) var(--jv-space-5);
  }
}

@media (min-width: 80rem) {
  body #grid.jv-plp .wd-browsing-grid .wd-browsing-grid-list .list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* 3. Cartão (Partials/jv/produto-cartao; Figma "PRODUCT-CARD" 1399:6997 e "PRODUCT CARD-CATEGORY" 563:5528): foto
   quadrada com cantos de 12px, nome em até 2 linhas, as tags da joia (computador), preço e o botão. */
body #grid.jv-plp .jv-cartao {
  display: flex;
  flex-direction: column;
  height: 100%; /* os cartões da fileira ficam da mesma altura e o Comprar alinha, mesmo quando o preço quebra linha */
  border: 0;
  overflow: visible;
}

body #grid.jv-plp .jv-cartao .link-product {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

body #grid.jv-plp .jv-cartao .info {
  flex: 1 1 auto;
}

body #grid.jv-plp .jv-cartao .medias {
  display: block;
  min-height: 0;
}

body #grid.jv-plp .jv-cartao .medias figure {
  display: block;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--jv-radius-md);
  background-color: var(--jv-color-surface);
}

body #grid.jv-plp .jv-cartao .medias picture,
body #grid.jv-plp .jv-cartao .medias picture img,
body #grid.jv-plp .jv-cartao .medias figure > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
}

body #grid.jv-plp .jv-cartao .medias .second {
  position: absolute;
  top: 0;
  left: 0;
  transform: none !important; /* o CSS antigo centra a 2ª foto com translateY(-50%) !important */
}

body #grid.jv-plp .jv-cartao .name-price {
  flex: 0 0 auto;
  gap: var(--jv-space-2);
}

/* O nome inteiro, cortado em 2 linhas com reticências (usuário, 29/10/2026: "título tem um limitante que só aparece as
   2 primeiras linhas"); a altura mínima de 2 linhas alinha os cartões da mesma fileira. No celular, a linha fina
   embaixo do nome, como no Figma; no computador, sem linha. */
body #grid.jv-plp .jv-cartao .info h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  flex: 0 0 auto; /* o CSS antigo dá flex-basis: 60% ao h3 no computador; com os cartões da mesma altura, isso virava 60% do bloco e mostrava 4 linhas */
  box-sizing: content-box;
  min-height: calc(2 * var(--jv-leading-heading) * 1em);
  margin: var(--jv-space-3) 0 0;
  padding: 0; /* sem respiro: o corte em 2 linhas deixava o começo da 3ª aparecer no padding (usuário, 29/10/2026) */
  border: 0;
  overflow: hidden;
  font-family: var(--jv-font-sans);
  font-size: var(--jv-size-label); /* 14px nas grades (usuário, 29/10/2026); no resto do site o texto corrido é 16 */
  font-weight: var(--jv-weight-regular);
  line-height: var(--jv-leading-heading);
  text-align: left;
  color: var(--jv-color-text);
}

body #grid.jv-plp .jv-cartao .jv-pdp-tags {
  display: none;
}

/* Preço no estilo da PDP (usuário, 30/10/2026: no Figma o "De" e o "12x" ficavam parecidos demais), sem o cashback:
   o widget da Linx (ProductPrice) vira só os pedaços (display: contents) e cada um entra na sua linha: "De" riscado em
   cinza (com o selo "10% OFF" ao lado, no computador), "12x R$" em roxo e maior, e "Ou R$ X à vista". */
body #grid.jv-plp .jv-cartao .price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jv-space-1) var(--jv-space-2);
  min-height: 0;
  margin: 0;
  padding-top: var(--jv-space-2);
  border-top: var(--jv-border-thin) solid var(--jv-color-border); /* a linha fina do Figma do celular, abaixo do nome */
}

body #grid.jv-plp .jv-cartao .price .wd-product-price-description,
body #grid.jv-plp .jv-cartao .price .priceContainer {
  display: contents;
}

body #grid.jv-plp .jv-cartao .price .priceContainer > meta,
body #grid.jv-plp .jv-cartao .price .discount,
body #grid.jv-plp .jv-cartao .price .condition .label,
body #grid.jv-plp .jv-cartao .price .condition em,
body #grid.jv-plp .jv-cartao .price .sale-price .prefix {
  display: none;
}

body #grid.jv-plp .jv-cartao .price .cash-price,
body #grid.jv-plp .jv-cartao .price .savings {
  display: none !important; /* o CSS antigo também os esconde, com !important */
}

body #grid.jv-plp .jv-cartao .price .list-price {
  order: 1;
  flex: 0 0 100%;
  margin: 0;
  font-family: var(--jv-font-sans);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-regular);
  line-height: var(--jv-leading-tight);
  color: var(--jv-color-price-old);
  text-decoration: line-through;
}

body #grid.jv-plp .jv-cartao .price .list-price .prefix {
  display: inline;
  font-style: normal;
}

body #grid.jv-plp .jv-cartao .price .condition {
  order: 2;
  flex: 0 0 100%;
  margin: 0;
  font-family: var(--jv-font-sans);
  font-size: var(--jv-size-body); /* 16: o Figma do celular tem 20, mas o usuário pediu textos menores nas grades (29/10/2026) */
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-tight);
  color: var(--jv-color-price);
}

body #grid.jv-plp .jv-cartao .price .condition .parcels {
  margin-right: 0.25em;
}

body #grid.jv-plp .jv-cartao .price .jv-cartao__off {
  order: 3;
  display: none;
  padding: var(--jv-space-1) var(--jv-space-2);
  border-radius: var(--jv-radius-sm);
  background-color: var(--jv-color-accent);
  color: var(--jv-color-on-accent);
  font-family: var(--jv-font-sans);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-tight);
  text-transform: uppercase;
  white-space: nowrap;
}

body #grid.jv-plp .jv-cartao .price .jv-cartao__quebra {
  display: none; /* o "12x" e o "Ou R$ X à vista" já têm cada um a própria linha (30/10/2026) */
}

body #grid.jv-plp .jv-cartao .price .jv-cartao__boleto,
body #grid.jv-plp .jv-cartao .price .sale-price svg {
  display: none; /* sem os ícones do boleto e do PIX (usuário, 29/10/2026: página menos carregada) */
}

body #grid.jv-plp .jv-cartao .price .sale-price {
  order: 6;
  flex: 0 0 100%;
  display: block;
  margin: 0;
  font-family: var(--jv-font-sans);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-regular);
  line-height: var(--jv-leading-tight);
  color: var(--jv-color-text);
}

body #grid.jv-plp .jv-cartao .price .sale-price span::before {
  content: "Ou ";
}

body #grid.jv-plp .jv-cartao .price .sale-price span::after {
  content: " à\00a0vista"; /* como na PDP (usuário, 30/10/2026); o espaço fixo não deixa o "vista" ir sozinho para a linha de baixo no cartão estreito do celular */
}

body #grid.jv-plp .jv-cartao .bottom {
  margin-top: auto;
  padding-top: var(--jv-space-3);
}

body #grid.jv-plp .jv-cartao .bottom .add-to-cart,
body #grid.jv-plp .jv-cartao .bottom .product-unavailable {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: var(--jv-touch-min);
  padding: var(--jv-space-3) var(--jv-space-5);
  border: 0;
  border-radius: var(--jv-radius-pill);
  background-color: var(--jv-color-action);
  color: var(--jv-color-on-action);
  font-family: var(--jv-font-sans);
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-none);
  text-transform: uppercase;
}

body #grid.jv-plp .jv-cartao .bottom .product-unavailable {
  background-color: var(--jv-color-surface-alt);
  color: var(--jv-color-text-muted-on-alt);
}

/* Computador (usuário, 30/10/2026): os textos do cartão voltam a 16px e o nome fica em 1 linha (no celular seguem 14px
   e 2 linhas); o preço como o da PDP: "De" de 14px com o selo ao lado, "12x R$" em 24px, "Ou R$ X à vista" em 16px. */
@media (min-width: 64rem) {
  body #grid.jv-plp .jv-cartao .flag-discount {
    display: none; /* no computador o desconto fica no selo ao lado do preço */
  }

  body #grid.jv-plp .jv-cartao .info h3 {
    -webkit-line-clamp: 1;
    min-height: calc(var(--jv-leading-heading) * 1em);
    font-size: var(--jv-size-body);
  }

  body #grid.jv-plp .jv-cartao .price {
    gap: var(--jv-space-2);
    padding-top: 0;
    border-top: 0;
  }

  body #grid.jv-plp .jv-cartao .jv-pdp-tags {
    display: flex;
    gap: var(--jv-space-1);
  }

  body #grid.jv-plp .jv-cartao .price .list-price {
    flex: 0 0 auto;
  }

  body #grid.jv-plp .jv-cartao .price .jv-cartao__off {
    order: 1;
    display: inline-flex;
    padding: var(--jv-space-1) var(--jv-space-2);
    line-height: var(--jv-leading-none);
  }

  body #grid.jv-plp .jv-cartao .price .condition {
    font-size: var(--jv-text-2xl); /* 24 (na PDP, 28) */
  }

  body #grid.jv-plp .jv-cartao .price .sale-price {
    font-size: var(--jv-size-body);
  }
}

/* 3b. Celular (usuário, 29/10/2026): sem o botão Comprar no cartão (o cartão inteiro leva à joia), e as três vistas da
   linha de botões: 3 por linha só com as fotos (também o lote, só a foto com o martelo), 2 por linha (padrão) e 1 por
   linha, com a foto na largura toda. */
@media (max-width: 63.98rem) {
  body #grid.jv-plp .jv-cartao .bottom {
    display: none;
  }

  body #grid.jv-plp[data-jv-vista="3"] .wd-browsing-grid .wd-browsing-grid-list .list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--jv-space-2);
  }

  body #grid.jv-plp[data-jv-vista="3"] .jv-cartao .info {
    display: none;
  }

  body #grid.jv-plp[data-jv-vista="3"] .wd-browsing-grid .list > li.swiper-slide {
    grid-column: auto;
  }

  body #grid.jv-plp[data-jv-vista="3"] .jv-leilao-cartao.auction-in-grid {
    display: block;
  }

  body #grid.jv-plp[data-jv-vista="3"] .jv-leilao-cartao.auction-in-grid > :not(.jv-leilao-cartao__foto) {
    display: none;
  }

  body #grid.jv-plp[data-jv-vista="1"] .wd-browsing-grid .wd-browsing-grid-list .list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 64rem) {
  body #grid.jv-plp .jv-plp__vista {
    display: none; /* a linha "N produtos" + vistas é do celular; no computador os botões ficam na barra de filtros */
  }
}

/* 3d. A escolha da vista no computador (usuário, 30/10/2026: "aplicar no desktop tb aquele esquema de visualização"),
   com os botões ao lado do "Organizar por" (Pages/grid, .jv-plp__vistas--pc) e os mesmos valores do celular:
   3 = só as fotos, mais por linha (5 de 1024 a 1279px, 6 a partir de 1280); 2 = o padrão (3 e 4 por linha);
   1 = maiores (2 e 3 por linha). O lote de leilão segue em pé, e com só as fotos fica só a foto com o martelo. */
@media (min-width: 64rem) {
  body #grid.jv-plp[data-jv-vista="3"] .wd-browsing-grid .wd-browsing-grid-list .list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: var(--jv-space-4);
  }

  body #grid.jv-plp[data-jv-vista="1"] .wd-browsing-grid .wd-browsing-grid-list .list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #grid.jv-plp[data-jv-vista="3"] .jv-cartao .info,
  body #grid.jv-plp[data-jv-vista="3"] .jv-cartao .bottom {
    display: none;
  }

  body #grid.jv-plp[data-jv-vista="3"] .jv-leilao-cartao.auction-in-grid > :not(.jv-leilao-cartao__foto) {
    display: none;
  }

  body #grid.jv-plp[data-jv-vista="3"] .jv-leilao-cartao .jv-leilao-cartao__martelo {
    width: 2.25rem;
    height: 2.25rem;
  }
}

@media (min-width: 80rem) {
  body #grid.jv-plp[data-jv-vista="3"] .wd-browsing-grid .wd-browsing-grid-list .list {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  body #grid.jv-plp[data-jv-vista="1"] .wd-browsing-grid .wd-browsing-grid-list .list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 3c. Selos sobre a foto, no celular (usuário, 29/10/2026: "as tags de desconto e leilão estão muito grandes. Tampando
   quase toda a joia"): o selo de desconto (85 × 32px no CSS antigo) vai a 56px com 2 por linha e a 72px com 1; o
   martelo do lote (54px) vai a 36px, e a 28px com 3 por linha, onde o selo de desconto some (só as fotos). */
@media (max-width: 63.98rem) {
  body #grid.jv-plp .jv-cartao .flag-discount {
    top: var(--jv-space-2);
    left: var(--jv-space-2);
  }

  body #grid.jv-plp .jv-cartao .flag-discount img {
    display: block;
    width: 3.5rem;
    height: auto;
  }

  body #grid.jv-plp .jv-cartao .flag-discount span {
    right: 0.375rem;
    font-size: 0.6875rem; /* 11 */
  }

  body #grid.jv-plp[data-jv-vista="1"] .jv-cartao .flag-discount img {
    width: 4.5rem;
  }

  body #grid.jv-plp[data-jv-vista="1"] .jv-cartao .flag-discount span {
    right: 0.5rem;
    font-size: var(--jv-size-label);
  }

  body #grid.jv-plp[data-jv-vista="3"] .jv-cartao .flag-discount {
    display: none;
  }

  body #grid.jv-plp .jv-leilao-cartao .jv-leilao-cartao__martelo {
    top: var(--jv-space-2);
    left: var(--jv-space-2);
    width: 2.25rem;
    height: 2.25rem;
  }

  body #grid.jv-plp[data-jv-vista="3"] .jv-leilao-cartao .jv-leilao-cartao__martelo {
    width: 1.75rem;
    height: 1.75rem;
  }

  body #grid.jv-plp .jv-leilao-cartao .jv-leilao-cartao__nome {
    font-size: var(--jv-size-label); /* como o nome dos outros cartões das grades */
  }
}

/* 4. Lote de leilão na grade do celular (Figma "LEILAO-CATEGORY-INPUT" 589:4085; usuário, 29/10/2026: "se for leilão
   ele ocupa toda uma linha como no print"; depois, à noite: "O formato de visualização conseguimos aplicar nas joias de
   leilão?"): o lote segue a vista escolhida. Com 2 ou 1 por linha, deita na linha inteira (usuário, 30/10/2026: "os itens de
   leilão seguem em uma linha no grid 2x e no 1x"): foto à esquerda, nome e a caixa do gatilho à direita, e embaixo
   "Dê seu lance", o campo e, na largura toda, o botão ("Fazer login" ou "Dar lance", o mesmo botão, que o usuário quis
   embaixo). Com 3 por linha, só a foto (seção 3b). O .bid e o .jv-lance viram só os pedaços (display: contents) para cada um achar a própria área
   da grade. No computador o cartão continua em pé. */
@media (max-width: 63.98rem) {
  /* O item de leilão ocupa a linha inteira, menos quando a joia saiu do leilão e voltou à venda normal (usuário,
     30/10/2026, com print da loja: "produtos que eram do leilão e voltaram a ser produtos normais estão pegando uma linha
     inteira... mas o leilão que está encerrado e está mostrando o vencedor deve sim ficar em uma linha"). É o mesmo <li>
     nos três casos: o grid.auctions.js lê leilao/{id}.json quando o cartão entra na tela e, se ainda está dentro do
     VisibleTo, grava data-is-executing ("true" aberto, "false" encerrado com vencedor) e mostra o cartão do leilão; se
     não, esconde o cartão, mostra a .wp-product-line-fk (joia comum), marca o cartão com loaded-in-grid e deixa o estado
     vazio. Antes de o estado chegar, o cartão continua deitado na linha inteira, sem pular de tamanho. */
  body #grid.jv-plp:not([data-jv-vista="3"]) .wd-browsing-grid .list > li.swiper-slide {
    grid-column: 1 / -1;
  }

  body #grid.jv-plp:not([data-jv-vista="3"]) .wd-browsing-grid .list > li.swiper-slide:has(.jv-leilao-cartao.auction-in-grid.loaded-in-grid:not([data-is-executing="true"]):not([data-is-executing="false"])) {
    grid-column: auto;
  }

  body #grid.jv-plp:not([data-jv-vista="3"]) .jv-leilao-cartao.auction-in-grid {
    display: grid;
    grid-template-columns: minmax(8.5rem, 42%) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto auto;
    grid-template-areas:
      "foto nome"
      "foto gatilho"
      "foto sobra"
      "titulo titulo"
      "campo campo"
      "mensagem mensagem"
      "botao botao"
      "vencedor vencedor";
    align-items: start;
    column-gap: var(--jv-space-4);
    row-gap: 0;
  }

  body #grid.jv-plp:not([data-jv-vista="3"]) .jv-leilao-cartao.auction-in-grid .jv-leilao-cartao__foto {
    grid-area: foto;
  }

  body #grid.jv-plp:not([data-jv-vista="3"]) .jv-leilao-cartao.auction-in-grid .jv-leilao-cartao__nome {
    grid-area: nome;
    margin-top: 0;
  }

  body #grid.jv-plp:not([data-jv-vista="3"]) .jv-leilao-cartao.auction-in-grid .jv-leilao-cartao__lance,
  body #grid.jv-plp:not([data-jv-vista="3"]) .jv-leilao-cartao.auction-in-grid .jv-lance {
    display: contents;
  }

  body #grid.jv-plp:not([data-jv-vista="3"]) .jv-leilao-cartao.auction-in-grid:not([data-is-executing="true"]) .jv-leilao-cartao__lance {
    display: none; /* a regra 11 do leilao-lance.css: sem o estado do lote, nada do lance aparece */
  }

  body #grid.jv-plp:not([data-jv-vista="3"]) .jv-leilao-cartao.auction-in-grid .jv-lance__titulo {
    grid-area: titulo;
    margin: var(--jv-space-4) 0 var(--jv-space-2);
    text-align: center; /* alinhado ao valor, que fica no centro do campo (usuário, 30/10/2026: "alinhar as informações do leilão") */
  }

  body #grid.jv-plp:not([data-jv-vista="3"]) .jv-leilao-cartao.auction-in-grid .jv-lance__campo {
    grid-area: campo;
    justify-content: flex-start;
    margin-bottom: 0;
  }

  body #grid.jv-plp:not([data-jv-vista="3"]) .jv-leilao-cartao.auction-in-grid .jv-lance__mensagem {
    grid-area: mensagem;
    justify-self: center; /* a caixa ("Faça login para dar um lance.") tem a largura do texto; no bloco normal ela centra
                             pelo align-self do flex em coluna, mas aqui o .jv-lance é display: contents e a caixa vira
                             item desta grade, onde o eixo horizontal é o justify (usuário, 30/10/2026, com foto da loja:
                             "a informação dos lances precisa centralizar ao centro na plp"; a caixa ficava 62px à
                             esquerda do centro a 412px). */
    margin-top: var(--jv-space-2);
    text-align: center;
  }

  body #grid.jv-plp:not([data-jv-vista="3"]) .jv-leilao-cartao.auction-in-grid .jv-lance__botao {
    grid-area: botao;
    width: 100%;
    max-width: none;
    margin: var(--jv-space-3) 0 0;
  }

  body #grid.jv-plp:not([data-jv-vista="3"]) .jv-leilao-cartao.auction-in-grid .jv-leilao-gatilho {
    grid-area: gatilho;
    justify-content: flex-start;
    margin-top: var(--jv-space-2);
    padding: var(--jv-space-2) var(--jv-space-3);
    text-align: left;
  }

  body #grid.jv-plp:not([data-jv-vista="3"]) .jv-leilao-cartao.auction-in-grid .jv-leilao-gatilho__texto {
    flex: 1 1 auto;
    width: auto !important; /* o leilao-lance.js estreita a frase até a linha mais longa (inline); deitado, ela ocupa a coluna */
    text-align: left;
  }

  body #grid.jv-plp:not([data-jv-vista="3"]) .jv-leilao-cartao.auction-in-grid .jv-leilao-vencedor {
    grid-area: vencedor;
  }
}

/* No computador o lote fica em pé, como os outros cartões da fileira: o nome em 1 linha e o "Dê seu lance" logo
   embaixo dele (usuário, 30/10/2026: "diminuir o gap entre o titulo da peça e o Dê seu lance"). */
@media (min-width: 64rem) {
  body #grid.jv-plp .jv-leilao-cartao.auction-in-grid .jv-leilao-cartao__nome {
    -webkit-line-clamp: 1;
    min-height: calc(1.25 * 1em);
  }

  body #grid.jv-plp .jv-leilao-cartao.auction-in-grid .jv-lance__titulo {
    margin-top: var(--jv-space-2);
  }
}

/* 5. "Organizar por" (#sorter-fk, do Widgets/browsing.grid.sorter), fora do widget da grade: a pílula verde da seção 1
   e a lista roxa embaixo, aberta pelo Scripts/grid.js com body.show-sort. */
body #grid.jv-plp #sorter-fk {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2; /* acima dos cartões e do selo de desconto (z-index 1 no CSS antigo: com 1 aqui o selo passava por cima da lista; usuário, 30/10/2026); abaixo do topo fixo (z-index 4, topo.css) e do painel de filtros do celular (10) */
  width: 100%;
  font-size: var(--jv-size-label);
}

@media (max-width: 63.98rem) {
  body.show-facets #grid.jv-plp #sorter-fk {
    visibility: hidden; /* com o painel de filtros aberto no celular, o botão aparecia por cima dele; só no celular, porque no computador o body também leva show-facets e o "Organizar por" sumia (30/10/2026) */
  }
}

body #grid.jv-plp #sorter-fk label {
  display: block;
}

/* Com uma ordem escolhida (fora a padrão da página), o botão vira a pílula lilás do Figma com o ícone e o nome da ordem,
   mas com texto e ícone pretos (usuário, 30/10/2026). O plp.js põe jv-ordenar--escolhido no #sorter-fk, troca o texto e
   copia o ícone da lista; os ícones do Shared/Svg são brancos, e o filtro os pinta de preto. */
body #grid.jv-plp #sorter-fk.jv-ordenar--escolhido .jv-ordenar__botao {
  border-color: var(--jv-color-accent);
  background-color: var(--jv-color-accent);
  color: var(--jv-color-on-accent);
}

body #grid.jv-plp #sorter-fk.jv-ordenar--escolhido .jv-ordenar__icone {
  display: none;
}

body #grid.jv-plp .jv-ordenar__icone-escolhido {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  filter: brightness(0);
}

body #grid.jv-plp .jv-ordenar__botao > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis; /* no celular, "Maiores descontos" divide a linha com o "Filtrar por" */
}

/* Celular com uma ordem escolhida: o "Filtrar por" fica do tamanho do texto, o nome da ordem ganha o resto da linha, e
   as duas pílulas ficam em 12px com menos respiro, para "Maiores descontos" caber inteiro com o ícone nos 328px da
   tela de 360 (medido em 30/10/2026: em 14px faltavam 40px). */
@media (max-width: 63.98rem) {
  body #grid.jv-plp .filters-total:has(.jv-ordenar--escolhido) .open-facets {
    flex: 0 0 auto;
  }

  body #grid.jv-plp .filters-total:has(.jv-ordenar--escolhido) .open-facets,
  body #grid.jv-plp .filters-total:has(.jv-ordenar--escolhido) .jv-ordenar__botao {
    padding-left: var(--jv-space-2);
    padding-right: var(--jv-space-2);
    font-size: var(--jv-text-xs); /* 12 */
  }
}

body #grid.jv-plp #sorter-fk ul {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  margin: 0;
  padding: var(--jv-space-2) 0;
  border-radius: var(--jv-radius-sm);
  background-color: var(--jv-color-brand);
  color: var(--jv-color-on-brand);
  box-shadow: var(--jv-shadow-popover);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--jv-duration-fast) var(--jv-ease), visibility var(--jv-duration-fast) var(--jv-ease);
}

body.show-sort #grid.jv-plp #sorter-fk ul {
  opacity: 1;
  visibility: visible;
}

body #grid.jv-plp #sorter-fk ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jv-space-2);
  padding: var(--jv-space-2) var(--jv-space-3);
  color: inherit;
  font-weight: var(--jv-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}

body #grid.jv-plp #sorter-fk ul li a img {
  width: 1.25rem;
}

body #grid.jv-plp #sorter-fk ul li.selected a,
body #grid.jv-plp #sorter-fk ul li a:hover {
  background-color: var(--jv-color-accent);
  color: var(--jv-color-on-accent);
}

/* Na linha escolhida e na linha sob o mouse (lilás, texto preto) o ícone também fica preto (usuário, 30/10/2026); os
   ícones do Shared/Svg são brancos. */
body #grid.jv-plp #sorter-fk ul li.selected a img,
body #grid.jv-plp #sorter-fk ul li a:hover img {
  filter: brightness(0);
}

@media (min-width: 64rem) {
  body #grid.jv-plp #sorter-fk {
    width: auto;
    min-width: 12rem;
  }

  body #grid.jv-plp .jv-ordenar__botao {
    flex: none;
    padding: var(--jv-space-3) var(--jv-space-5);
  }
}

/* 6. Texto SEO da categoria (Figma 002-CATEGORY: "Texto SEO da Categoria" em Playfair roxo centrado, o texto em 16px
   e as perguntas em acordeão de 43px com contorno fino e cantos de 21px, numa coluna de 950px; usuário, 29/10/2026:
   "faltou fazer a parte de SEO"). O HTML vem do painel, colado do Google Docs com estilos em linha (Arial 11pt,
   cor preta, white-space: pre-wrap), e o CSS antigo já forçava 16px Sora em tudo com !important: por isso os
   !important daqui. As classes jv-seo__* vêm do Scripts/jv/plp.js. */
body #grid.jv-plp .more-description {
  box-sizing: border-box;
  width: 100%;
  max-width: 59.375rem; /* 950px (Figma) */
  margin: var(--jv-space-8) auto;
}

body #grid.jv-plp .more-description * {
  color: inherit !important;
  font-family: inherit !important;
  background: transparent !important;
  white-space: normal !important;
  text-decoration: none !important;
}

body #grid.jv-plp .more-description :is(h1, h2, h3, h4, h5, h6, p, li, summary) * {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

body #grid.jv-plp .more-description p,
body #grid.jv-plp .more-description li {
  margin: 0 0 var(--jv-space-4) !important;
  font-family: var(--jv-font-sans) !important;
  font-size: var(--jv-size-body) !important;
  font-weight: var(--jv-weight-regular) !important;
  line-height: var(--jv-leading-normal) !important;
  color: var(--jv-color-text) !important;
}

body #grid.jv-plp .more-description a {
  color: var(--jv-color-brand) !important;
  text-decoration: underline !important;
}

body #grid.jv-plp .more-description :is(h1, h2, h3, h4, h5, h6) {
  margin: var(--jv-space-6) 0 var(--jv-space-3) !important;
  font-family: var(--jv-font-sans) !important;
  font-size: var(--jv-text-lg) !important;
  font-weight: var(--jv-weight-bold) !important;
  line-height: var(--jv-leading-heading) !important;
  color: var(--jv-color-text) !important;
}

body #grid.jv-plp .more-description .jv-seo__titulo {
  margin: 0 0 var(--jv-space-5) !important;
  font-family: var(--jv-font-display) !important;
  font-size: var(--jv-size-heading) !important;
  line-height: var(--jv-leading-none) !important;
  text-align: center;
  color: var(--jv-color-brand) !important;
}

body #grid.jv-plp .more-description .jv-seo__faq {
  display: flex;
  flex-direction: column;
  gap: var(--jv-space-1);
  margin: var(--jv-space-4) 0 var(--jv-space-6);
}

body #grid.jv-plp .more-description .jv-seo__item {
  margin: 0;
  padding: 0 var(--jv-space-4);
  border: var(--jv-border-thin) solid var(--jv-color-border);
  border-radius: 1.3125rem; /* 21px (Figma) */
}

body #grid.jv-plp .more-description .jv-seo__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jv-space-4);
  min-height: 2.6875rem; /* 43px (Figma) */
  padding: var(--jv-space-3) 0;
  font-family: var(--jv-font-sans) !important;
  font-size: var(--jv-size-label) !important;
  font-weight: var(--jv-weight-bold) !important;
  line-height: var(--jv-leading-heading) !important;
  color: var(--jv-color-text) !important;
  list-style: none;
  cursor: pointer;
}

body #grid.jv-plp .more-description .jv-seo__pergunta::-webkit-details-marker {
  display: none;
}

body #grid.jv-plp .more-description .jv-seo__pergunta::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem 0.25rem 0 0;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform var(--jv-duration-fast) var(--jv-ease);
}

body #grid.jv-plp .more-description .jv-seo__item[open] .jv-seo__pergunta::after {
  margin-top: 0.25rem;
  transform: rotate(225deg);
}

body #grid.jv-plp .more-description .jv-seo__resposta {
  padding: 0 0 var(--jv-space-3);
}

body #grid.jv-plp .more-description .jv-seo__resposta > :last-child {
  margin-bottom: 0 !important;
}

@media (min-width: 64rem) {
  body #grid.jv-plp .more-description .jv-seo__titulo {
    font-size: 2.25rem !important; /* 36 (Figma) */
  }
}

/* 7. Banner da categoria (Partials/Banners/category, posição 71 no computador e 72 no celular; usuário, 30/10/2026:
   "diminuir o banner da página, deixar bem curto"): a foto vira uma faixa baixa, cortada pelo meio (object-fit), e o
   nome da categoria e a frase, que são HTML sobre a foto (.header-default), ficam menores e no meio da faixa. Era
   284px no computador (1920 × 380 na largura da tela) e 251px no celular (430 × 300). O banner interno (posições 78 e
   79, Partials/Banners/banner.internal) usa a mesma classe, mas fica dentro do #content-wrapper e não tem o
   .header-default: por isso o :has. Em 30/10/2026 só o /joias tinha banner. */
body .banner-category:has(.header-default) .list > li,
body .banner-category:has(.header-default) .wp {
  width: 100%; /* a lista centra o item pela largura da foto; com a foto mais baixa, ela encolheria junto */
}

body .banner-category:has(.header-default) .wp > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 9rem; /* 144 */
  object-fit: cover;
  object-position: center;
}

body.grid-products .banner-category:has(.header-default) .header-default,
body.grid-empty .banner-category:has(.header-default) .header-default {
  bottom: var(--jv-space-3);
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 63.98rem) {
  body.grid-products .banner-category:has(.header-default) .header-default > div,
  body.grid-empty .banner-category:has(.header-default) .header-default > div {
    gap: var(--jv-space-1); /* no celular o nome e a frase ficam um embaixo do outro, e o "J" encostava na frase; no computador fica o espaço do CSS antigo (3rem) */
  }
}

body.grid-products .banner-category:has(.header-default) .header-default h1,
body.grid-empty .banner-category:has(.header-default) .header-default h1 {
  font-size: 2.5rem; /* 40 (era 48) */
}

body.grid-products .banner-category:has(.header-default) .header-default span,
body.grid-empty .banner-category:has(.header-default) .header-default span {
  font-size: var(--jv-size-label);
  line-height: var(--jv-leading-heading);
}

@media (min-width: 64rem) {
  body .banner-category:has(.header-default) .wp > img {
    height: 10rem; /* 160 */
  }

  body.grid-products .banner-category:has(.header-default) .header-default,
  body.grid-empty .banner-category:has(.header-default) .header-default {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
  }

  body.grid-products .banner-category:has(.header-default) .header-default h1,
  body.grid-empty .banner-category:has(.header-default) .header-default h1 {
    font-size: 4rem; /* 64 (era 96) */
  }

  body.grid-products .banner-category:has(.header-default) .header-default span,
  body.grid-empty .banner-category:has(.header-default) .header-default span {
    font-size: var(--jv-size-body);
  }
}