/* ==========================================================================
   Cristal Lifewear — loja
   Só as páginas da loja carregam esta folha (front matter `estilos`).
   Vem depois de site.css; os tokens estão todos em tokens.css.
   Referência visual: loja-mvp/mockups/peca.html.

   Texto pequeno fica em --text-muted (#6F6261), não no #9C8E8D do mockup:
   aquele cinza dá ~3:1 sobre o fundo, e o mínimo para texto é 4.5:1.
   ========================================================================== */

/* O atributo hidden precisa vencer o display dos componentes (.btn é flex):
   é ele que o script usa para mostrar e esconder partes da compra. */
.peca [hidden] { display: none !important; }

/* --- Topo: voltar e migalha --------------------------------------------- */
/* A página da peça é mais estreita que o resto do site (--container, 1400px).
   Com 1400 a foto ficava com 620px e a coluna de compra com 708 — o trilho de
   compra mais largo que a peça à venda, botões de 700px e o nome perdido numa
   linha enorme. Em 1180 a foto lidera e a compra vira um trilho de ~440, que é
   onde os controles têm o tamanho certo. O topo usa a MESMA medida, senão a
   migalha começaria 110px à esquerda da foto. */
.peca,
.peca__topo { --peca-conteudo: 1180px; }

.peca__topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  max-width: var(--peca-conteudo);
  margin-inline: auto;
  padding: 20px var(--gutter) 0;
  box-sizing: content-box;
}

/* O "Voltar" é botão, não link de texto: é a saída da página e precisa ser
   vista de longe. A seta anda para a esquerda no hover — o único movimento
   deste bloco, e ele diz para onde o clique leva. */
.peca__voltar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 18px 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--lotus-0);
  font-size: var(--fs-caption);
  color: var(--text-body);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-base) var(--ease-soft),
              color var(--dur-base) var(--ease-soft);
}
.peca__voltar:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.peca__voltar:focus-visible { border-radius: var(--radius-pill); }
.peca__voltar svg {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform var(--dur-base) var(--ease-soft);
}
.peca__voltar:hover svg { transform: translateX(-3px); }

/* --- Migalha ------------------------------------------------------------ */
/* Só a página da peça usa. A largura e o recuo são do .peca__topo, que é quem
   segura a linha inteira. */

.migalha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
/* Mesma ideia do rodapé: área de toque maior, layout igual (ver site.css). */
.migalha a {
  display: inline-flex;
  align-items: center;
  padding: 6px 5px;
  margin: -6px -5px;
  color: var(--ink-700);
}
.migalha a:hover { color: var(--accent-primary); }
.migalha svg { width: 12px; height: 8px; flex: none; opacity: .6; }
/* O nome da peça fecha a linha e não precisa competir: é o <h1> logo abaixo
   que o diz em tamanho grande. Numa tela estreita ele corta em vez de empurrar
   a linha inteira para baixo. */
.migalha [aria-current] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A página tem o botão grande "Comprar pelo WhatsApp" dentro da coluna de
   compra. O botão flutuante repetia o mesmo caminho e, no celular, ficava
   parado em cima da descrição e da nota de estoque. Some só aqui. */
body:has(.peca) .wa-float { display: none; }

/* --- Estrutura da peça -------------------------------------------------- */

.peca {
  padding: clamp(16px, 2.2vw, 26px) var(--gutter) clamp(72px, 9vw, 112px);
}
/* 1.5fr / 1fr, não larguras fixas: entre 900 e 1180px as duas colunas
   encolhem juntas e a foto continua sendo a maior das duas. */
.peca__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 4.5vw, 72px);
  max-width: var(--peca-conteudo);
  margin-inline: auto;
}

/* --- Galeria ------------------------------------------------------------ */
/* Todas as fotos numa faixa com rolagem lateral e encaixe: no celular é o
   gesto de deslizar, no computador as setas e as miniaturas levam até cada
   uma. Sem JavaScript a faixa continua rolável e as miniaturas são âncoras. */

.peca__galeria {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.peca__palco { position: relative; }

/* 4/5 é a proporção em que as fotos são tiradas. A faixa tinha altura fixa de
   660px: numa coluna de 620 isso dava uma caixa quase quadrada, e o
   `object-fit: cover` descartava um quinto da foto pelo topo e pela base —
   justamente o rosto e a barra da peça. (O card da vitrine já tinha sido
   corrigido assim; a página da peça, que é onde a foto importa mais, tinha
   ficado para trás.)
   Foto reta, sem o arco, como os cards da loja e das novidades (out/2026). */
.peca__fotos {
  display: flex;
  aspect-ratio: 4 / 5;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: var(--rosa-200);
}
.peca__fotos::-webkit-scrollbar { display: none; }
.peca__fotos:focus-visible { box-shadow: var(--shadow-focus); }

.peca__foto {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 100%;
}
.peca__foto[hidden] { display: none; }
.peca__foto picture,
.peca__foto img,
.peca__foto .img-empty {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Setas de passar foto — sobre a faixa, nas laterais. O fundo translúcido
   com desfoque deixa a foto aparecer por baixo sem que o ícone se perca nela,
   seja a foto clara ou escura. */
.peca__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: var(--blur-veil);
  -webkit-backdrop-filter: var(--blur-veil);
  color: var(--ink-900);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              opacity var(--dur-base) var(--ease-soft);
}
.peca__seta[hidden] { display: none; }
.peca__seta--antes  { left: 18px; }
.peca__seta--depois { right: 18px; }
.peca__seta svg { width: 20px; height: 20px; }
.peca__seta:hover { background: var(--lotus-0); border-color: var(--lotus-0); }
.peca__seta:focus-visible { border-radius: var(--radius-pill); box-shadow: var(--shadow-focus); }
/* Na primeira e na última foto a seta correspondente apaga em vez de sumir:
   um botão que desaparece muda o desenho da moldura a cada foto. */
.peca__seta:disabled {
  opacity: .3;
  cursor: default;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* As miniaturas eram uma grade de 4 colunas: com três fotos elas esticavam até
   140px cada e ficavam encostadas na esquerda, pedindo mais atenção que a foto
   grande. Agora têm largura própria — três ou oito, a fila só cresce. E são
   4/5 como a foto grande: um quadrado mostrava um recorte diferente do que o
   clique ia abrir. */
.peca__miniaturas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.peca__miniaturas[hidden] { display: none; }
.peca__miniatura {
  display: block;
  width: 78px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--rosa-200);
  opacity: .5;
  transition: opacity var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft);
}
.peca__miniatura:hover { opacity: .8; }
.peca__miniatura[aria-current="true"] { opacity: 1; border-color: var(--accent-primary); }
.peca__miniatura:focus-visible { border-radius: var(--radius-sm); opacity: 1; }
.peca__miniatura picture,
.peca__miniatura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Informação --------------------------------------------------------- */
/* Três grupos, nesta ordem de leitura: quem é a peça (nome, preço, descrição),
   o que escolher (tamanho, quantidade, os dois botões) e o que está incluído.
   Entre grupos, 30px e um fio; dentro deles, de 10 a 14px. Antes era 26px em
   tudo, do nome ao rodapé — o mesmo intervalo entre coisas que se explicam e
   coisas que não têm nada a ver uma com a outra, e nenhum ponto de descanso. */

.peca__info {
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 0;
}
/* Aqui havia um `position: sticky` para a coluna acompanhar a rolagem. Saiu
   depois de medido: um elemento grudado só anda dentro da área de grade dele,
   e com a foto em 4/5 as duas colunas ficaram quase da mesma altura (946 e
   845px a 1440) — o curso inteiro do grude dava 101px. Era uma media query,
   uma trava de altura de janela e a altura do cabeçalho virando constante de
   CSS em troca de meio rolar de mouse. O vazio que ele ia resolver deixou de
   existir quando a foto cresceu. */

.peca__cabeca {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.peca__nome {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.125rem, 2.9vw, 2.875rem);
  line-height: 1.06;
  letter-spacing: -0.008em;
  text-wrap: balance;
  color: var(--text-heading);
}
.peca__descricao { margin-top: 10px; }
.peca__descricao p {
  margin: 0 0 .75em;
  max-width: 46ch;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.peca__descricao p:last-child { margin-bottom: 0; }
/* Lista e negrito vêm do editor da Yampi (o texto é limpo no build). */
.peca__descricao ul,
.peca__descricao ol {
  margin: 0 0 .75em;
  padding-left: 1.2em;
  max-width: 46ch;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.peca__descricao :is(ul, ol):last-child { margin-bottom: 0; }
.peca__descricao :is(strong, b),
.peca__detalhe :is(strong, b) { font-weight: var(--fw-medium); color: var(--text-heading); }
.peca__detalhe ul,
.peca__detalhe ol { margin: 0 0 .75em; padding-left: 1.2em; }

/* O preço estava em 2.75rem da mesma serifada do <h1>, que dá 3.5rem: os dois
   maiores textos da página, um debaixo do outro, disputando a mesma leitura.
   Em 1.75rem ele continua sendo a segunda coisa que se lê e devolve a primeira
   ao nome da peça. */
.peca__preco { margin: 0; }
.peca__valor {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.1;
}
.peca__por {
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--text-heading);
}
.peca__de {
  font-size: 1.125rem;
  color: var(--text-muted);
}
.peca__consulta {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--text-heading);
}

/* --- Formulário de compra ---------------------------------------------- */

.peca__compra {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 30px;
  border-top: 1px solid var(--border-hairline);
}

.peca__campo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
/* A legenda precisa ser o primeiro filho do fieldset; o link da tabela vai
   para o canto por posição, alinhado com ela. */
.peca__campo--tamanho { position: relative; }

.peca__rotulo {
  padding: 0;
  font: var(--type-eyebrow);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.peca__link {
  font-size: var(--fs-caption);
  color: var(--accent-primary);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  text-decoration: none;
}
.peca__link:hover { color: var(--accent-primary-hover); border-bottom-color: currentColor; }

/* Fica na mesma linha do rótulo TAMANHO, no canto oposto. Precisa vir depois
   de .peca__link, que tem a mesma especificidade e reescreveria o padding.

   O top é negativo por um motivo, não por tentativa: num <fieldset>, a caixa
   que serve de referência para position: absolute começa ABAIXO da legenda —
   a legenda é desenhada sobre a borda de cima. Com top: 0 o link caía uma
   linha inteira abaixo do rótulo. Subir exatamente uma linha de legenda
   (--fs-eyebrow pelo 1.4 de --type-eyebrow) põe os dois textos na mesma linha
   em qualquer navegador. O alvo de toque cresce por padding e volta ao lugar
   pela margem negativa de mesmo valor. */
.peca__link--medidas {
  position: absolute;
  top: calc(var(--fs-eyebrow) * -1.4);
  right: 0;
  padding: 10px 0 11px;
  margin-block: -10px;
  line-height: 15px;
}

.peca__nota {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-muted);
}
.peca__nota--centro { text-align: center; }

/* Tamanhos: rádio de verdade (teclado, leitor de tela e sem JS funcionam),
   desenhado como pílula. */
.peca__tamanhos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.peca__tamanho { position: relative; }
.peca__tamanho input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.peca__tamanho > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--lotus-0);
  font-size: var(--fs-body-s);
  color: var(--text-body);
  transition: border-color var(--dur-base) var(--ease-soft), background var(--dur-base) var(--ease-soft);
}
.peca__tamanho:hover > span { border-color: var(--rosa-400); }
.peca__tamanho input:checked + span {
  border: 1.5px solid var(--accent-primary);
  background: var(--rosa-100);
  color: var(--accent-primary-hover);
  font-weight: var(--fw-medium);
}
.peca__tamanho input:focus-visible + span { box-shadow: var(--shadow-focus); }
.peca__tamanho input:disabled { cursor: not-allowed; }
.peca__tamanho input:disabled + span {
  border-color: var(--border-hairline);
  color: var(--text-muted);
  text-decoration: line-through;
}
.peca__campo--erro .peca__tamanho > span { border-color: var(--accent-primary); }

/* Quantidade */
.peca__qtd-linha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.peca__qtd {
  display: inline-flex;
  align-items: center;
  height: 54px;
  padding: 0 4px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--lotus-0);
}
.peca__qtd input {
  width: 3.5ch;
  height: 48px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--text-heading);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.peca__qtd input::-webkit-outer-spin-button,
.peca__qtd input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.peca__qtd input:focus-visible { border-radius: var(--radius-sm); }
/* Sem JS os botões não existem e o campo precisa de largura para digitar. */
html:not(.js) .peca__qtd input { width: 5ch; }

.peca__qtd-botao {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: 1.125rem;
  color: var(--text-heading);
  cursor: pointer;
}
.peca__qtd-botao:hover:not(:disabled) { background: var(--rosa-100); }
.peca__qtd-botao:focus-visible { box-shadow: var(--shadow-focus); }
/* Desabilitado continua legível (4.5:1): o que diz que não dá para clicar é o
   cursor e o botão ao lado, mais escuro — não um cinza que some. */
.peca__qtd-botao:disabled { color: var(--text-muted); cursor: default; }

/* As duas formas de comprar — mesma altura, mesma largura, mesmo peso. */
.peca__caminhos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.peca__botao {
  width: 100%;
  min-height: 58px;
  padding: 0 24px;
  font-size: var(--fs-body-s);
  letter-spacing: var(--ls-button);
  white-space: normal;
  text-align: center;
}
.peca__botao .arrow { width: 18px; height: 10px; flex: none; transition: transform var(--dur-base) var(--ease-soft); }
.peca__botao:hover .arrow,
.peca__botao:focus-visible .arrow { transform: translateX(5px); }
.peca__botao:disabled { opacity: .6; cursor: progress; }

.peca__ou {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block: 2px;
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--text-muted);
}
.peca__ou i {
  flex: 1;
  height: 1px;
  background: var(--border-hairline);
}

/* --- Garantias ---------------------------------------------------------- */
/* Em pé, não em três colunas: num trilho de ~440px "Envio rastreado para todo
   o Brasil" quebrava no meio e as três linhas ficavam de alturas diferentes.
   Empilhadas elas leem como uma lista do que está incluído, que é o que são. */

.peca__garantias {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
  padding: 30px 0 0;
  list-style: none;
  border-top: 1px solid var(--border-hairline);
}
.peca__garantias li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-body);
}
.peca__garantias svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--accent-primary);
}

/* --- Composição, medidas, entrega --------------------------------------- */
/* Fora da coluna de compra: seção da página inteira, com as linhas do acordeão
   atravessando as duas colunas. É o fecho da leitura. */

.peca__detalhes {
  max-width: var(--peca-conteudo);
  margin: clamp(56px, 7vw, 96px) auto 0;
  border-top: 1px solid var(--border-hairline);
}
.peca__detalhes summary { padding: 24px 0; font-size: 1.25rem; }

/* A linha do acordeão vai de ponta a ponta, mas o texto não: 68ch é o limite
   em que ainda se lê sem perder a linha de vista. O limite é do texto corrido,
   não da caixa — a tabela de medidas tem cinco colunas e usa o que tiver. */
.peca__detalhe { padding-bottom: 30px; }
.peca__detalhe :is(p, ul, ol) { max-width: 68ch; }
.peca__detalhe p { padding-bottom: 0; margin: 0 0 .75em; }
.peca__detalhe p:last-child { margin-bottom: 0; }

.peca__tabela-rolagem { overflow-x: auto; max-width: 720px; }
.peca__tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-s);
  color: var(--text-body);
}
.peca__tabela caption {
  padding-bottom: 10px;
  text-align: left;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.peca__tabela th,
.peca__tabela td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--border-hairline);
  text-align: left;
  font-weight: var(--fw-light);
}
.peca__tabela thead th {
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--text-muted);
}
.peca__tabela tbody th { font-weight: var(--fw-medium); color: var(--text-heading); }

/* --- Responsivo --------------------------------------------------------- */

@media (max-width: 900px) {
  .peca__grid { grid-template-columns: 1fr; gap: 28px; }
  /* A foto ocupa a largura toda, a compra não: num tablet de 820px os botões
     ficavam com 738px de largura e as pílulas de tamanho sumiam numa linha
     vazia do mesmo comprimento. O trilho continua sendo um trilho. */
  .peca__info { gap: 26px; max-width: 520px; }
  .peca__compra,
  .peca__garantias { padding-top: 26px; }
}

@media (max-width: 560px) {
  .peca__topo { gap: 8px 16px; }
  .peca__seta--antes  { left: 10px; }
  .peca__seta--depois { right: 10px; }
  .peca__miniaturas { gap: 8px; }
  .peca__miniatura { width: 64px; }
  .peca__detalhes summary { font-size: 1.125rem; padding: 20px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .peca__fotos { scroll-behavior: auto; }
  .peca__voltar:hover svg { transform: none; }
}

/* ==========================================================================
   Vitrine (/loja/)
   O card é o .card-peca de site.css, o mesmo das novidades da home.
   ========================================================================== */

/* Cabeçalho da vitrine: o título da página, que antes era um <h1> escondido.
   Um véu rosado em vez de branco puro, que ofuscava: começa no rosa das
   seções suaves e clareia até a barra, que leva o mesmo tom até o fio de
   baixo — e dali a grade segue no fundo da página. Os dois blocos leem como
   um cabeçalho só. */
.vitrine__cabeca {
  background: linear-gradient(180deg, var(--rosa-100) 0%, var(--rosa-50) 100%);
}
/* Sobre fundo tingido o rosa da eyebrow desce um tom, como nas seções
   tingidas (site.css): o de sempre ficaria abaixo de 4,5:1. */
.vitrine__cabeca .eyebrow--rosa { color: var(--accent-primary-hover); }
/* content-box, como a barra e a grade: com border-box o respiro lateral saía
   de dentro da largura, e o título começava 2 respiros para dentro das
   pílulas logo abaixo. */
.vitrine__cabeca-dentro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(24px, 3vw, 40px) var(--gutter) clamp(4px, 1vw, 10px);
  box-sizing: content-box;
}
.vitrine__cabeca .heading__title {
  margin: 0;
  font-size: var(--fs-display-m);
}
.vitrine__cabeca [data-vitrine-caminho] { margin-bottom: 12px; }
/* O título e, na mesma linha de base, quantas peças ele tem. */
.vitrine__titulo-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
}
.vitrine__cabeca .vitrine__titulo { font-size: var(--fs-display-l); line-height: 1.05; }
.vitrine__cabeca .vitrine__contagem--titulo {
  /* Reta: o site só carrega a Cormorant reta, e um itálico seria falso. */
  font-family: var(--font-display);
  font-size: clamp(var(--fs-subtitle), 1.7vw, 1.625rem);
  /* Os algarismos antigos da Cormorant fazem o "1" parecer um "I". */
  font-variant-numeric: lining-nums;
  letter-spacing: 0;
  color: var(--text-muted);
}

.vitrine__barra {
  background: var(--rosa-50);
  border-bottom: 1px solid var(--rosa-200);
}
.vitrine__barra-dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  max-width: var(--container);
  margin-inline: auto;
  padding: 20px var(--gutter);
  box-sizing: content-box;
}
.vitrine__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vitrine__filtros[hidden] { display: none; }
/* Os filtros nascem escondidos e quem os mostra é vitrine.js. Até ele rodar, a
   barra tinha só a contagem (22px); com os botões (44px) ela crescia e
   empurrava a grade inteira para baixo — mudança de layout de 0,58 medida em
   produção, "ruim" para o Google. Com JS a caminho (classe `js`, do
   revelador-reserva.js) e filtro garantido pelo build (vitrine__barra--filtros),
   o lugar já fica reservado, invisível. Sem JS segue tudo como antes. */
.js .vitrine__barra--filtros .vitrine__filtros[hidden] {
  display: flex;
  visibility: hidden;
}
.vitrine__filtro {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--rosa-200);
  border-radius: var(--radius-pill);
  /* Brancas sobre o véu, como pérolas. */
  background: var(--lotus-0);
  font: inherit;
  font-size: var(--fs-caption);
  color: var(--text-body);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-soft), background var(--dur-base) var(--ease-soft);
}
.vitrine__filtro[hidden] { display: none; }
.vitrine__filtro:hover,
.vitrine__filtro[data-aberta] { border-color: var(--rosa-300); }
.vitrine__filtro[aria-pressed="true"] {
  border-color: var(--rosa-200);
  background: var(--rosa-200);
  color: var(--accent-primary-hover);
  font-weight: var(--fw-medium);
}
.vitrine__filtro:focus-visible { box-shadow: var(--shadow-focus); }

/* Segunda fileira: os tipos da linha escolhida, abaixo das pílulas, que não
   saem do lugar. Mais leve que as pílulas — texto, sem moldura —, com o
   losango champagne do menu marcando o escolhido. */
.vitrine__subfiltros {
  flex-basis: 100%;
  order: 3;
}
.vitrine__subfiltros[hidden],
.vitrine__sub[hidden] { display: none; }
.vitrine__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  padding-top: 10px;
  border-top: 1px solid var(--rosa-200);
}
.vitrine__subfiltro {
  position: relative;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-caption);
  color: var(--text-body);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-soft);
}
.vitrine__subfiltro:first-child { padding-left: 0; }
.vitrine__subfiltro::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 5px;
  height: 5px;
  background: var(--champagne);
  transform: translateX(-50%) rotate(45deg) scale(0);
  transition: transform var(--dur-base) var(--ease-soft);
}
.vitrine__subfiltro:first-child::after { left: calc(50% - 7px); }
.vitrine__subfiltro:hover { color: var(--accent-primary); }
.vitrine__subfiltro:hover::after { transform: translateX(-50%) rotate(45deg) scale(.7); }
.vitrine__subfiltro[aria-pressed="true"] {
  color: var(--accent-primary-hover);
  font-weight: var(--fw-medium);
}
.vitrine__subfiltro[aria-pressed="true"]::after { transform: translateX(-50%) rotate(45deg) scale(1); }
.vitrine__subfiltro:focus-visible { outline: none; border-radius: var(--radius-sm); box-shadow: var(--shadow-focus); }

/* No painel, o grupo de categorias de uma linha fechada fica de fora. */
.filtros__grupo[hidden] { display: none; }
.vitrine__contagem {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* "Voltar" do topo da vitrine e das coleções: o mesmo botão da peça. */
.vitrine__voltar { margin-bottom: 20px; }

/* Contagem e o botão do painel, no canto oposto às pílulas. */
.vitrine__barra-lado {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  margin-left: auto;
}
.vitrine__abrir-filtros {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 15px;
  border: 1px solid var(--rosa-200);
  border-radius: var(--radius-pill);
  background: var(--lotus-0);
  font: inherit;
  font-size: var(--fs-caption);
  color: var(--text-heading);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-soft);
}
.vitrine__abrir-filtros:hover { border-color: var(--rosa-300); }
.vitrine__abrir-filtros:focus-visible { box-shadow: var(--shadow-focus); }
.vitrine__abrir-filtros[hidden] { display: none; }
.vitrine__abrir-filtros svg { width: 18px; height: 18px; flex: none; }
/* Mesmo recurso das pílulas: o lugar do botão fica guardado até o JS chegar. */
.js .vitrine__barra--painel .vitrine__abrir-filtros[hidden] {
  display: inline-flex;
  visibility: hidden;
}
.vitrine__abrir-filtros-conta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--accent-primary);
  color: #FFFFFF;
  font-size: .6875rem;
  font-weight: var(--fw-medium);
  line-height: 1;
}
.vitrine__abrir-filtros-conta[hidden] { display: none; }

/* Os filtros ligados, cada um com o seu "x". */
.vitrine__ativos[hidden] { display: none; }
.vitrine__ativos-dentro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter) 18px;
  box-sizing: content-box;
}
.vitrine__ativo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px 0 16px;
  border: 1px solid var(--rosa-200);
  border-radius: var(--radius-pill);
  background: var(--rosa-200);
  font: inherit;
  font-size: var(--fs-caption);
  color: var(--accent-primary-hover);
  cursor: pointer;
}
.vitrine__ativo:hover { border-color: var(--rosa-300); }
.vitrine__ativo:focus-visible { box-shadow: var(--shadow-focus); }
.vitrine__ativo svg { width: 14px; height: 14px; flex: none; }
.vitrine__limpar {
  min-height: 40px;
  padding: 0 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.vitrine__limpar:hover { color: var(--accent-primary); }
.vitrine__limpar:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* --- Painel "Filtrar e ordenar" -----------------------------------------
   É a gaveta da sacola (sacola.css): mesmo lado, mesma entrada e saída. Aqui
   ficam só o miolo e o rodapé, que acompanha a rolagem do painel para o "Ver
   N peças" estar sempre à mão. As opções são as pílulas de tamanho da página
   da peça, um número abaixo no tamanho. */
.filtros__corpo {
  gap: 28px;
  padding-bottom: 0;
}
.filtros .peca__tamanhos { gap: 8px; }
.filtros .peca__tamanho > span {
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  font-size: var(--fs-caption);
}
.filtros__marcar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: var(--fs-body-s);
  color: var(--text-body);
  cursor: pointer;
}
.filtros__marcar input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent-primary);
  cursor: pointer;
}
.filtros__rodape {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  margin-top: auto;
  padding: 16px 0 24px;
  border-top: 1px solid var(--border-hairline);
  background: var(--lotus-0);
}
.filtros__rodape .btn { padding-inline: 12px; }

.vitrine {
  padding: 48px var(--gutter) clamp(64px, 8vw, 88px);
}
.vitrine__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 24px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
/* O card em si é .card-peca, em site.css — o mesmo das novidades da home.
   Aqui fica só a grade e a barra de filtros. */
.vitrine__vazio {
  max-width: var(--container);
  margin: 0 auto;
  color: var(--text-muted);
}
.vitrine__vazio[hidden] { display: none; }

.vitrine__sem-pecas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: var(--container-narrow);
}
.vitrine__sem-pecas-texto {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: var(--text-heading);
}

/* ==========================================================================
   Coleções (/loja/colecoes/ e /loja/colecao/<endereço>/)
   A página de uma coleção É a vitrine, com outro cabeçalho: reaproveita
   .vitrine__* inteiro, grade e barra de filtros. Aqui ficam só o texto da
   coleção, que vem do painel da Yampi, e os cards do índice — que partem de
   .look--arch (site.css), como os cards de categoria da home.
   ========================================================================== */

.colecao__texto {
  max-width: var(--container-narrow);
  margin: 16px 0 0;
  color: var(--text-body);
}
.colecao__texto p { margin: 0 0 10px; }
.colecao__texto p:last-child { margin-bottom: 0; }

/* Mesma área de toque dos links pequenos do rodapé (site.css). */
.colecao__voltar {
  display: inline-flex;
  margin: 14px -5px -6px;
  padding: 6px 5px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.colecao__voltar:hover { color: var(--accent-primary); }

.colecoes {
  padding: 48px var(--gutter) clamp(64px, 8vw, 88px);
}
/* Coleções são poucas — duas, três. Numa grade de colunas fixas como a da
   vitrine, duas coleções deixariam um buraco do tamanho de um card na
   terceira coluna. Por isso aqui é flex com quebra: os cards têm largura
   máxima e a linha fica centrada, então duas coleções ficam lado a lado no
   meio da página e a última de uma linha ímpar não fica solta na esquerda. */
.colecoes__grade {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 24px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.colecao-card {
  flex: 1 1 280px;
  max-width: 380px;
}
/* O zoom e a sombra no hover já vêm de .look (site.css). */
.colecao-card__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}
.colecao-card__link:focus-visible { border-radius: var(--radius-md); }
.colecao-card__nome {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.2;
  text-align: center;
  color: var(--text-heading);
}
.colecao-card__meta {
  font-size: var(--fs-caption);
  text-align: center;
  color: var(--text-muted);
}

@media (max-width: 1100px) {
  .vitrine__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .vitrine { padding-top: 32px; }
  /* Duas colunas, como as novidades da home (inicio.css): numa coluna só,
     cada peça ocupava a tela inteira e as 17 peças davam 17 telas de rolagem.
     Lojas de moda mostram duas por linha no celular para dar o que comparar. */
  .vitrine__grade { gap: 28px 14px; }
  .colecoes { padding-top: 32px; }
  .vitrine__filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  /* As pílulas ficam numa linha; a contagem e o "Filtrar" na de baixo, um em
     cada ponta. */
  .vitrine__barra-lado { width: 100%; justify-content: space-between; margin-left: 0; }
  /* Sem a contagem (ela sobe para o título na /loja/), o botão fica à direita. */
  .vitrine__barra-lado > :only-child { margin-left: auto; }
  .vitrine__filtro { flex: none; }
  /* A segunda fileira vem logo abaixo das pílulas, antes do "Filtrar", e
     também desliza de lado em vez de quebrar linha. */
  .vitrine__subfiltros { order: 2; }
  .vitrine__barra-lado { order: 3; }
  .vitrine__sub { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .vitrine__subfiltro { flex: none; }
}