/* Visual "joalheria clean" aprovado em 10/08 — copiado sem mudança do template-app.html (v6.1).
   Única adição: os pontinhos da galeria, para peça com mais de uma foto (02/10). */
:root{
  --marfim:#FAF7F1; --card:#FFFFFF; --tinta:#2B2118; --tinta2:#6E6154;
  --ouro:#B08D57; --ouro-claro:#D9C29A; --champanhe:#F3EBDD; --linha:#E8DFD0;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;background:var(--marfim);color:var(--tinta);max-width:480px;margin:0 auto;min-height:100vh}

/* HERO */
.hero{padding:64px 24px 40px;text-align:center;background:
  radial-gradient(120% 90% at 50% 0%, #FFFDF9 0%, var(--marfim) 60%, #F1E9DB 100%)}
.hero img{width:180px;max-width:60%;display:block;margin:0 auto}
.hero .linha{width:56px;height:1px;background:var(--ouro);margin:22px auto 14px}
.hero p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--tinta2);letter-spacing:.08em}

/* TOPO STICKY */
.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:10px 16px;background:rgba(250,247,241,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha)}
.topo img{height:26px}
.topo .busca-wrap{flex:1}
.topo input{width:100%;border:1px solid var(--linha);background:var(--card);border-radius:99px;
  padding:8px 16px;font-family:'Jost',sans-serif;font-size:14px;color:var(--tinta);outline:none}
.topo input::placeholder{color:#B4A995;letter-spacing:.02em}
.topo input:focus{border-color:var(--ouro-claro)}

/* COLEÇÕES */
.colecoes{display:flex;gap:4px;overflow-x:auto;padding:14px 16px 2px;scrollbar-width:none}
.colecoes::-webkit-scrollbar{display:none}
.col{flex:0 0 auto;border:0;background:none;font-family:'Jost',sans-serif;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta2);padding:8px 12px 10px;cursor:pointer;
  position:relative}
.col.ativa{color:var(--tinta)}
.col.ativa::after{content:'';position:absolute;left:12px;right:12px;bottom:2px;height:1.5px;background:var(--ouro)}

/* FILTROS */
.filtros{display:flex;gap:8px;padding:8px 16px 0}
.filtros:empty{display:none}
.filtros select{border:1px solid var(--linha);background:var(--card);border-radius:8px;
  padding:6px 10px;font-family:'Jost',sans-serif;font-size:13px;color:var(--tinta2)}

/* GRID */
.lista{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 16px 32px}
.peca{background:var(--card);border:1px solid var(--linha);border-radius:14px;overflow:hidden;
  cursor:pointer;opacity:0;transform:translateY(10px);animation:surge .5s ease forwards;
  display:flex;flex-direction:column}
@keyframes surge{to{opacity:1;transform:none}}
.foto{position:relative;aspect-ratio:4/5;background:var(--champanhe)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.tag{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.88);color:var(--ouro);
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border-radius:99px;
  border:1px solid var(--ouro-claro)}
.ph-box{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.ph{font-family:'Cormorant Garamond',serif;font-size:34px;color:var(--ouro);letter-spacing:.06em}
.ph-sub{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta2)}
.dados{padding:12px 12px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
.dados h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:17px;line-height:1.15}
.cod{font-size:10.5px;letter-spacing:.1em;color:#A79A85;text-transform:uppercase}
.preco{font-size:16px;font-weight:600;margin-top:auto;padding-top:8px}
.parcela{font-size:11.5px;color:var(--tinta2)}
.btn-mini{margin-top:10px;text-align:center;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ouro);border:1px solid var(--ouro-claro);border-radius:99px;padding:8px 6px;text-decoration:none}

/* VAZIO */
.vazio{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--tinta2)}
.vazio .coroa{font-family:'Cormorant Garamond',serif;font-size:42px;color:var(--ouro)}
.vazio p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;margin-top:8px}

/* DETALHE */
.detalhe{position:fixed;inset:0;z-index:50;background:var(--marfim);max-width:480px;margin:0 auto;
  transform:translateY(102%);transition:transform .38s cubic-bezier(.32,.72,.28,1);overflow-y:auto;
  overscroll-behavior:contain}
.detalhe.aberto{transform:none}
.det-topo{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:rgba(250,247,241,.92);backdrop-filter:blur(10px)}
.det-topo button{border:1px solid var(--linha);background:var(--card);width:36px;height:36px;border-radius:99px;
  font-size:20px;color:var(--tinta);cursor:pointer;line-height:1}
.det-topo span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta2)}
.galeria{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;background:var(--champanhe)}
.galeria img{width:100%;flex:0 0 100%;aspect-ratio:4/5;object-fit:cover;scroll-snap-align:center}
.galeria .ph-box{aspect-ratio:4/5;flex:0 0 100%}
/* Até 3 fotos (02/10): pontinhos só quando há mais de uma. Ficam acima da borda arredondada do det-info. */
.galeria-caixa{position:relative}
.galeria-caixa .galeria{scrollbar-width:none}
.galeria-caixa .galeria::-webkit-scrollbar{display:none}
.pontos{position:absolute;left:0;right:0;bottom:30px;display:flex;justify-content:center;gap:7px;pointer-events:none}
.ponto{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(43,33,24,.18);
  transition:width .2s,background .2s}
.ponto.ativo{width:18px;background:var(--ouro)}
.det-info{padding:22px 22px 40px;background:var(--card);border-radius:22px 22px 0 0;margin-top:-18px;
  position:relative;min-height:40vh}
.det-info h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:27px;line-height:1.1}
.det-info .cod{margin-top:4px}
.det-info .desc{font-size:14.5px;font-weight:300;color:var(--tinta2);line-height:1.55;margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{font-size:11px;letter-spacing:.08em;border:1px solid var(--linha);background:var(--marfim);
  border-radius:99px;padding:5px 12px;color:var(--tinta2)}
.filete{width:44px;height:1px;background:var(--ouro);margin:18px 0 14px}
.det-info .preco{font-size:24px;font-weight:600}
.det-info .parcela{font-size:13px}
.btn{display:block;text-align:center;background:var(--ouro);color:#fff;border-radius:99px;
  padding:15px;margin-top:20px;text-decoration:none;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.btn:active{opacity:.85}

/* RODAPÉ */
.rodape{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 16px 46px;
  border-top:1px solid var(--linha);text-align:center}
.rodape span{font-family:'Cormorant Garamond',serif;font-size:15px;letter-spacing:.34em;color:var(--tinta2)}
.rodape a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro);text-decoration:none}