/* =========================================================
   Aracaju Pratas — catálogo público
   Mobile-first. Poucas sombras, muito espaço, tipografia no comando.
   ========================================================= */

:root {
  /* Cores — tinta sobre papel.
     "papel" e o fundo, "tinta" e a cor do texto. A folha inteira le so estes
     tokens, entao trocar os valores troca o tema sem mexer no resto.
     Contraste conferido sobre o branco: --texto 7.0:1, --texto-fraco 4.9:1. */
  --papel:        #ffffff;
  --papel-2:      #f7f6f4;  /* faixa alternada, fundos de foto e campos calmos */
  --branco:       #ffffff;  /* superficie elevada: cartoes, campos, menus */
  --tinta:        #101011;
  --tinta-2:      #26262a;
  --texto:        #5a5a5e;
  --texto-fraco:  #74747a;
  --linha:        #e7e5e1;
  --linha-forte:  #cfccc6;
  --prata:        #7e8184;
  --destaque:     #101011;
  --sucesso:      #17805a;
  --erro:         #c03e28;
  --aviso:        #8f6a15;
  --whatsapp:     #1faa59;
  /* Estrela de avaliacao: dourado discreto, unico ponto de cor quente do
     site. Serve para forma, nunca para texto pequeno. */
  --nota-cor:     #c8a24a;

  /* Prata de verdade: um metal tem faixas claras e escuras, nao uma cor chapada.
     Estes tres gradientes sao a base do acabamento do site inteiro — filete,
     texto e brilho — para o prateado ficar consistente em toda peca. */
  --prata-filete: linear-gradient(90deg, rgba(16,16,17,0) 0%, rgba(16,16,17,.10) 22%, rgba(16,16,17,.26) 50%, rgba(16,16,17,.10) 78%, rgba(16,16,17,0) 100%);
  --prata-metal:  linear-gradient(135deg, #b6b9bc 0%, #6f7275 26%, #2b2d2f 44%, #868a8d 58%, #4d5053 76%, #a7aaad 100%);
  --prata-brilho: linear-gradient(135deg, rgba(16,16,17,.06), rgba(16,16,17,.01) 42%, rgba(16,16,17,.045));
  /* Este e o fundo do botao principal. Ela pediu botao preto: um preto com
     faixas em vez de chapado, para o botao ter o mesmo corpo do resto. */
  --prata-claro:  linear-gradient(135deg, #2a2a2e 0%, #101011 28%, #1e1e22 50%, #000000 72%, #17171a 100%);
  /* Metal para uso SOBRE fundo escuro (a faixa do topo e o rodape). O
     --prata-metal virou grafite para funcionar no branco e sumiria ali. */
  --metal-luz:    linear-gradient(135deg, #8f9295 0%, #dcdee0 26%, #ffffff 44%, #c2c5c8 58%, #94979a 76%, #e6e8ea 100%);

  /* Medidas */
  --largura:      1240px;
  --gutter:       20px;
  --radio:        4px;
  --radio-g:      10px;
  --transicao:    .22s cubic-bezier(.4,0,.2,1);

  /* Tipografia */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Serifada de vitrine. Traco mais grosso que a Cormorant: serve para o
     titulo do topo, que precisa segurar a pagina sozinho por cima de uma
     fotografia. Fica so ali de proposito — usada em toda parte pesaria e
     brigaria com a leitura dos nomes de peca. */
  --serif-vitrine: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* Fundo branco liso, sem brilho nenhum. As duas luzes radiais que existiam
     aqui serviam so para levantar um preto chapado — sobre o branco elas
     viravam sujeira cinza no topo da tela. */
  background-color: var(--papel);
  color: var(--tinta-2);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--tinta); letter-spacing: .01em; margin: 0; line-height: 1.15; }
h1 { font-size: clamp(1.9rem, 6vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); }
h3 { font-size: 1.1rem; font-family: var(--sans); font-weight: 600; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }

.pular {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--tinta); color: var(--papel); padding: 12px 18px; border-radius: 0 0 var(--radio) 0;
}
.pular:focus { left: 0; }

:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; border-radius: 2px; }

.olho { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------------------------------------------------------
   Botões
   --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px;
  border: 1px solid transparent; border-radius: 999px;
  font-size: .92rem; font-weight: 500; letter-spacing: .02em;
  cursor: pointer; text-align: center;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.btn:active { transform: translateY(1px); }
/* Botao principal em prata escovada. Era um retangulo branco, a coisa mais
   dura da tela; agora tem o mesmo metal do resto da marca. As faixas do
   gradiente sao todas claras de proposito: o texto escuro por cima continua
   com contraste de sobra. */
.btn--escuro    { background: var(--prata-claro); color: var(--papel); }
.btn--escuro:hover { background: var(--tinta); }
/* Contorno prateado: o botao secundario deixa de ser um retangulo cinza e
   passa a combinar com o resto do acabamento. */
.btn--contorno {
  color: var(--tinta);
  background:
    linear-gradient(rgba(16,16,17,.02), rgba(16,16,17,0)) padding-box,
    linear-gradient(rgba(16,16,17,.55), rgba(16,16,17,.55)) border-box;
  border-color: transparent;
}
.btn--contorno:hover {
  background:
    linear-gradient(rgba(16,16,17,.05), rgba(16,16,17,.01)) padding-box,
    var(--prata-metal) border-box;
}
.btn--claro     { background: var(--branco); color: var(--tinta); border-color: var(--linha-forte); }
.btn--whatsapp  { background: var(--whatsapp); color: #fff; }
.btn--whatsapp:hover { background: #1a9550; }
.btn--bloco     { width: 100%; }
.btn--pequeno   { min-height: 40px; padding: 8px 18px; font-size: .85rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.icone-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: 0; border-radius: 50%;
  cursor: pointer; color: var(--tinta);
  transition: background var(--transicao);
}
.icone-btn:hover { background: var(--papel-2); }

/* O carrinho tem alca e rodinhas, entao desenha mais alto que a lupa e o
   coracao. Um fio um pouco mais fino deixa os tres com o mesmo peso. */
.icone-carrinho { width: 23px; height: 23px; stroke-width: 1.45; }
.carrinho-link:hover .icone-carrinho { transform: translateX(1px); }
.icone-carrinho { transition: transform var(--transicao); }

.selo-contador {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--papel);
  border-radius: 999px; font-size: .68rem; font-weight: 600; line-height: 1;
}

.link-texto { color: var(--tinta); border-bottom: 1px solid var(--linha-forte); padding-bottom: 1px; }
.link-texto:hover { border-color: var(--tinta); }

/* ---------------------------------------------------------
   Cabeçalho
   --------------------------------------------------------- */
.cabecalho { position: sticky; top: 0; z-index: 60; background: var(--papel); }
.cabecalho::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--prata-filete); }
.cabecalho--rolando { box-shadow: 0 1px 0 var(--linha), 0 6px 20px rgba(16,16,17,.07); }

/* Faixa de destaque — a promocao do momento.
   O filete prateado embaixo faz a tarja parecer uma borda de joia em vez de
   uma barra de aviso de sistema. */
/* A faixa e a unica coisa escura no alto de um site branco, entao ela ja
   chama atencao sozinha. O deslizamento continuo e o que ela pediu para a
   promocao do momento nao passar batido. Detalhes que importam:
   - o texto e repetido em dois grupos identicos e a trilha anda ate -50%,
     o que faz a volta acontecer sem emenda visivel;
   - o movimento para no hover e no foco, para dar tempo de ler e de clicar;
   - quem pediu menos movimento no sistema ve a faixa parada. */
.cabecalho__aviso {
  position: relative;
  background: linear-gradient(180deg, #17171a, #0a0a0c);
  color: rgba(255,255,255,.78);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 9px 0;
  overflow: hidden;
}
.cabecalho__aviso::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28) 50%, rgba(255,255,255,0));
}
/* Sombras nas pontas: o texto entra e sai esmaecendo em vez de ser cortado
   na seco pela borda da tela. */
.cabecalho__aviso::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, #0d0d0f 0%, rgba(13,13,15,0) 7%, rgba(13,13,15,0) 93%, #0d0d0f 100%);
}
.cabecalho__aviso-trilha {
  display: flex; width: max-content;
  animation: faixaDesliza 34s linear infinite;
}
.cabecalho__aviso:hover .cabecalho__aviso-trilha,
.cabecalho__aviso:focus-within .cabecalho__aviso-trilha { animation-play-state: paused; }
.cabecalho__aviso-grupo { display: flex; flex: none; }
.cabecalho__aviso-item { display: inline-flex; align-items: center; gap: 14px; padding-right: 14px; white-space: nowrap; }
.cabecalho__aviso-sep { color: rgba(255,255,255,.3); font-size: .6rem; }
@keyframes faixaDesliza { to { transform: translateX(-50%); } }

.cabecalho__aviso-texto {
  background: var(--metal-luz);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Navegador sem background-clip fica com o texto invisivel: o @supports
   garante que a versao chapada continue legivel. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .cabecalho__aviso-texto { color: rgba(255,255,255,.9); -webkit-text-fill-color: currentColor; background: none; }
}
.cabecalho__aviso-link {
  display: block; color: inherit;
}
.cabecalho__aviso-link:hover .cabecalho__aviso-seta { transform: translateX(3px); }
.cabecalho__aviso-seta {
  color: rgba(255,255,255,.62); font-size: 1rem; line-height: 1;
  transition: transform var(--transicao);
}
.cabecalho__aviso-link:focus-visible { outline: 1px solid var(--prata); outline-offset: 2px; }

.cabecalho__barra {
  display: flex; align-items: center; gap: 6px;
  min-height: 62px;
}

.marca { flex: 1; display: flex; align-items: center; min-width: 0; }
.marca__logo { max-height: 38px; width: auto; }
.marca__nome {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 600;
  color: var(--tinta); letter-spacing: .02em; white-space: nowrap;
}

.nav-principal { display: none; }
.cabecalho__acoes { display: flex; align-items: center; gap: 2px; }

.busca-painel { border-top: 1px solid var(--linha); background: var(--papel); }
.busca-form { display: flex; align-items: center; gap: 10px; padding: 12px var(--gutter); }
.busca-form__icone { color: var(--texto); flex: none; }
.busca-form input {
  flex: 1; min-width: 0; min-height: 46px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: var(--branco); padding: 10px 18px; font-size: 1rem; color: var(--tinta);
}
.busca-form input::placeholder { color: var(--texto-fraco); }
.busca-form input:focus { border-color: var(--linha-forte); outline: none; }
.busca-form .btn { display: inline-flex; flex: none; }

.busca-sugestoes { padding: 0 var(--gutter) 16px; }
.busca-sugestoes a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--linha);
}
.busca-sugestoes a:last-child { border-bottom: 0; }
.busca-sugestoes img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radio); background: var(--papel-2); }
.busca-sugestoes strong { font-weight: 500; font-size: .92rem; color: var(--tinta); }
.busca-sugestoes span { display: block; font-size: .82rem; color: var(--texto); }
.busca-vazia { padding: 14px 0; color: var(--texto); font-size: .9rem; }

/* Menu lateral (mobile) */
.menu-lateral { position: fixed; inset: 0; z-index: 90; }
.menu-lateral__fundo { position: absolute; inset: 0; background: rgba(16,16,17,.45); animation: aparecer .2s ease; }
.menu-lateral__painel {
  position: absolute; inset: 0 auto 0 0; width: min(84vw, 340px);
  background: var(--papel); padding: 14px 22px 32px;
  display: flex; flex-direction: column; gap: 22px;
  overflow-y: auto; animation: deslizar .24s cubic-bezier(.4,0,.2,1);
}
.menu-lateral__topo { display: flex; align-items: center; justify-content: space-between; }
.menu-lateral__titulo { font-family: var(--serif); font-size: 1.25rem; color: var(--tinta); }
.menu-lateral__grupo { display: flex; flex-direction: column; }
.menu-lateral__grupo a { padding: 11px 0; border-bottom: 1px solid var(--linha); font-size: .98rem; color: var(--tinta-2); }
.menu-lateral__grupo a:last-child { border-bottom: 0; }
.menu-lateral__rotulo {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-fraco); padding-bottom: 6px;
}
.menu-lateral__whats { margin-top: auto; }

@keyframes aparecer { from { opacity: 0; } }
@keyframes deslizar { from { transform: translateX(-100%); } }

/* ---------------------------------------------------------
   Avisos
   --------------------------------------------------------- */
.avisos { margin-top: 16px; display: grid; gap: 8px; }
.aviso {
  padding: 12px 16px; border-radius: var(--radio);
  border: 1px solid var(--linha); background: var(--branco);
  font-size: .9rem; color: var(--tinta-2);
  border-left: 3px solid var(--prata);
}
.aviso--success { border-left-color: var(--sucesso); }
.aviso--error   { border-left-color: var(--erro); }
.aviso--warning { border-left-color: var(--aviso); }
.aviso--info    { border-left-color: var(--destaque); }

/* ---------------------------------------------------------
   Seções
   --------------------------------------------------------- */
.secao { padding: 48px 0; }
.secao--apertada { padding: 32px 0; }
.secao--papel { background: var(--papel-2); }

.secao__topo {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 22px;
}
.secao__rotulo {
  display: flex; align-items: center; gap: 10px;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texto-fraco); margin-bottom: 8px;
}
/* Um risco curto de prata antes do rotulo. E o detalhe mais barato de todos e
   e o que tira a sensacao de "tudo preto" das aberturas de secao. */
.secao__rotulo::before {
  content: ""; flex: none; width: 26px; height: 1px;
  background: linear-gradient(90deg, rgba(16,16,17,.75), rgba(16,16,17,0));
}
.secao__descricao { color: var(--texto); max-width: 58ch; margin-top: 10px; }
.secao__link { flex: none; font-size: .88rem; color: var(--tinta); border-bottom: 1px solid var(--linha-forte); padding-bottom: 2px; }

/* Capa — curta de proposito. A home e uma vitrine: quem chega precisa ver
   peca, nao um banner de tela inteira. A imagem vai de fundo, com o texto por
   cima, e a altura e limitada para os produtos aparecerem sem rolar. */
.capa { position: relative; background: var(--papel-2); overflow: hidden; }
/* Filete de prata fechando a capa, no lugar da linha dura.
   Vai por border-image porque o ::after da capa ja e o veu escuro da foto e o
   ::before ja e o arco — nao sobra pseudo-elemento. */
.capa--enxuta {
  display: grid; align-items: center; min-height: 210px;
  border-style: solid; border-width: 0 0 1px; border-color: var(--linha);
  border-image: var(--prata-filete) 1;
}
/* A foto do topo entrava aqui com opacidade .55 e ainda levava um veu branco
   cobrindo tudo. Somados, os dois apagavam a imagem. O tratamento novo esta
   logo abaixo, em .capa--com-foto. */
/* Arcos de prata. Sao dois aneis muito discretos atras do titulo — a ideia e
   lembrar a curva de uma alianca sem virar decoracao. Ficam so no desktop e
   somem para quem prefere menos movimento. */
.capa--enxuta::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -140px; top: 50%; width: 460px; height: 460px; transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(16,16,17,.10);
  box-shadow: inset 0 0 60px rgba(16,16,17,.03);
}
.capa--enxuta .container::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: 40px; top: 50%; width: 260px; height: 260px; transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(16,16,17,.07);
}
.capa--enxuta .container { position: relative; }
@media (max-width: 760px) {
  .capa--enxuta::before { right: -220px; width: 320px; height: 320px; }
  .capa--enxuta .container::before { display: none; }
}

/* =========================================================
   CAPA COM FOTOGRAFIA
   A foto fica atras do texto, dentro de um quadro alinhado as mesmas margens
   do resto da pagina — nao sangra ate a borda da tela.

   A foto tem duas metades muito diferentes, e a leitura foi medida nela:
   da esquerda ate uns 50% da largura e so tecido claro e uniforme (tom por
   volta de 210 em qualquer altura); da metade para a direita esta a modelo,
   de blusa preta, com trechos quase pretos (tom abaixo de 30). Texto escuro
   le muito bem sobre a primeira metade e nao le nada sobre a segunda.

   Por isso o tratamento muda conforme a largura, e nao por gosto:
   - no computador o quadro e largo, cabe a foto inteira, e o texto pousa na
     metade clara. O veu ali e quase nada e a modelo fica intocada;
   - no celular o recorte e estreito e nao alcanca a area clara sem cortar a
     modelo fora. Entao a foto ocupa a parte de cima do quadro e se dissolve
     em branco por baixo, e o texto comeca dentro dessa dissolucao. A imagem
     continua atras do texto, mas na altura em que ela ja clareou o bastante.
   ========================================================= */
/* --capa-foto e a altura da faixa de fotografia no celular. Fica presa a
   largura da tela porque o quadro tambem e: num iPhone SE (320 px) uma faixa
   de 265 px comia meia tela antes de aparecer produto. */
.capa--com-foto {
  display: block; min-height: 0; padding: 16px 0 24px;
  --capa-foto: clamp(200px, 58vw, 280px);
}
/* Os aneis existiam para dar corpo a uma faixa de texto vazia. Com a foto
   atras eles sujam o fundo — e o segundo cairia dentro do quadro. */
.capa--com-foto::before, .capa--com-foto .container::before { display: none; }

.capa--com-foto .capa__externo { position: relative; }
/* O quadro recua pelo gutter porque .container e caixa de borda: um inset 0
   coincidiria com a borda externa e a foto encostaria na lateral da tela. */
.capa__quadro {
  position: absolute; top: 0; bottom: 0;
  left: var(--gutter); right: var(--gutter);
  overflow: hidden; border-radius: var(--radio-g);
  background: var(--papel);
  /* Contorno de um fio so, no lugar de sombra: define a borda sem criar peso
     visual logo acima da vitrine. */
  box-shadow: inset 0 0 0 1px rgba(16,16,17,.07);
}
.capa__fundo {
  position: absolute; top: 0; left: 0; right: 0;
  width: 100%; height: var(--capa-foto); object-fit: cover;
  /* 62% deixa visivel a faixa que vai de 16% a 90% da foto: pega o rosto e
     ainda sobra tecido dos dois lados. Centralizado, o recorte estreito do
     celular cortaria a modelo fora do quadro. */
  object-position: 62% center;
}
/* A dissolucao da foto em branco. Comeca depois do rosto e chega a branco
   solido no pe da faixa, para o texto pousar em cima ja com contraste. */
.capa__quadro::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--capa-foto);
  /* Branco solido ja em 84% da faixa, e nao no fim dela: o texto comeca 26 px
     antes do pe do quadro, entao precisa de branco fechado antes disso. */
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.42) 56%,
    rgba(255,255,255,.86) 72%,
    #ffffff 84%);
}
/* O recuo desce a foto inteira e vem de PADDING, nunca de margin-top.
   Com margin-top a margem escapava para fora de .capa__externo (margens
   verticais colapsam quando o pai nao tem padding, borda nem contexto
   proprio, e .capa__quadro e absoluto, entao nao segura nada): o quadro
   descia junto, sobrava um vazio creme no alto da pagina e o titulo pousava
   na primeira linha do quadro, em cima do rosto. No computador o defeito nao
   aparecia porque ali .capa__externo e flex, e flex nao colapsa margem.

   Recuo fixo, e nao alinhamento pelo pe do quadro: se a dona escrever um
   titulo longo o quadro cresce para baixo, em branco, em vez de empurrar o
   texto para cima de um trecho escuro da foto. */
.capa--com-foto .capa__conteudo {
  position: relative; z-index: 1;
  max-width: none; width: 100%;
  padding: calc(var(--capa-foto) - 26px) 20px 26px;
}
.capa--com-foto .capa__dizeres { max-width: 30rem; }

@media (min-width: 620px) {
  .capa--com-foto { --capa-foto: 320px; }
  .capa--com-foto .capa__conteudo { padding: calc(var(--capa-foto) - 30px) 30px 32px; }
}
/* Do tablet para cima o quadro fica largo o suficiente para caber a foto
   inteira, e o texto vai para a metade clara. A dissolucao deixa de subir de
   baixo e passa a vir da esquerda, bem mais leve — a modelo nao e tocada. */
@media (min-width: 900px) {
  .capa--com-foto { padding: 24px 0 32px; }
  .capa--com-foto .capa__externo {
    display: flex; align-items: center; min-height: 490px;
  }
  .capa__fundo { bottom: 0; height: auto; object-position: center; }
  .capa__quadro::after {
    top: 0; bottom: 0; height: auto;
    background: linear-gradient(90deg,
      rgba(255,255,255,.60) 0%,
      rgba(255,255,255,.46) 26%,
      rgba(255,255,255,.16) 42%,
      rgba(255,255,255,0) 54%);
  }
  .capa--com-foto .capa__conteudo { padding: 48px 52px; }
  .capa--com-foto .capa__dizeres { max-width: 20rem; }
}
@media (min-width: 1240px) {
  .capa--com-foto .capa__externo { min-height: 530px; }
  .capa--com-foto .capa__conteudo { padding: 56px 60px; }
  .capa--com-foto .capa__dizeres { max-width: 22rem; }
}

/* Capa em modo emblema. Fotografia aceita corte; marca nao. Aqui a imagem
   nao e fundo: e a assinatura da loja, e aparece inteira. No celular ela vem
   acima do texto, centralizada; no desktop fica ao lado, sem esticar nada. */
.capa--emblema .capa__conteudo {
  max-width: none; display: grid; gap: 20px;
  justify-items: center; text-align: center;
}
.capa--emblema .capa__texto { margin-inline: auto; }
.capa--emblema .capa__marca {
  display: block; width: min(104px, 30vw); height: auto;
  filter: drop-shadow(0 8px 30px rgba(16,16,17,.10));
}
/* O emblema ja e um arco. Os aneis decorativos so competiriam com ele. */
.capa--emblema::before, .capa--emblema .container::before { display: none; }
@media (min-width: 900px) {
  .capa--emblema .capa__conteudo {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; justify-items: start; text-align: left;
    gap: 56px;
  }
  .capa--emblema .capa__dizeres { grid-column: 1; grid-row: 1; max-width: 36rem; }
  .capa--emblema .capa__marca { grid-column: 2; grid-row: 1; width: 176px; }
  .capa--emblema .capa__texto { margin-inline: 0; }
}
.capa__conteudo { position: relative; z-index: 1; padding: 34px 0 30px; max-width: 34rem; }

.capa__titulo { margin-bottom: 10px; }
.capa__texto { color: var(--tinta-2); font-size: 1rem; margin: 0; max-width: 46ch; }
/* Titulo do topo com foto. Peso 400 porque a Playfair ja tem traco grosso por
   natureza e o 600 herdado da regra geral de h1 fecharia demais as letras. */
.capa--com-foto .capa__titulo {
  font-family: var(--serif-vitrine);
  font-weight: 400;
  font-size: clamp(1.35rem, 5vw, 1.7rem);
  line-height: 1.12;
  letter-spacing: -.012em;
  margin-bottom: 12px;
}
/* Corpo e rotulo menores no telefone: a coluna ali tem 320 px uteis, e a
   escala do computador enchia a tela de letra antes da primeira peca. Ambos
   voltam ao tamanho cheio na regra de 900 px. */
.capa--com-foto .capa__texto { max-width: 34ch; font-size: .875rem; line-height: 1.6; }
.capa--com-foto .secao__rotulo { font-size: .62rem; letter-spacing: .15em; margin-bottom: 6px; }
/* A escala sobe devagar no computador: ali o texto ocupa so a metade clara do
   quadro, nao a tela inteira, e o vw cheio o faria estourar em linhas curtas. */
@media (min-width: 900px) {
  .capa--com-foto .capa__titulo { font-size: clamp(1.75rem, 2.3vw, 2.3rem); }
  /* Devolve a escala do computador. Precisa estar DEPOIS das regras do
     celular no arquivo: @media nao soma especificidade, quem vem por ultimo
     ganha. */
  .capa--com-foto .capa__texto { max-width: 32ch; font-size: .92rem; line-height: 1.65; }
  .capa--com-foto .secao__rotulo { font-size: .7rem; letter-spacing: .18em; margin-bottom: 8px; }
}
.capa__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Vantagens */
.vantagens { display: grid; gap: 2px; background: var(--linha); border-block: 1px solid var(--linha); }
.vantagem { background: var(--papel); padding: 18px 20px; display: flex; gap: 12px; align-items: flex-start; }
.vantagem svg { flex: none; color: var(--destaque); width: 20px; height: 20px; margin-top: 2px; }
.vantagem strong { display: block; font-size: .9rem; font-weight: 600; color: var(--tinta); }
.vantagem span { font-size: .84rem; color: var(--texto); }

/* Categorias em destaque */
.categorias-faixa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.categoria-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radio-g); background: var(--papel-2);
  aspect-ratio: 3 / 4;
}
.categoria-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.categoria-card:hover img { transform: scale(1.04); }
.categoria-card__nome {
  position: absolute; inset: auto 0 0; padding: 30px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.82), transparent);
  color: #fff; font-family: var(--serif); font-size: 1.15rem;
}
.categoria-card--vazia { display: grid; place-items: center; }
.categoria-card--vazia .categoria-card__nome { position: static; background: none; color: var(--tinta); padding: 0; }

/* ---------------------------------------------------------
   Grade e card de produto
   --------------------------------------------------------- */
.grade-produtos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }

.produto-card { position: relative; display: flex; flex-direction: column; }
/* Moldura de prata de 1px em volta de cada peca. Vai por dois fundos em vez
   de box-shadow porque sombra nao aceita gradiente, e um fio de prata chapado
   fica com cara de cinza. O fundo interno cobre a area da imagem; so a faixa
   da borda mostra o metal. */
.produto-card__foto {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radio-g);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--papel-2), var(--papel-2)) padding-box,
    linear-gradient(155deg, rgba(16,16,17,.16), rgba(16,16,17,.06) 34%, rgba(16,16,17,.22) 58%, rgba(16,16,17,.08) 100%) border-box;
  aspect-ratio: 1 / 1; margin-bottom: 10px;
  transition: background var(--transicao), box-shadow var(--transicao);
}
/* O fio acende no hover. Sem clarear o fundo: a peca continua sendo a coisa
   mais clara do cartao. */
.produto-card:hover .produto-card__foto {
  background:
    linear-gradient(var(--papel-2), var(--papel-2)) padding-box,
    var(--prata-metal) border-box;
  box-shadow: 0 8px 26px rgba(16,16,17,.10);
}
.produto-card__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.produto-card:hover .produto-card__foto img { transform: scale(1.04); }

.produto-card__selos { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 5px; }
.selo {
  padding: 4px 9px; border-radius: 999px;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  /* A pastilha fica por cima da foto da peca, entao nao pode herdar o fundo
     da pagina: ela carrega o proprio branco leitoso com desfoque atras. */
  background: rgba(255,255,255,.92); color: var(--tinta);
  border: 1px solid rgba(16,16,17,.10); backdrop-filter: blur(6px);
}
.selo--oferta   { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.selo--novo     { background: rgba(255,255,255,.94); color: var(--tinta); }
.selo--esgotado { background: rgba(16,16,17,.78); color: #fff; border-color: transparent; }
/* "Mais vendida" e prova social, nao oferta: fica claro, discreto e sem
   competir com o selo de desconto, que e o unico que pode gritar. */
.selo--vendida  { background: rgba(255,255,255,.94); color: var(--tinta); border-color: rgba(16,16,17,.14); }
/* Pronta entrega e Sob encomenda sao a informacao que decide a compra.
   Os dois ganham fio de prata na borda; o verde fica so no ponto, para nao
   parecer aviso de sistema no meio de uma vitrine de joia. */
.selo--pronta, .selo--encomenda {
  border-color: transparent;
  background:
    linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)) padding-box,
    var(--prata-metal) border-box;
}
.selo--pronta   { color: var(--tinta); }
.selo--pronta::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--sucesso); margin-right: 6px; vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(23,128,90,.16);
}
.selo--encomenda { color: var(--texto); }

.produto-card__favorito {
  position: absolute; top: 6px; right: 6px;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(255,255,255,.9); border: 1px solid rgba(16,16,17,.10); border-radius: 50%;
  cursor: pointer; color: var(--tinta-2); backdrop-filter: blur(6px);
  transition: color var(--transicao), background var(--transicao);
}
.produto-card__favorito:hover { background: #fff; border-color: var(--tinta); }
.produto-card__favorito[aria-pressed="true"] { color: var(--erro); }
.produto-card__favorito[aria-pressed="true"] svg { fill: currentColor; }

.produto-card__nome {
  font-size: .93rem; font-weight: 500; color: var(--tinta); line-height: 1.4;
  margin-bottom: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.produto-card__categoria { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-fraco); margin-bottom: 5px; }

/* Codigo da peca, a vista. Nasceu de um pedido pratico: a cliente escolhe
   olhando a vitrine e manda o codigo no WhatsApp, e antes ele so existia
   dentro do bloco fechado de Especificacoes.

   E um botao de verdade, nao um paragrafo, porque ele copia — teclado e
   leitor de tela precisam alcanca-lo. Aparencia de etiqueta discreta: quem
   nao procura codigo nem repara, quem procura acha de primeira. Numero em
   tabular-nums para os codigos ficarem alinhados de uma linha para a outra
   na grade. */
.codigo-peca {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 7px; padding: 3px 8px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: var(--papel-2); color: var(--texto-fraco);
  font: inherit; font-size: .72rem; line-height: 1.5;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.codigo-peca:hover { border-color: var(--linha-forte); color: var(--tinta-2); }
.codigo-peca:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.codigo-peca__rotulo { letter-spacing: .08em; text-transform: uppercase; }
.codigo-peca__valor {
  color: var(--tinta-2); font-weight: 600; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.codigo-peca__icone, .codigo-peca svg { flex: none; opacity: .55; }
/* Confirmacao visual no proprio botao, alem do aviso que sobe na tela: no
   celular o aviso as vezes aparece longe do dedo. */
.codigo-peca--copiado {
  border-color: var(--tinta); background: var(--papel);
}
.codigo-peca--copiado .codigo-peca__rotulo { color: var(--tinta); }
.codigo-peca--copiado .codigo-peca__valor::after {
  content: " copiado"; font-weight: 400; letter-spacing: 0; color: var(--texto-fraco);
}
/* Na pagina da peca ele tem mais espaco e mais gente procurando por ele. */
.codigo-peca--grande { font-size: .78rem; padding: 5px 11px; margin: 0 0 12px; }
@media (prefers-reduced-motion: reduce) { .codigo-peca { transition: none; } }
.produto-card__precos { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.preco { font-size: 1rem; font-weight: 600; color: var(--tinta); }
.preco--antigo { font-size: .84rem; font-weight: 400; color: var(--texto-fraco); text-decoration: line-through; }
.preco--parcela { display: block; width: 100%; font-size: .78rem; color: var(--texto); font-weight: 400; margin-top: 2px; }
.produto-card__prazo { font-size: .74rem; color: var(--texto-fraco); margin-top: 4px; }
.produto-card__acao { margin-top: 10px; }

/* Estados vazios */
.vazio {
  text-align: center; padding: 56px 20px;
  border: 1px dashed var(--linha-forte); border-radius: var(--radio-g);
  background: var(--branco);
}
.vazio h2 { margin-bottom: 10px; }
.vazio p { color: var(--texto); max-width: 44ch; margin: 0 auto 20px; }
.vazio__nota { font-size: .84rem; }

/* ---------------------------------------------------------
   Catálogo: filtros e ordenação
   --------------------------------------------------------- */
.catalogo-cabeca { padding: 28px 0 18px; }
.catalogo-cabeca h1 { margin-bottom: 8px; }
.catalogo-cabeca p { color: var(--texto); }

.trilha { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8rem; color: var(--texto); margin-bottom: 14px; }
.trilha a { color: var(--texto); }
.trilha a:hover { color: var(--tinta); }
.trilha span[aria-current] { color: var(--tinta); }

.catalogo-barra {
  position: sticky; top: var(--altura-cabecalho, 96px); z-index: 40;
  display: flex; gap: 10px; align-items: center;
  padding: 12px 0; background: var(--papel);
  border-bottom: 1px solid var(--linha);
}
.catalogo-barra__contagem { font-size: .84rem; color: var(--texto); margin-right: auto; }
.filtro-abrir { display: inline-flex; align-items: center; gap: 8px; }

.selecao {
  min-height: 42px; padding: 8px 34px 8px 14px;
  border: 1px solid var(--linha-forte); border-radius: 999px;
  background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5a5e' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
  font-size: 1rem; color: var(--tinta); appearance: none; cursor: pointer;
}

.filtros-painel { position: fixed; inset: 0; z-index: 90; }
.filtros-painel__fundo { position: absolute; inset: 0; background: rgba(16,16,17,.45); }
.filtros-painel__caixa {
  position: absolute; inset: auto 0 0 0; max-height: 86vh;
  background: var(--papel); border-radius: var(--radio-g) var(--radio-g) 0 0;
  display: flex; flex-direction: column;
  animation: subir .26s cubic-bezier(.4,0,.2,1);
}
@keyframes subir { from { transform: translateY(100%); } }
.filtros-painel__topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--linha);
}
.filtros-painel__corpo { padding: 18px 20px; overflow-y: auto; display: grid; gap: 22px; }
.filtros-painel__base {
  display: flex; gap: 10px;
  /* No iPhone a faixa de gestos come o fim da tela: sem esta reserva o botao
     "Aplicar filtros" fica embaixo dela e nao da para tocar. */
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha); background: var(--papel);
}
.filtros-painel__base .btn { flex: 1; }

.filtro-grupo > legend, .filtro-grupo__titulo {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-fraco); margin-bottom: 10px; padding: 0;
}
.filtro-grupo { border: 0; padding: 0; margin: 0; }
.filtro-opcao { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; font-size: .92rem; }
.filtro-opcao input { width: 18px; height: 18px; accent-color: var(--tinta); }
.filtro-faixa { display: flex; align-items: center; gap: 10px; }
/* 16px e o minimo para o iPhone nao dar zoom sozinho ao tocar no campo. */
.filtro-faixa input {
  flex: 1; min-width: 0; min-height: 44px; font-size: 1rem;
  padding: 10px 12px; border: 1px solid var(--linha-forte);
  border-radius: var(--radio); background: var(--branco); color: var(--tinta);
  font-family: inherit;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 14px; min-height: 44px; border-radius: 999px;
  border: 1px solid var(--linha-forte);
  background: linear-gradient(180deg, rgba(16,16,17,.025), rgba(16,16,17,0)), var(--branco);
  font-size: .82rem; color: var(--tinta-2);
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.chip:hover { border-color: var(--prata); color: var(--tinta); }
/* Categoria escolhida em prata escovada. O branco chapado antigo era o ponto
   mais claro da pagina e roubava a atencao das fotos das pecas. */
.chip--ativo { background: var(--prata-claro); border-color: transparent; color: var(--papel); }
.chip--ativo:hover { color: var(--papel); border-color: transparent; }
.chip button { background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
.chip svg { width: 14px; height: 14px; }
.chip small { font-size: .72rem; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.chip--ativo small { color: var(--papel); opacity: .7; }

/* ---------------------------------------------------------
   Catalogo: abas de disponibilidade e categorias a vista
   --------------------------------------------------------- */
/* Tres abas sempre visiveis. Elas trocam a secao e nao mexem na categoria
   escolhida, entao "Em estoque" + "Brincos" continua valendo. */
.secoes {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--linha); margin: 0 0 18px;
}
.secoes::-webkit-scrollbar { display: none; }
.secoes__aba {
  position: relative; flex: none; padding: 12px 2px; margin-right: 22px;
  font-size: .92rem; color: var(--texto); white-space: nowrap;
}
.secoes__aba::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  /* Mesmo fio das abas da home, para as duas telas falarem a mesma lingua. */
  background: var(--prata-metal); border-radius: 2px;
  transform: scaleX(0); transition: transform .18s ease;
}
.secoes__aba:hover { color: var(--tinta); }
.secoes__aba.ativa { color: var(--tinta); }
.secoes__aba.ativa::after { transform: scaleX(1); }

.filtro-categorias { margin-bottom: 6px; }
/* Muita categoria nao pode empurrar os produtos para fora da tela: a faixa
   rola de lado, do jeito que a cliente ja espera no celular. */
.chips--rolagem {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  margin-left: -18px; margin-right: -18px; padding: 2px 18px 6px;
  margin-bottom: 10px;
}
.chips--rolagem::-webkit-scrollbar { display: none; }
.chips--rolagem .chip { flex: none; }

/* ---------------------------------------------------------
   Home: busca simples e as duas vitrines
   --------------------------------------------------------- */
/* A ancora #pecas e usada pelos chips e pela paginacao. O deslocamento evita
   que o cabecalho fixo cubra o titulo ao rolar ate aqui. */
.vitrines { scroll-margin-top: 84px; }

.procura { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.procura__campo {
  position: relative; flex: 1 1 260px; min-width: 0;
  display: flex; align-items: center;
}
.procura__campo svg {
  position: absolute; left: 14px; width: 18px; height: 18px;
  fill: none; stroke: var(--texto-fraco); stroke-width: 1.6; pointer-events: none;
}
/* 16px e o minimo para o iPhone nao dar zoom sozinho ao tocar no campo. */
.procura__campo input {
  width: 100%; min-height: 48px; font-size: 1rem; font-family: inherit;
  padding: 12px 14px 12px 42px;
  border: 1px solid var(--linha-forte); border-radius: 999px;
  background: var(--branco); color: var(--tinta);
}
.procura__campo input::placeholder { color: var(--texto-fraco); }
.procura__campo input:focus-visible { outline: 2px solid var(--prata); outline-offset: 2px; border-color: var(--prata); }
.procura__campo input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.procura .btn { min-height: 48px; flex: none; }
.procura__limpar { flex: none; font-size: .86rem; color: var(--texto); border-bottom: 1px solid var(--linha-forte); padding-bottom: 2px; }
.procura__limpar:hover { color: var(--tinta); }
/* Uma linha so fecha o topo: quantas pecas de um lado, o que esta ligado e a
   ordem do outro. Antes eram cinco blocos empilhados antes da primeira foto. */
.procura__resumo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  font-size: .88rem; color: var(--texto); margin: 14px 0 0;
}
.procura__resumo strong { color: var(--tinta); font-weight: 500; }
.procura__pagina { color: var(--texto-fraco); }
.procura__conta { flex: 1 1 auto; }
.procura__controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.procura__controles .chip { margin: 0; }
.procura__ordem { display: flex; align-items: center; gap: 8px; }
/* O seletor e o mesmo do catalogo, so um ponto menor: ele acompanha o texto
   da contagem em vez de virar mais um botao grande na tela. */
.selecao--pequena { min-height: 38px; padding: 6px 30px 6px 12px; font-size: .84rem; background-position: right 9px center; }

/* Filtros da home: uma linha de categorias e uma linha menor de atalhos. */
.filtros-home { padding-bottom: 0; }
.chips--filhas { margin-top: -6px; }
.chip--pequeno { padding: 8px 12px; min-height: 38px; font-size: .78rem; }
.secao--vitrine { padding-top: 26px; }

/* Recado curto embaixo da vitrine: o resto mora no rodape. */
.nota-loja {
  font-size: .84rem; color: var(--texto-fraco); text-align: center; margin: 0;
  border-top: 1px solid var(--linha); padding-top: 22px;
}
.nota-loja a { color: var(--tinta-2); border-bottom: 1px solid var(--linha-forte); padding-bottom: 1px; }

.vitrine__nota { font-size: .84rem; color: var(--texto-fraco); margin: -6px 0 18px; }
.vitrine__mais { display: flex; justify-content: center; margin-top: 28px; }

@media (max-width: 640px) {
  .procura .btn { flex: 1 1 auto; }
  /* Muitas categorias em tela pequena viram uma faixa que rola de lado, em vez
     de cinco linhas de chips empurrando os produtos para fora da tela. */
  .vitrines .chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-left: -18px; margin-right: -18px; padding: 2px 18px 6px;
  }
  .vitrines .chips::-webkit-scrollbar { display: none; }
  .vitrines .chip { flex: none; }
}

.paginacao { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
.paginacao a, .paginacao span {
  min-width: 42px; min-height: 42px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--linha); border-radius: var(--radio);
  font-size: .88rem; background: var(--branco);
}
.paginacao .atual { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.paginacao .desativado { opacity: .4; pointer-events: none; }

/* Campos de formulário */
.campo { display: block; margin-bottom: 16px; }
.campo__rotulo { display: block; font-size: .82rem; font-weight: 500; color: var(--tinta-2); margin-bottom: 6px; }
.campo__ajuda { display: block; font-size: .78rem; color: var(--texto); margin-top: 5px; }
.campo__erro { display: block; font-size: .8rem; color: var(--erro); margin-top: 5px; }
.entrada, textarea.entrada, select.entrada {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--linha-forte); border-radius: var(--radio);
  background: var(--branco); font-size: 1rem; color: var(--tinta); font-family: inherit;
}
textarea.entrada { min-height: 110px; resize: vertical; line-height: 1.5; }
.entrada:focus { border-color: var(--tinta); outline: none; }
.entrada[aria-invalid="true"] { border-color: var(--erro); }

/* ---------------------------------------------------------
   Página do produto
   --------------------------------------------------------- */
.produto { padding: 20px 0 56px; }
.produto__grade { display: grid; gap: 26px; }

.galeria__principal {
  position: relative; border-radius: var(--radio-g); overflow: hidden;
  background: var(--papel-2); aspect-ratio: 1 / 1;
}
.galeria__principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria__miniaturas { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.galeria__miniatura {
  flex: none; width: 62px; height: 62px; padding: 0;
  border: 1px solid var(--linha); border-radius: var(--radio); overflow: hidden;
  background: var(--papel-2); cursor: pointer;
}
.galeria__miniatura[aria-current="true"] { border-color: var(--tinta); }
.galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; }

.produto__categoria { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-fraco); margin-bottom: 10px; display: block; }
.produto__titulo { margin-bottom: 12px; }
.produto__resumo { color: var(--texto); font-size: 1rem; margin-bottom: 20px; }

.produto__preco { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.produto__preco .preco { font-size: 1.7rem; }
.produto__economia { font-size: .84rem; color: var(--sucesso); font-weight: 500; }
.produto__pagamento { font-size: .9rem; color: var(--texto); margin-bottom: 20px; }
.produto__pagamento strong { color: var(--tinta); font-weight: 600; }

/* Disponibilidade na pagina da peca: mesma pilula prateada da vitrine, para a
   cliente reconhecer a informacao de uma tela para a outra. */
.produto__disponibilidade {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; margin-bottom: 20px; border-radius: 999px;
  font-size: .86rem; border: 1px solid transparent;
  background:
    linear-gradient(rgba(16,16,17,.02), rgba(16,16,17,0)) padding-box,
    var(--prata-metal) border-box;
}
.produto__disponibilidade.esgotado {
  background: rgba(224,112,92,.08); border-color: rgba(224,112,92,.4);
}
.produto__disponibilidade svg { width: 16px; height: 16px; }
.disponivel { color: var(--sucesso); }
.ultimas    { color: var(--aviso); }
.esgotado   { color: var(--erro); }
.encomenda  { color: var(--prata); }
.carrinho-item__encomenda { font-size: .78rem; color: var(--prata); margin-bottom: 4px; }
/* O aviso de prazo fica logo abaixo da disponibilidade, discreto: informa sem
   competir com o preco nem parecer um alerta de erro. */
.produto__encomenda {
  font-size: .84rem; color: var(--texto); line-height: 1.55;
  border-left: 2px solid var(--linha-forte);
  padding: 2px 0 2px 12px; margin: -8px 0 20px;
}

.variacoes { margin-bottom: 22px; }
.variacoes__titulo { font-size: .82rem; font-weight: 500; color: var(--tinta-2); margin-bottom: 8px; }
.variacoes__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.variacao-opcao { position: relative; }
.variacao-opcao input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.variacao-opcao span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--linha-forte); border-radius: var(--radio);
  background: var(--branco); font-size: .9rem; cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.variacao-opcao input:checked + span { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
.variacao-opcao input:focus-visible + span { outline: 2px solid var(--destaque); outline-offset: 2px; }
.variacao-opcao input:disabled + span { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.quantidade { display: inline-flex; align-items: center; border: 1px solid var(--linha-forte); border-radius: 999px; overflow: hidden; background: var(--branco); }
.quantidade button {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--tinta);
}
.quantidade button:disabled { opacity: .3; cursor: not-allowed; }
.quantidade input {
  width: 46px; height: 46px; border: 0; text-align: center;
  font-size: 1rem; font-weight: 500; color: var(--tinta); background: none;
  -moz-appearance: textfield;
}
.quantidade input::-webkit-outer-spin-button,
.quantidade input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.produto__acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 24px; }
.produto__acoes .btn { flex: 1; min-width: 180px; }

.produto__info { border-top: 1px solid var(--linha); }
.info-bloco { border-bottom: 1px solid var(--linha); }
.info-bloco__botao {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0; background: none; border: 0; cursor: pointer;
  font-size: .94rem; font-weight: 500; color: var(--tinta); text-align: left;
}
.info-bloco__botao svg { flex: none; transition: transform var(--transicao); }
.info-bloco__botao[aria-expanded="true"] svg { transform: rotate(180deg); }
.info-bloco__corpo { padding: 0 0 18px; color: var(--texto); font-size: .93rem; }
.info-bloco__corpo p { white-space: pre-line; }

.especificacoes { display: grid; gap: 0; }
.especificacoes div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: .9rem; }
.especificacoes div:last-child { border-bottom: 0; }
.especificacoes dt { color: var(--texto); }
.especificacoes dd { margin: 0; color: var(--tinta); text-align: right; }

.compartilhar { display: flex; gap: 8px; align-items: center; margin-top: 18px; font-size: .86rem; color: var(--texto); }
.compartilhar button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; color: var(--tinta); border-bottom: 1px solid var(--linha-forte); padding-bottom: 2px; }

/* Barra fixa de compra no celular */
.compra-fixa {
  position: fixed; inset: auto 0 0; z-index: 55;
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--linha);
  box-shadow: 0 -6px 24px rgba(16,16,17,.07);
  backdrop-filter: blur(8px);
  transform: translateY(110%); transition: transform var(--transicao);
}
.compra-fixa--visivel { transform: translateY(0); }
.compra-fixa__preco { flex: none; }
.compra-fixa__preco .preco { font-size: 1.05rem; }
.compra-fixa__preco span { display: block; font-size: .74rem; color: var(--texto); }
.compra-fixa .btn { flex: 1; }

/* ---------------------------------------------------------
   Carrinho
   --------------------------------------------------------- */
.carrinho { padding: 26px 0 60px; }
.carrinho__grade { display: grid; gap: 26px; }

.carrinho-item {
  display: grid; grid-template-columns: 88px 1fr; gap: 14px;
  padding: 18px 0; border-bottom: 1px solid var(--linha);
}
.carrinho-item__foto { border-radius: var(--radio); overflow: hidden; background: var(--papel-2); aspect-ratio: 1/1; }
.carrinho-item__foto img { width: 100%; height: 100%; object-fit: cover; }
.carrinho-item__nome { font-size: .95rem; font-weight: 500; color: var(--tinta); margin-bottom: 3px; }
.carrinho-item__variacao { font-size: .82rem; color: var(--texto); margin-bottom: 8px; }
.carrinho-item__linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
/* Area de toque confortavel: o texto continua discreto, mas o dedo acerta. */
.carrinho-item__remover { background: none; border: 0; cursor: pointer; font-size: .82rem; color: var(--texto); padding: 11px 2px; min-height: 44px; display: inline-flex; align-items: center; }
.carrinho-item__remover span { border-bottom: 1px solid var(--linha-forte); padding-bottom: 2px; }
.carrinho-item__remover:hover { color: var(--erro); border-color: var(--erro); }
.carrinho-item__aviso { font-size: .8rem; color: var(--aviso); margin-top: 6px; }

.resumo {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--radio-g); padding: 22px;
}
.resumo h2 { font-size: 1.15rem; font-family: var(--sans); font-weight: 600; margin-bottom: 16px; }
.resumo__linha { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .92rem; color: var(--texto); }
.resumo__linha strong { color: var(--tinta); font-weight: 500; }
.resumo__linha--desconto strong { color: var(--sucesso); }
.resumo__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--linha);
}
.resumo__total span { font-size: .95rem; color: var(--tinta-2); }
.resumo__total strong { font-size: 1.45rem; font-family: var(--serif); color: var(--tinta); }
.resumo__pagamento { font-size: .86rem; color: var(--texto); margin-top: 8px; }
.resumo .btn--whatsapp { margin-top: 18px; }
.resumo__nota { font-size: .8rem; color: var(--texto); text-align: center; margin-top: 12px; line-height: 1.5; }

.cupom-form { display: flex; gap: 8px; margin: 16px 0; }
.cupom-form .entrada { text-transform: uppercase; }
.cupom-aplicado {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; margin: 16px 0;
  background: var(--papel-2); border-radius: var(--radio); font-size: .88rem;
}
.cupom-aplicado button { background: none; border: 0; cursor: pointer; color: var(--texto); text-decoration: underline; font-size: .82rem; }
.cupom-aplicado--guardado { opacity: .8; }

/* Escolha entre cupom e desconto do Pix.
   Os dois nunca somam, entao a tela mostra os dois precos e deixa a cliente
   decidir. Sao botoes de verdade (submit), nao divs clicaveis: funcionam no
   teclado, tem foco visivel e continuam funcionando sem JavaScript. */
.escolha-desconto {
  margin: 16px 0; padding: 12px; border: 1px solid var(--linha);
  border-radius: var(--radio); background: var(--papel-2);
  display: grid; gap: 8px;
}
.escolha-desconto__titulo {
  margin: 0 0 2px; font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tinta);
}
.escolha-desconto__op {
  display: grid; gap: 2px; text-align: left; width: 100%;
  padding: 10px 12px; min-height: 44px; cursor: pointer;
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--radio); color: inherit; font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.escolha-desconto__op:hover { border-color: var(--tinta); }
.escolha-desconto__op--ativa {
  border-color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta);
}
.escolha-desconto__nome { font-size: .84rem; font-weight: 600; }
.escolha-desconto__op--ativa .escolha-desconto__nome::after {
  content: ' • escolhido'; font-weight: 500; letter-spacing: .02em; opacity: .7;
}
.escolha-desconto__valor { font-size: 1.05rem; font-weight: 600; }
.escolha-desconto__nota { font-size: .76rem; color: var(--texto); }
.escolha-desconto__rodape { margin: 2px 0 0; font-size: .74rem; color: var(--texto); }

/* Enquanto o servidor responde a pagina fica levemente apagada, mas continua
   respondendo ao toque: quem quer tres unidades precisa tocar tres vezes no
   "+" sem esperar recarregar entre um toque e outro. */
.carrinho--atualizando { opacity: .65; transition: opacity .15s ease; }
.carrinho--atualizando .cupom-form,
.carrinho--atualizando [data-finalizar] { pointer-events: none; }
/* Nome e WhatsApp vem antes do botao e sempre a vista: sao eles que dizem
   quem escolheu as pecas. Se a conversa nao acontecer, e o unico jeito de a
   loja ir atras do cliente. */
.dados-cliente { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha); margin-bottom: 18px; }
.dados-cliente__titulo {
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta); margin: 0 0 12px;
}
.dados-cliente .campo:last-of-type { margin-bottom: 0; }
.dados-cliente__extra { margin-top: 12px; }
.dados-cliente__extra .campo { margin-bottom: 0; }
.dados-cliente__abrir {
  cursor: pointer; list-style: none; font-size: .88rem; color: var(--texto);
  padding: 10px 0 10px 22px; position: relative; min-height: 44px;
  display: flex; align-items: center;
}
.dados-cliente__abrir::-webkit-details-marker { display: none; }
.dados-cliente__abrir::before {
  content: '+'; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  font-size: 1.1rem; line-height: 1; color: var(--tinta);
}
.dados-cliente__extra[open] .dados-cliente__abrir::before { content: '−'; }
.dados-cliente__abrir:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.campo__rotulo--oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Confirmação do pedido */
.confirmacao { padding: 48px 0 64px; text-align: center; max-width: 620px; margin: 0 auto; }
.confirmacao__icone {
  width: 62px; height: 62px; margin: 0 auto 20px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--papel-2); color: var(--sucesso);
}
.confirmacao__icone svg { width: 28px; height: 28px; }
.confirmacao__numero {
  display: inline-block; margin: 14px 0 20px; padding: 8px 18px;
  border: 1px dashed var(--linha-forte); border-radius: 999px;
  font-size: .92rem; letter-spacing: .06em; color: var(--tinta);
}
.confirmacao__itens { text-align: left; margin: 26px 0; border-top: 1px solid var(--linha); }
.confirmacao__itens li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linha); font-size: .92rem; list-style: none; }
.confirmacao__itens ul { margin: 0; padding: 0; }
.confirmacao__passos { text-align: left; background: var(--papel-2); border-radius: var(--radio-g); padding: 20px; margin-top: 26px; font-size: .9rem; color: var(--texto); }
.confirmacao__passos strong { color: var(--tinta); }

/* ---------------------------------------------------------
   Páginas institucionais
   --------------------------------------------------------- */
.pagina { padding: 36px 0 60px; }
.pagina__conteudo { max-width: 68ch; }
.pagina__conteudo h2 { margin: 32px 0 12px; }
.pagina__conteudo p { color: var(--texto); white-space: pre-line; }

.erro-pagina { padding: 80px 20px 100px; text-align: center; }
.erro-pagina__codigo { font-family: var(--serif); font-size: 4rem; color: var(--linha-forte); display: block; line-height: 1; }
.erro-pagina h1 { margin: 12px 0 10px; }
.erro-pagina p { color: var(--texto); margin-bottom: 26px; }
.erro-pagina__acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------------------------------------------------------
   Rodapé
   --------------------------------------------------------- */
/* O rodape e a unica area escura do site, junto com a faixa do topo. Ele
   fecha a pagina como uma moldura e faz a vitrine branca parecer maior.
   Como o fundo e escuro, nenhuma cor aqui pode vir dos tokens do tema claro:
   todas sao declaradas na mao. */
.rodape { background: #101011; color: rgba(255,255,255,.68); border-top: 0; margin-top: 60px; padding: 44px 0 0; }
.rodape__grade { display: grid; gap: 32px; }
.rodape__nome { font-family: var(--serif); font-size: 1.5rem; color: #fff; display: block; margin-bottom: 10px; }
.rodape__marca p { font-size: .9rem; max-width: 40ch; }
.rodape__social { display: flex; gap: 16px; margin-top: 14px; }
.rodape__social a { font-size: .88rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px; }
.rodape__coluna { display: flex; flex-direction: column; gap: 9px; }
.rodape__coluna h2 { font-family: var(--sans); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 4px; }
.rodape__coluna a, .rodape__coluna p { font-size: .9rem; color: rgba(255,255,255,.72); margin: 0; }
.rodape__coluna a:hover { color: #fff; }
.rodape__base {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  margin-top: 40px; padding-block: 18px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .8rem; color: rgba(255,255,255,.5);
}
.rodape__admin:hover { color: #fff; }

/* WhatsApp flutuante */
.whats-flutuante {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 50;
  width: 54px; height: 54px; display: grid; place-items: center;
  background: var(--whatsapp); color: #fff; border-radius: 50%;
  box-shadow: 0 6px 20px rgba(31,170,89,.32);
  transition: transform var(--transicao);
}
.whats-flutuante:hover { transform: scale(1.05); }
.whats-flutuante svg { width: 27px; height: 27px; }
body.tem-barra-compra .whats-flutuante { bottom: calc(84px + env(safe-area-inset-bottom)); }
/* A barra de compra flutua sobre o fim da pagina: reservamos o espaco dela
   para que o rodape e os avisos nunca fiquem escondidos embaixo. */
body.tem-barra-compra .rodape { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
body.tem-barra-compra .toast-area { bottom: calc(152px + env(safe-area-inset-bottom)); }

/* Carregando */
.esqueleto { background: linear-gradient(90deg, var(--papel-2) 25%, #eae8e4 50%, var(--papel-2) 75%); background-size: 200% 100%; animation: brilho 1.4s infinite; border-radius: var(--radio); }
@keyframes brilho { to { background-position: -200% 0; } }
.btn--carregando { position: relative; color: transparent !important; pointer-events: none; }
.btn--carregando::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.32); border-top-color: var(--papel); border-radius: 50%;
  animation: girar .7s linear infinite;
}
.btn--contorno.btn--carregando::after { border-color: rgba(16,16,17,.18); border-top-color: var(--tinta); }
@keyframes girar { to { transform: rotate(360deg); } }

/* Toast */
/* O aviso sobe acima do botao verde flutuante: um cobria o outro, e a acao
   "Ver carrinho" caia justamente em cima do WhatsApp. */
.toast-area { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 120; display: grid; gap: 8px; width: min(92vw, 400px); }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-radius: 999px;
  background: #101011; color: #fff; border: 1px solid rgba(255,255,255,.14); font-size: .9rem;
  box-shadow: 0 12px 34px rgba(16,16,17,.28);
  animation: toastEntra .25s cubic-bezier(.4,0,.2,1);
}
.toast__texto { flex: 1 1 auto; }
.toast__acao {
  flex: none; color: var(--destaque); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; padding: 4px 2px; white-space: nowrap;
}
.toast--erro { background: var(--erro); }
.toast svg { width: 18px; height: 18px; flex: none; }
@keyframes toastEntra { from { opacity: 0; transform: translateY(14px); } }

/* =========================================================
   Telas maiores
   ========================================================= */
@media (min-width: 600px) {
  body { font-size: 16px; }
  .grade-produtos { grid-template-columns: repeat(3, 1fr); gap: 28px 18px; }
  .categorias-faixa { grid-template-columns: repeat(3, 1fr); }
  .vantagens { grid-template-columns: repeat(2, 1fr); }
  .rodape__grade { grid-template-columns: repeat(2, 1fr); }
  .carrinho-item { grid-template-columns: 110px 1fr; }
}

@media (min-width: 900px) {
  :root { --gutter: 32px; }

  .cabecalho__barra { min-height: 76px; gap: 20px; }
  .menu-abrir { display: none; }
  .marca { flex: none; }
  .marca__logo { max-height: 46px; }

  .nav-principal { display: flex; align-items: center; gap: 26px; flex: 1; }
  .nav-principal > a, .nav-menu__botao {
    position: relative; font-size: .9rem; color: var(--tinta-2);
    background: none; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 0;
  }
  .nav-principal > a::after, .nav-menu__botao::after {
    content: ""; position: absolute; inset: auto 0 0; height: 1px;
    background: var(--tinta); transform: scaleX(0); transform-origin: left;
    transition: transform var(--transicao);
  }
  .nav-principal > a:hover::after, .nav-principal > a.ativo::after, .nav-menu:hover .nav-menu__botao::after { transform: scaleX(1); }
  .nav-menu__botao svg { width: 15px; height: 15px; }
  .nav-menu { position: relative; }
  .nav-menu__painel {
    position: absolute; top: calc(100% + 12px); left: -18px; z-index: 70;
    min-width: 220px; padding: 12px 0;
    background: var(--branco); border: 1px solid var(--linha-forte); border-radius: var(--radio-g);
    box-shadow: 0 18px 44px rgba(16,16,17,.12);
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    max-height: min(70vh, 520px); overflow-y: auto;
  }
  /* O atributo hidden e a unica coisa que fecha esse menu. Sem esta linha o
     display:grid acima ganha do estilo padrao do navegador e o painel fica
     aberto para sempre, cobrindo a pagina inteira. */
  .nav-menu__painel[hidden] { display: none; }
  .nav-menu__painel a { padding: 9px 20px; font-size: .9rem; color: var(--tinta-2); }
  .nav-menu__painel a:hover { background: var(--papel-2); color: var(--tinta); }
  .nav-menu__todos { grid-column: 1 / -1; border-top: 1px solid var(--linha); margin-top: 8px; padding-top: 14px !important; color: var(--destaque) !important; }

  .capa--enxuta:not(.capa--com-foto) { min-height: 300px; }
  .capa__conteudo { padding: 56px 0 52px; max-width: 40rem; }

  .vantagens { grid-template-columns: repeat(4, 1fr); }
  .grade-produtos { grid-template-columns: repeat(4, 1fr); gap: 36px 22px; }
  .categorias-faixa { grid-template-columns: repeat(4, 1fr); gap: 18px; }

  .secao { padding: 72px 0; }
  /* Estas tres precisam vir depois de .secao: mesma forca, quem fala por
     ultimo manda. Sem isso o espaco de 72px volta e separa os filtros da
     vitrine com um vao vazio no meio da tela. */
  .secao--apertada { padding: 44px 0; }
  .filtros-home { padding-bottom: 0; }
  .secao--vitrine { padding-top: 34px; }
  .catalogo-barra { top: var(--altura-cabecalho, 110px); }
  .chips--rolagem { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding: 0 0 2px; }
  .secoes { margin-bottom: 22px; }
  .secoes__aba { padding: 14px 2px; font-size: .95rem; margin-right: 28px; }
  .filtro-abrir { display: none; }

  /* Catálogo com filtros na lateral */
  .catalogo-layout { display: grid; grid-template-columns: 230px 1fr; gap: 44px; align-items: start; padding-bottom: 72px; }
  /* O !important tambem vence o atributo hidden do HTML: no computador
     os filtros ficam sempre na lateral, com ou sem JavaScript. */
  .filtros-painel, .filtros-painel[hidden] {
    position: sticky; top: 140px; inset: auto; z-index: 1;
    display: block !important;
  }
  .filtros-painel__fundo, .filtros-painel__topo { display: none; }
  .filtros-painel__caixa { position: static; max-height: none; background: none; animation: none; }
  .filtros-painel__corpo { padding: 0; }
  .filtros-painel__base { position: static; padding: 18px 0 0; background: none; }

  .produto__grade { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
  .galeria { position: sticky; top: 100px; }
  .galeria__miniaturas { flex-wrap: wrap; overflow: visible; }
  .produto__acoes .btn { min-width: 0; }
  .compra-fixa { display: none; }
  body.tem-barra-compra .rodape { padding-bottom: 0; }
  body.tem-barra-compra .toast-area { bottom: 24px; }

  .carrinho__grade { grid-template-columns: 1fr 370px; gap: 48px; align-items: start; }
  .carrinho__resumo { position: sticky; top: 100px; }

  .rodape__grade { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 44px; }
}

@media (min-width: 1200px) {
  .grade-produtos { gap: 44px 26px; }
}

/* Acessibilidade: respeitar quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  /* Sem movimento a faixa vira uma tarja normal: uma frase so, centralizada.
     Sem isto ela ficaria parada e encostada na margem esquerda. */
  .cabecalho__aviso-trilha { animation: none !important; width: 100%; justify-content: center; }
  .cabecalho__aviso-grupo + .cabecalho__aviso-grupo { display: none; }
  .cabecalho__aviso-item:not(:first-child) { display: none; }
  .cabecalho__aviso-item { padding-right: 0; }
  .cabecalho__aviso-sep { display: none; }
}

@media print {
  .cabecalho, .rodape, .whats-flutuante, .compra-fixa, .filtros-painel { display: none !important; }
}

/* =========================================================
   Promoção anunciada na página inicial
   Fica entre a capa e a vitrine. A regra aqui foi conter a mão: promoção em
   loja de joia não pode parecer liquidação de outlet, senão a peça de R$ 300
   passa a valer R$ 30 na cabeça de quem olha. Por isso nada de vermelho, nada
   de piscar — o mesmo preto e prata do resto, só que com uma moldura
   luminosa e o número do desconto em corpo grande.
   ========================================================= */

.promo-destaque {
  position: relative;
  background: var(--papel-2);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  overflow: hidden;
}
/* Filete de prata nas duas bordas: é o que amarra este bloco ao acabamento
   do resto do site sem precisar de moldura desenhada. */
.promo-destaque::before,
.promo-destaque::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--prata-filete); opacity: .7; pointer-events: none;
}
.promo-destaque::before { top: 0; }
.promo-destaque::after  { bottom: 0; }

.promo-destaque__interno {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  padding-top: 30px; padding-bottom: 30px;
}

.promo-destaque__texto { min-width: 0; }

.promo-destaque__titulo {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  margin: 0 0 8px; line-height: 1;
}
/* O número em prata escovada. background-clip no texto é o mesmo recurso do
   resto do site; o color de reserva garante leitura se o navegador não
   suportar. */
.promo-destaque__numero {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 11vw, 4rem);
  font-weight: 600;
  line-height: .9;
  color: var(--tinta);
  background: var(--prata-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .promo-destaque__numero { -webkit-text-fill-color: currentColor; background: none; }
}
.promo-destaque__sufixo {
  font-family: var(--sans);
  font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto);
}

.promo-destaque__chamada {
  font-family: var(--serif);
  font-size: 1.35rem; line-height: 1.35;
  color: var(--tinta-2);
  margin: 0 0 8px; max-width: 40ch;
}
.promo-destaque__nota {
  margin: 0; font-size: .84rem; color: var(--texto-fraco);
}
.promo-destaque__botao { flex: none; }

@media (min-width: 800px) {
  .promo-destaque__interno {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 32px; padding-top: 38px; padding-bottom: 38px;
  }
  .promo-destaque__botao { min-width: 200px; }
}

/* ==========================================================================
   Frete grátis
   Dois lugares, uma regra só: o card da home anuncia, a barra do carrinho
   acompanha. O card não é colorido de propósito — se ele gritasse mais que a
   promoção do topo, as duas brigariam e nenhuma seria lida.
   ========================================================================== */
.frete-card {
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  background: var(--papel);
}
.frete-card__interno {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding-top: 22px; padding-bottom: 22px;
}
.frete-card__icone {
  width: 30px; height: 30px; flex: none;
  fill: none; stroke: var(--tinta); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.frete-card__titulo {
  margin: 0 0 4px; font-size: 1.05rem; font-weight: 500;
  letter-spacing: .01em; color: var(--tinta);
}
.frete-card__chamada { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--texto); }
.frete-card__botao { align-self: stretch; text-align: center; }

@media (min-width: 720px) {
  .frete-card__interno {
    flex-direction: row; align-items: center; gap: 20px;
    padding-top: 26px; padding-bottom: 26px;
  }
  .frete-card__texto { flex: 1; }
  .frete-card__botao { align-self: auto; min-width: 190px; }
}

/* Barra do carrinho. Aparece dentro do resumo, logo depois do total, porque
   é ali que a pessoa decide se volta ao catálogo ou finaliza. */
.frete-barra {
  margin: 14px 0 4px; padding: 12px 14px;
  border: 1px solid var(--linha-forte); border-radius: 3px;
  background: var(--papel-2);
}
.frete-barra__topo {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .82rem; line-height: 1.45; color: var(--tinta-2);
}
.frete-barra__icone {
  width: 18px; height: 18px; flex: none; margin-top: 1px;
  fill: none; stroke: var(--tinta); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.frete-barra__trilho {
  margin-top: 10px; height: 4px; border-radius: 99px;
  background: var(--linha); overflow: hidden;
}
.frete-barra__preenchido {
  display: block; height: 100%; background: var(--tinta);
  border-radius: 99px;
  /* A largura muda quando a pessoa mexe na quantidade; o passo suave deixa
     claro que foi a ação dela que empurrou a barra. */
  transition: width .32s ease;
}
/* Já conseguiu: a barra continua na tela (tirar uma peça pode desfazer isso),
   mas troca de cor para virar confirmação em vez de cobrança. */
.frete-barra--ok { border-color: var(--sucesso); background: rgba(23,128,90,.05); }
.frete-barra--ok .frete-barra__icone { stroke: var(--sucesso); }
.frete-barra--ok .frete-barra__topo { color: var(--sucesso); }
.frete-barra--ok .frete-barra__preenchido { background: var(--sucesso); }

@media (prefers-reduced-motion: reduce) {
  .frete-barra__preenchido { transition: none; }
}

/* ---------------------------------------------------------
   Avaliações das peças
   Nota é informação de confiança: precisa ser lida de relance,
   sem virar o assunto principal da página.
   --------------------------------------------------------- */
.avaliacoes { scroll-margin-top: 80px; }
.avaliacoes__grade { display: grid; gap: 28px; }

/* Fileira de estrelas: camada cinza inteira embaixo, dourada por cima
   cortada na largura da nota. Meia estrela sem desenho de meia estrela. */
.estrelas {
  position: relative; display: inline-flex; align-items: center;
  line-height: 0; flex: none;
}
.estrelas__base, .estrelas__nota { display: inline-flex; gap: 2px; }
.estrelas svg { width: 15px; height: 15px; }
.estrelas__base svg { fill: var(--linha-forte); }
.estrelas__nota {
  position: absolute; inset: 0; overflow: hidden;
  width: var(--preenchido, 0%);
}
.estrelas__nota svg { fill: var(--nota-cor, #c8a24a); }
.estrelas--grande svg { width: 21px; height: 21px; }
.estrelas--pequena svg { width: 13px; height: 13px; }

/* Nota ao lado do título da peça */
.produto__nota {
  display: inline-flex; align-items: center; gap: 8px;
  margin: -4px 0 12px; text-decoration: none; color: var(--texto);
  font-size: .84rem;
}
.produto__nota strong { color: var(--tinta); font-weight: 600; }
.produto__nota span { text-decoration: underline; text-underline-offset: 3px; }
.produto__nota:hover span { color: var(--tinta); }

/* Resumo: média grande + quantas deram cada nota */
.nota-resumo {
  display: grid; gap: 20px; align-items: center;
  padding: 18px; margin-bottom: 24px;
  border: 1px solid var(--linha); border-radius: var(--radio-g);
  background: var(--papel-2);
}
.nota-resumo__media { text-align: center; display: grid; gap: 6px; justify-items: center; }
.nota-resumo__media strong { font-size: 2.4rem; font-weight: 600; line-height: 1; color: var(--tinta); }
.nota-resumo__media span { font-size: .8rem; color: var(--texto); }
.nota-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nota-barras__linha { display: grid; grid-template-columns: 12px 1fr 22px; align-items: center; gap: 8px; }
.nota-barras__rotulo, .nota-barras__qtd { font-size: .75rem; color: var(--texto); }
.nota-barras__qtd { text-align: right; }
.nota-barras__trilho { height: 5px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.nota-barras__cheio { display: block; height: 100%; border-radius: 99px; background: var(--nota-cor, #c8a24a); }

/* Lista de opiniões */
.avaliacao-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.avaliacao { padding-bottom: 20px; border-bottom: 1px solid var(--linha); }
.avaliacao:last-child { border-bottom: 0; padding-bottom: 0; }
.avaliacao__topo { display: flex; align-items: flex-start; gap: 10px; }
/* Iniciais no lugar de foto: ninguém tem retrato publicado sem ter pedido. */
.avaliacao__inicial {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--papel);
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
}
.avaliacao__topo > div { flex: 1 1 auto; min-width: 0; }
.avaliacao__nome {
  margin: 0; font-size: .92rem; font-weight: 500; color: var(--tinta);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.avaliacao__data { margin: 2px 0 0; font-size: .76rem; color: var(--texto-fraco); }
.avaliacao__texto { margin: 10px 0 0; font-size: .92rem; line-height: 1.6; color: var(--tinta-2); }
/* Só aparece quando existe pedido vendido com esta peça dentro. */
.selo-compra {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .68rem; font-weight: 500; letter-spacing: .02em;
  color: var(--sucesso);
}
.selo-compra svg { width: 12px; height: 12px; stroke-linecap: round; stroke-linejoin: round; }
.avaliacao__resposta {
  margin: 12px 0 0; padding: 12px 14px;
  border-left: 2px solid var(--linha-forte); background: var(--papel-2);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.avaliacao__resposta p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--tinta-2); }
.avaliacao__resposta-quem {
  font-size: .72rem !important; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texto-fraco) !important; margin-bottom: 4px !important;
}
.avaliacoes__vazio {
  margin: 0; padding: 20px; border: 1px dashed var(--linha-forte);
  border-radius: var(--radio-g); font-size: .9rem; line-height: 1.6; color: var(--texto);
}

/* Formulário */
.form-avaliacao {
  padding: 20px; border: 1px solid var(--linha); border-radius: var(--radio-g);
  background: var(--branco); scroll-margin-top: 80px; align-self: start;
}
.form-avaliacao__titulo { margin: 0 0 16px; font-size: 1.05rem; font-weight: 600; }
.form-avaliacao__aviso { margin: 12px 0 0; font-size: .76rem; line-height: 1.5; color: var(--texto-fraco); }
.campo__opcional { font-weight: 400; color: var(--texto-fraco); }

.estrelas-campo { border: 0; padding: 0; margin: 0 0 18px; }
.estrelas-campo legend {
  padding: 0; font-size: .82rem; font-weight: 500; color: var(--tinta-2); margin-bottom: 6px;
}
/* As estrelas ficam em ordem invertida no HTML (5 primeiro) para o seletor
   ~ conseguir pintar as anteriores; o row-reverse devolve a ordem visual. */
.estrelas-campo__linha { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.estrelas-campo input { position: absolute; opacity: 0; width: 0; height: 0; }
.estrelas-campo label { cursor: pointer; padding: 2px; line-height: 0; }
.estrelas-campo label svg { width: 30px; height: 30px; fill: var(--linha-forte); transition: fill .15s ease; }
.estrelas-campo label:hover svg,
.estrelas-campo label:hover ~ label svg,
.estrelas-campo input:checked ~ label svg { fill: var(--nota-cor, #c8a24a); }
.estrelas-campo input:focus-visible + label svg { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* Campo isca contra robô: fora da tela, sem display:none (robô ignora o que
   está escondido por display) e sem foco por teclado. */
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 640px) {
  .nota-resumo { grid-template-columns: auto 1fr; gap: 28px; padding: 22px 24px; }
}
@media (min-width: 900px) {
  .avaliacoes__grade { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .estrelas-campo label svg { transition: none; }
}

/* Nota no card: dois números e cinco estrelas pequenas. Só aparece quando a
   peça tem avaliação aprovada — card sem nota não mostra estrela apagada. */
.produto-card__nota {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 0 0; font-size: .74rem; color: var(--texto);
}

/* ---------------------------------------------------------------------
   Vozes das clientes
   ---------------------------------------------------------------------
   Nunca ha foto de perfil aqui — so a inicial num circulo de prata. Nao e
   economia de espaco: e que publicar o rosto de quem mandou um recado no
   WhatsApp e ir longe demais.

   No celular vira uma faixa que desliza com o dedo (scroll-snap, sem
   JavaScript nenhum). No desktop e uma grade calma de tres colunas. */
.secao--vozes { background: var(--papel-2); border-top: 1px solid var(--linha); }

.vozes {
  list-style: none; margin: 0; padding: 0 0 6px;
  display: grid; gap: 14px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 82%);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vozes::-webkit-scrollbar { display: none; }

.voz {
  scroll-snap-align: start;
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--radio);
  padding: 20px 20px 18px;
}

/* Aspa grande de enfeite, atras do texto. Fica clara de proposito: e textura,
   nao informacao — por isso sai da arvore de acessibilidade no HTML. */
.voz__aspas {
  position: absolute; top: 2px; right: 16px; margin: 0;
  font-family: var(--serif); font-size: 4.2rem; line-height: 1;
  color: var(--linha); pointer-events: none; user-select: none;
}

.voz__texto {
  margin: 0; border: 0; padding: 0;
  font-size: .95rem; line-height: 1.65; color: var(--tinta-2);
  position: relative;
}

.voz__quem {
  display: flex; align-items: center; gap: 11px;
  margin-top: auto; padding-top: 13px;
  border-top: 1px solid var(--linha);
}
.voz__quem strong { display: block; font-size: .9rem; font-weight: 600; color: var(--tinta); }
.voz__quem small  { display: block; font-size: .78rem; color: var(--texto-fraco); margin-top: 1px; }

.voz__inicial {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: var(--tinta);
  background: linear-gradient(145deg, #f2f1ee 0%, #ffffff 42%, #ddd9d2 100%);
  border: 1px solid var(--linha-forte);
}

@media (min-width: 720px) {
  .vozes {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
  }
}

/* -----------------------------------------------------------------
   Leve junto: o acessorio oferecido no carrinho.

   Uma lista, e nao uma vitrine. O carrinho e a tela de fechar o
   pedido; uma segunda grade de produtos aqui competiria com o botao
   de finalizar e faria a cliente recomecar as compras. Foto pequena,
   frase curta, um botao — cabe no canto do olho sem atrapalhar.
   ----------------------------------------------------------------- */
.leve-junto {
  margin-top: 22px; padding: 18px; border: 1px solid var(--linha);
  border-radius: var(--radio); background: var(--papel-2);
}
.leve-junto__titulo {
  font-size: .78rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texto); margin: 0 0 14px;
}
.leve-junto__lista { list-style: none; margin: 0; padding: 0; }
.leve-junto__item {
  display: grid; grid-template-columns: 64px 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--linha);
}
.leve-junto__item:first-child { border-top: 0; padding-top: 0; }
.leve-junto__item:last-child { padding-bottom: 0; }
.leve-junto__foto {
  display: block; border-radius: var(--radio); overflow: hidden;
  background: var(--branco); aspect-ratio: 1/1;
}
.leve-junto__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leve-junto__texto { min-width: 0; }
.leve-junto__nome {
  display: block; font-size: .9rem; font-weight: 500; color: var(--tinta);
  line-height: 1.3;
}
.leve-junto__frase {
  font-size: .8rem; color: var(--texto); margin: 3px 0 0; line-height: 1.4;
}
.leve-junto__preco { font-size: .88rem; color: var(--tinta); margin: 5px 0 0; }
.leve-junto__preco .preco--antigo { margin-right: 6px; }
.leve-junto__acao { margin: 0; }

/* No celular o botao desce para a linha de baixo em vez de espremer o
   nome da peca em duas letras por linha. */
@media (max-width: 520px) {
  .leve-junto { padding: 14px; }
  .leve-junto__item { grid-template-columns: 56px 1fr; }
  .leve-junto__acao { grid-column: 2; }
  .leve-junto__acao .btn { width: 100%; min-height: 44px; }
}