/* =========================================================
   Atacadão Navegantes — protótipo de e-commerce
   Paleta tirada da marca: preto, dourado, papel.
   ========================================================= */

:root{
  --preto:#0E0D0B;
  --preto2:#1C1A17;
  --tinta:#2B2823;
  --tinta2:#5C564C;
  --tinta3:#8B8477;
  --papel:#FFFFFF;
  --papel2:#FAF7F2;
  --papel3:#F1ECE3;
  --fio:#E3DCD0;
  --ouro:#B8912F;
  --ouro-vivo:#E7C463;
  --ouro-claro:#F6EBCD;
  --ouro-escuro:#7A5E12;
  --verde:#2E7D5B;
  --vermelho:#B23B2E;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --raio:2px;
  --sombra:0 1px 2px rgba(14,13,11,.05), 0 8px 24px rgba(14,13,11,.06);
  --sombra-alta:0 2px 6px rgba(14,13,11,.08), 0 18px 48px rgba(14,13,11,.12);
  --max:1280px;
  --transicao:200ms cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
ul{list-style:none}

.env{max-width:var(--max);margin:0 auto;padding:0 24px}
.oculto{display:none !important}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em;color:var(--preto)}
h1{font-size:clamp(34px,5vw,58px)}
h2{font-size:clamp(26px,3.2vw,40px)}
h3{font-size:clamp(19px,1.8vw,24px)}
.sobre{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ouro-escuro)}
.chapeu{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta3)}
.mono{font-variant-numeric:tabular-nums}

/* ---------- barra de avisos ---------- */
.avisos{background:var(--preto);color:#EDE6D8;font-size:12.5px;letter-spacing:.02em}
.avisos .env{position:relative;height:40px;overflow:hidden}
.avisos .env span{position:absolute;inset:0;display:block;line-height:40px;
  opacity:0;transform:translateY(6px);transition:opacity 520ms ease,transform 520ms ease;
  white-space:nowrap;padding:0 16px;text-align:center;overflow:hidden;text-overflow:ellipsis}
.avisos .env span.on{opacity:1;transform:none}
.avisos b{color:var(--ouro-vivo);font-weight:600}

/* ---------- cabeçalho ---------- */
.topo{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--fio)}
.topo-l{display:flex;align-items:center;gap:28px;height:84px;transition:height 260ms cubic-bezier(.4,0,.2,1)}
.topo.compacto{box-shadow:0 1px 0 var(--fio),0 10px 30px rgba(14,13,11,.06)}
.topo.compacto .topo-l{height:64px}
.topo.compacto .marca img{width:42px;height:42px}
.topo.compacto .marca-txt b{font-size:17px}
.marca{display:flex;align-items:center;gap:12px;flex-shrink:0}
.marca img{width:54px;height:54px;transition:width 260ms,height 260ms}
.marca-txt{line-height:1.1}
.marca-txt b{display:block;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--preto)}
.marca-txt span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta3)}

.busca{flex:1;position:relative;max-width:460px}
.busca input{width:100%;height:44px;padding:0 44px 0 16px;border:1px solid var(--fio);
  border-radius:var(--raio);background:var(--papel2);font-size:14px;transition:var(--transicao)}
.busca input:focus{outline:none;border-color:var(--ouro);background:#fff;
  box-shadow:0 0 0 3px rgba(184,145,47,.12)}
.busca button{position:absolute;right:6px;top:6px;width:32px;height:32px;
  display:grid;place-items:center;color:var(--tinta2)}

.acoes{display:flex;align-items:center;gap:6px;margin-left:auto}
.icone{position:relative;display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-radius:var(--raio);font-size:13.5px;font-weight:500;transition:var(--transicao)}
.icone:hover{background:var(--papel3)}
.icone .selo{position:absolute;top:2px;right:4px;min-width:18px;height:18px;padding:0 5px;
  background:var(--ouro);color:#fff;font-size:10.5px;font-weight:700;border-radius:9px;
  display:grid;place-items:center;line-height:1}
.menu-btn{display:none}

.nav{border-top:1px solid var(--fio)}
.nav ul{display:flex;gap:30px;height:46px;align-items:center;overflow-x:auto;scrollbar-width:none}
.nav ul::-webkit-scrollbar{display:none}
.nav a{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta2);white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent;
  transition:var(--transicao)}
.nav a:hover,.nav a.ativo{color:var(--preto);border-color:var(--ouro)}
.nav a.destaque{color:var(--ouro-escuro);font-weight:600}

@media(max-width:900px){
  .topo-l{height:64px;gap:14px}
  .busca{order:3;flex-basis:100%;max-width:none;margin-bottom:12px}
  .topo-l{flex-wrap:wrap;height:auto;padding-top:12px}
  .marca img{width:44px;height:44px}
  .icone span{display:none}
}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 28px;border-radius:var(--raio);font-size:14px;font-weight:600;
  letter-spacing:.03em;transition:var(--transicao);border:1px solid transparent;text-align:center}
.btn-p{background:var(--preto);color:#fff}
.btn-p:hover{background:var(--tinta);transform:translateY(-1px);box-shadow:var(--sombra-alta)}
.btn-o{background:linear-gradient(105deg,var(--ouro-escuro),var(--ouro-vivo) 55%,var(--ouro));
  color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.btn-o:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:var(--sombra-alta)}
.btn-s{background:#fff;border-color:var(--preto);color:var(--preto)}
.btn-s:hover{background:var(--preto);color:#fff}
.btn-f{background:var(--papel3);color:var(--tinta)}
.btn-f:hover{background:var(--fio)}
.btn-bloco{width:100%}
.btn-peq{height:40px;padding:0 18px;font-size:13px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- vitrine ---------- */
.vitrine{position:relative;background:var(--preto);color:#fff;overflow:hidden}
.vitrine::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 78% 12%,rgba(231,196,99,.20),transparent 58%),
             radial-gradient(80% 70% at 8% 96%,rgba(184,145,47,.14),transparent 60%)}
.vitrine .env{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:56px;align-items:center;padding-top:84px;padding-bottom:84px}
.vitrine h1{color:#fff;max-width:13ch}
.vitrine h1 em{font-style:normal;
  background:linear-gradient(100deg,var(--ouro-vivo),#F7E4B0 50%,var(--ouro));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.vitrine p.lead{margin-top:20px;font-size:17px;line-height:1.62;color:#CFC7B8;max-width:44ch}
.vitrine .cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.vitrine .prova{display:flex;gap:34px;margin-top:44px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.14)}
.vitrine .prova b{display:block;font-family:var(--serif);font-size:28px;color:var(--ouro-vivo);line-height:1}
.vitrine .prova span{font-size:12.5px;color:#A9A296;letter-spacing:.04em}
.vitrine-img{position:relative;aspect-ratio:4/5;border-radius:var(--raio);overflow:hidden;
  border:1px solid rgba(231,196,99,.25);box-shadow:0 40px 80px rgba(0,0,0,.45)}
/* painel da vitrine: uma peça grande e duas ao lado, todas clicáveis */
.vpainel{display:grid;grid-template-columns:1.32fr 1fr;grid-template-rows:1fr 1fr;
  gap:3px;width:100%;height:100%;background:#0B0A09}
.vpainel a{position:relative;display:block;overflow:hidden;text-decoration:none}
.vpainel a:first-child{grid-row:1/3}
.vpainel img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 700ms cubic-bezier(.22,.8,.28,1)}
.vpainel a:hover img{transform:scale(1.045)}
/* funde a foto com o preto do bloco, senão o recorte fica colado e amador */
.vpainel a::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(178deg,rgba(11,10,9,.30) 0%,rgba(11,10,9,0) 34%,rgba(11,10,9,.60) 100%)}
.vpainel figcaption{position:absolute;left:12px;right:12px;bottom:11px;z-index:2;
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#F2ECE0;
  text-shadow:0 1px 10px rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vpainel .preco{display:block;font-family:var(--serif);font-size:15px;letter-spacing:0;
  text-transform:none;color:var(--ouro-vivo);margin-top:2px}
/* uma imagem só (assets/hero.jpg), quando ela existir */
.vitrine-img.solo img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){
  .vitrine .env{grid-template-columns:1fr;padding-top:52px;padding-bottom:52px;gap:36px}
  .vitrine-img{aspect-ratio:16/10}
  .vpainel{grid-template-columns:1.2fr 1fr}
  .vitrine .prova{gap:24px}
}
@media(max-width:520px){.vitrine-img{aspect-ratio:4/3}.vpainel figcaption{font-size:10.5px}}

/* ---------- faixa de benefícios ---------- */
.beneficios{border-bottom:1px solid var(--fio);background:var(--papel2)}
.beneficios .env{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.ben{display:flex;align-items:center;gap:14px;padding:22px 20px}
.ben + .ben{border-left:1px solid var(--fio)}
.ben svg{flex-shrink:0;color:var(--ouro-escuro)}
.ben b{display:block;font-size:13.5px;font-weight:600;color:var(--preto)}
.ben span{font-size:12.5px;color:var(--tinta2)}
@media(max-width:900px){
  .beneficios .env{grid-template-columns:1fr 1fr}
  .ben:nth-child(odd){border-left:0}
  .ben:nth-child(n+3){border-top:1px solid var(--fio)}
}
@media(max-width:520px){.beneficios .env{grid-template-columns:1fr}.ben{border-left:0 !important}}

/* ---------- seções ---------- */
.secao{padding:76px 0}
.secao-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}
.secao-cab p{color:var(--tinta2);margin-top:8px;max-width:56ch}
.link-mais{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ouro-escuro);border-bottom:1px solid var(--ouro);padding-bottom:3px;white-space:nowrap}

/* ---------- grade de produtos ---------- */
.grade{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px}
@media(max-width:1040px){.grade{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.grade{grid-template-columns:repeat(2,1fr);gap:22px 16px}}

.card{position:relative;display:flex;flex-direction:column}
.card-img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--papel3);
  border-radius:var(--raio)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 500ms cubic-bezier(.4,0,.2,1)}
.card:hover .card-img img{transform:scale(1.045)}
.card-selos{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;z-index:2}
.selo-t{padding:5px 10px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;border-radius:var(--raio);background:var(--preto);color:#fff}
.selo-t.ouro{background:linear-gradient(100deg,var(--ouro-escuro),var(--ouro-vivo));color:#fff}
.selo-t.verde{background:var(--verde);color:#fff}
.card-rapido{position:absolute;left:10px;right:10px;bottom:10px;opacity:0;transform:translateY(8px);
  transition:var(--transicao);z-index:2}
.card:hover .card-rapido{opacity:1;transform:none}
.card-info{padding-top:14px}
.card-cat{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta3)}
.card-nome{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--preto);
  margin-top:3px;line-height:1.2}
.card-preco{margin-top:9px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card-preco .un{font-size:19px;font-weight:700;color:var(--preto)}
.card-preco .de{font-size:13px;color:var(--tinta3);text-decoration:line-through}
.card-atacado{margin-top:6px;font-size:12.5px;color:var(--ouro-escuro);font-weight:600}
.card-grade{margin-top:7px;font-size:12px;color:var(--tinta2)}
@media(max-width:760px){.card-rapido{opacity:1;transform:none;position:static;margin-top:10px}}

/* ---------- faixas de atacado ---------- */
.faixas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.faixa{border:1px solid var(--fio);border-radius:var(--raio);padding:22px;background:#fff;
  transition:var(--transicao)}
.faixa.melhor{border-color:var(--ouro);background:linear-gradient(180deg,var(--ouro-claro),#fff 62%)}
.faixa .qtd{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta3)}
.faixa .val{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--preto);margin-top:6px;line-height:1}
.faixa .val small{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--tinta2)}
.faixa .eco{margin-top:8px;font-size:12.5px;font-weight:600;color:var(--verde)}
@media(max-width:760px){.faixas{grid-template-columns:1fr}}
/* as tres regras do atacado: lado a lado no desktop, empilhadas no celular.
   Estava inline no index.html, e estilo inline ignora media query — a home
   passava de 430px de largura num aparelho de 390 e rolava de lado. */
.regras-atacado{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
@media(max-width:760px){.regras-atacado{grid-template-columns:1fr;gap:16px}}

/* ---------- catálogo ---------- */
.cat-l{display:grid;grid-template-columns:250px 1fr;gap:44px;align-items:start}
@media(max-width:900px){.cat-l{grid-template-columns:1fr;gap:20px}}
.filtros{position:sticky;top:140px}
.filtro-g{border-bottom:1px solid var(--fio);padding:18px 0}
.filtro-g:first-child{padding-top:0}
.filtro-g h4{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--preto);margin-bottom:12px}
.op{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14px;color:var(--tinta2);cursor:pointer}
.op:hover{color:var(--preto)}
.op input{width:16px;height:16px;accent-color:var(--ouro-escuro);cursor:pointer}
.op .n{margin-left:auto;font-size:12px;color:var(--tinta3)}
.tam-l{display:flex;flex-wrap:wrap;gap:7px}
.tam{min-width:42px;height:36px;padding:0 10px;display:grid;place-items:center;
  border:1px solid var(--fio);border-radius:var(--raio);font-size:13px;font-weight:600;
  background:#fff;transition:var(--transicao)}
.tam:hover{border-color:var(--tinta2)}
.tam.on{background:var(--preto);color:#fff;border-color:var(--preto)}
.tam.off{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.cor-l{display:flex;flex-wrap:wrap;gap:9px}
.cor{width:30px;height:30px;border-radius:50%;border:1px solid var(--fio);position:relative;
  transition:var(--transicao)}
.cor.on{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--preto)}
.barra-cat{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:18px;border-bottom:1px solid var(--fio);margin-bottom:26px;flex-wrap:wrap}
.barra-cat .qtd{font-size:13.5px;color:var(--tinta2)}
.ordena{height:40px;padding:0 12px;border:1px solid var(--fio);border-radius:var(--raio);background:#fff}
.marcas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.marca-f{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;background:var(--papel3);
  border-radius:var(--raio);font-size:12.5px;font-weight:500}
.marca-f button{color:var(--tinta3);font-size:15px;line-height:1}

/* ---------- produto ---------- */
.prod-l{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:start;padding:44px 0 76px}
@media(max-width:900px){.prod-l{grid-template-columns:1fr;gap:32px;padding-top:24px}}
/* min-width:0 porque item de grid nasce com min-width:auto e nao encolhe
   abaixo do proprio conteudo: a foto empurrava a pagina do produto para
   414px num aparelho de 390 e o cliente rolava de lado. */
.galeria{display:grid;grid-template-columns:82px 1fr;gap:14px;min-width:0}
.galeria .principal{min-width:0}
.galeria .miniaturas{display:flex;flex-direction:column;gap:10px}
.mini{aspect-ratio:3/4;border:1px solid var(--fio);border-radius:var(--raio);overflow:hidden;
  transition:var(--transicao)}
.mini.on{border-color:var(--preto)}
.principal{aspect-ratio:3/4;border-radius:var(--raio);overflow:hidden;background:var(--papel3)}
@media(max-width:520px){.galeria{grid-template-columns:1fr}
  /* A tira de miniaturas vira uma linha. Sem rolagem propria ela empurrava a
     pagina: cinco fotos de 70px com 10 de intervalo dao 390px, mais que a tela
     de um celular comum. Agora a tira rola sozinha e a pagina fica parada. */
  .galeria .miniaturas{flex-direction:row;order:2;min-width:0;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .galeria .miniaturas::-webkit-scrollbar{display:none}
  .mini{width:70px;flex:0 0 70px}}

.prod-nome{margin:8px 0 4px}
.prod-ref{font-size:12.5px;color:var(--tinta3)}
.prod-preco{margin:22px 0;padding:20px;background:var(--papel2);border:1px solid var(--fio);
  border-radius:var(--raio)}
.prod-preco .atual{display:flex;align-items:baseline;gap:10px}
.prod-preco .atual b{font-family:var(--serif);font-size:40px;font-weight:600;color:var(--preto);line-height:1}
.prod-preco .atual span{font-size:13.5px;color:var(--tinta2)}
.tabela-faixa{width:100%;margin-top:16px;border-collapse:collapse;font-size:13.5px}
.tabela-faixa th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta3);font-weight:600;padding-bottom:7px}
.tabela-faixa td{padding:7px 0;border-top:1px solid var(--fio)}
.tabela-faixa tr.on td{color:var(--ouro-escuro);font-weight:700}
.tabela-faixa td:last-child{text-align:right}

.bloco-op{padding:20px 0;border-top:1px solid var(--fio)}
.bloco-op h4{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:12px}
.bloco-op h4 span{float:right;font-weight:500;letter-spacing:0;text-transform:none;color:var(--tinta2)}
.grade-tam{width:100%;border-collapse:collapse;font-size:14px}
.grade-tam th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta3);
  text-align:center;font-weight:600;padding-bottom:8px}
.grade-tam td{text-align:center;padding:6px 4px;border-top:1px solid var(--fio)}
.grade-tam td:first-child,.grade-tam th:first-child{text-align:left}
.qtd-c{display:inline-flex;align-items:center;border:1px solid var(--fio);border-radius:var(--raio)}
.qtd-c button{width:32px;height:34px;font-size:16px;color:var(--tinta2)}
.qtd-c button:hover{background:var(--papel3);color:var(--preto)}
.qtd-c input{width:44px;height:34px;text-align:center;border:0;border-left:1px solid var(--fio);
  border-right:1px solid var(--fio);font-weight:600;font-variant-numeric:tabular-nums}
.qtd-c input:focus{outline:none;background:var(--ouro-claro)}

.resumo-prod{position:sticky;bottom:0;background:#fff;padding:18px 0;border-top:1px solid var(--fio);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.resumo-prod .tot{flex:1;min-width:150px}
.resumo-prod .tot span{display:block;font-size:12px;color:var(--tinta3)}
.resumo-prod .tot b{font-family:var(--serif);font-size:28px;color:var(--preto)}
.dica{margin-top:12px;padding:12px 14px;background:var(--ouro-claro);border-left:2px solid var(--ouro);
  font-size:13px;color:var(--ouro-escuro);border-radius:var(--raio)}

/* ---------- carrinho ---------- */
.gaveta{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}
.gaveta:not(.on) .painel{visibility:hidden}
.gaveta.on{pointer-events:auto}
.gaveta .fundo{position:absolute;inset:0;background:rgba(14,13,11,.45);opacity:0;transition:var(--transicao)}
.gaveta.on .fundo{opacity:1}
.gaveta .painel{position:absolute;top:0;right:0;bottom:0;width:min(430px,100%);background:#fff;visibility:visible;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform 280ms cubic-bezier(.4,0,.2,1);
  box-shadow:var(--sombra-alta)}
.gaveta.on .painel{transform:none}
.gaveta-cab{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;
  border-bottom:1px solid var(--fio)}
.gaveta-cab b{font-family:var(--serif);font-size:22px}
.gaveta-lista{flex:1;overflow-y:auto;padding:8px 22px}
.gaveta-pe{border-top:1px solid var(--fio);padding:20px 22px;background:var(--papel2)}
.linha{display:flex;justify-content:space-between;font-size:14px;padding:4px 0;color:var(--tinta2)}
.linha.total{font-size:17px;font-weight:700;color:var(--preto);padding-top:12px;margin-top:8px;
  border-top:1px solid var(--fio)}

.item{display:grid;grid-template-columns:74px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--fio)}
.item img{aspect-ratio:3/4;object-fit:cover;border-radius:var(--raio);background:var(--papel3)}
.item b{font-family:var(--serif);font-size:16px;display:block;color:var(--preto)}
.item .det{font-size:12.5px;color:var(--tinta2);margin-top:2px}
.item .pe{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
.item .rem{font-size:12px;color:var(--tinta3);text-decoration:underline}
.item .rem:hover{color:var(--vermelho)}

.vazio{text-align:center;padding:60px 20px;color:var(--tinta2)}
.vazio svg{color:var(--fio);margin-bottom:16px}

/* ---------- páginas internas ---------- */
.cabpag{background:var(--papel2);border-bottom:1px solid var(--fio);padding:38px 0}
.trilha{font-size:12.5px;color:var(--tinta3);margin-bottom:10px}
.trilha a:hover{color:var(--ouro-escuro)}

.painel{background:#fff;border:1px solid var(--fio);border-radius:var(--raio);padding:26px}
.painel + .painel{margin-top:20px}
.painel h3{margin-bottom:6px}
.painel .sub{font-size:13.5px;color:var(--tinta2);margin-bottom:20px}

.campo{margin-bottom:16px}
.campo label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta2);margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%;height:46px;padding:0 14px;
  border:1px solid var(--fio);border-radius:var(--raio);background:#fff;transition:var(--transicao)}
.campo textarea{height:auto;padding:12px 14px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--ouro);
  box-shadow:0 0 0 3px rgba(184,145,47,.12)}
.campo .erro{color:var(--vermelho);font-size:12.5px;margin-top:5px}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.dupla{grid-template-columns:1fr}}

.passos{display:flex;gap:0;margin-bottom:34px;border:1px solid var(--fio);border-radius:var(--raio)}
.passo{flex:1;display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--papel2);
  font-size:13px;color:var(--tinta3);border-right:1px solid var(--fio)}
.passo:last-child{border-right:0}
.passo b{width:24px;height:24px;border-radius:50%;background:var(--fio);color:var(--tinta2);
  display:grid;place-items:center;font-size:12px}
.passo.on{background:#fff;color:var(--preto);font-weight:600}
.passo.on b{background:var(--preto);color:#fff}
.passo.ok b{background:var(--verde);color:#fff}
@media(max-width:760px){.passo span{display:none}.passo{justify-content:center}}

.check-l{display:grid;grid-template-columns:1fr 380px;gap:34px;align-items:start;padding:38px 0 76px}
@media(max-width:900px){.check-l{grid-template-columns:1fr}}
.resumo{position:sticky;top:130px;background:var(--papel2);border:1px solid var(--fio);
  border-radius:var(--raio);padding:24px}

.opcao{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--fio);
  border-radius:var(--raio);margin-bottom:10px;cursor:pointer;transition:var(--transicao);background:#fff}
.opcao:hover{border-color:var(--tinta3)}
.opcao.on{border-color:var(--ouro);background:var(--ouro-claro)}
.opcao input{accent-color:var(--ouro-escuro);width:18px;height:18px}
.opcao .txt{flex:1}
.opcao b{display:block;font-size:14.5px;color:var(--preto)}
.opcao span{font-size:12.5px;color:var(--tinta2)}
.opcao .val{font-weight:700;white-space:nowrap}

/* ---------- avisos / feedback ---------- */
.aviso{padding:14px 16px;border-radius:var(--raio);font-size:13.5px;margin-bottom:18px;
  border-left:3px solid}
.aviso.info{background:var(--papel3);border-color:var(--tinta3);color:var(--tinta)}
.aviso.ok{background:#EAF5EF;border-color:var(--verde);color:#1F5C41}
.aviso.erro{background:#FBEDEB;border-color:var(--vermelho);color:#8C2C21}
.aviso.ouro{background:var(--ouro-claro);border-color:var(--ouro);color:var(--ouro-escuro)}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:300;
  background:var(--preto);color:#fff;padding:14px 22px;border-radius:var(--raio);font-size:14px;
  box-shadow:var(--sombra-alta);opacity:0;pointer-events:none;transition:var(--transicao);
  display:flex;align-items:center;gap:10px}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast svg{color:var(--ouro-vivo)}

/* ---------- rodapé ---------- */
.rodape{background:var(--preto);color:#B5AEA1;margin-top:80px;padding:64px 0 28px;font-size:13.5px}
.rodape-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px}
@media(max-width:900px){.rodape-g{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.rodape-g{grid-template-columns:1fr}}
.rodape h4{color:#fff;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:16px}
.rodape a:hover{color:var(--ouro-vivo)}
.rodape li{padding:4px 0}
.rodape .marca-r{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.rodape .marca-r img{width:46px;height:46px;background:#F4EFE6;border-radius:50%;padding:3px}
.rodape .marca-r b{font-family:var(--serif);font-size:19px;color:#fff}
.rodape-pe{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#7E7768}
.pag{display:flex;gap:8px;flex-wrap:wrap}
.pag span{padding:5px 9px;border:1px solid rgba(255,255,255,.16);border-radius:var(--raio);font-size:11px}

/* ---------- botão de conversa ---------- */
/* no atacado a dúvida vira venda na conversa; o botão segue a página inteira */
.zap{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:9px;
  background:#1F7A46;color:#fff;border-radius:100px;padding:12px 18px 12px 14px;
  box-shadow:0 10px 28px rgba(14,13,11,.28);text-decoration:none;font-weight:600;font-size:14px;
  transition:transform 240ms ease,box-shadow 240ms ease}
.zap:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(14,13,11,.34);color:#fff}
.zap svg{flex-shrink:0}
@media(max-width:700px){.zap{right:14px;bottom:14px;padding:12px;border-radius:50%}
  .zap span{display:none}}
@media print{.zap{display:none}}

/* ---------- admin ---------- */
.tab{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff}
.tab th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta3);
  padding:12px;border-bottom:1px solid var(--fio);white-space:nowrap}
.tab td{padding:12px;border-bottom:1px solid var(--fio);vertical-align:middle}
.tab tr:hover td{background:var(--papel2)}
.tab input{height:36px;padding:0 8px;border:1px solid var(--fio);border-radius:var(--raio);width:100px}
.pilula{display:inline-block;padding:3px 9px;border-radius:10px;font-size:11.5px;font-weight:600}
.pilula.ok{background:#EAF5EF;color:#1F5C41}
.pilula.esp{background:var(--ouro-claro);color:var(--ouro-escuro)}
.cartoes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
@media(max-width:900px){.cartoes{grid-template-columns:1fr 1fr}}
.cartao{background:#fff;border:1px solid var(--fio);border-radius:var(--raio);padding:20px}
.cartao span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta3)}
.cartao b{display:block;font-family:var(--serif);font-size:32px;color:var(--preto);margin-top:6px;line-height:1}


/* =========================================================
   Acabamento premium
   ========================================================= */

/* --- tipografia mais fina e generosa --- */
body{font-feature-settings:"cv05","cv11","ss01";letter-spacing:-.005em}
h1,h2{letter-spacing:-.022em}
h1{line-height:1.04}
h2{line-height:1.08}
.card-nome{letter-spacing:-.012em}
.un,.val,.cartao b,.resumo-prod .tot b,.prod-preco .atual b,.linha,.tabela-faixa td,
.faixa .val,.item b,.grade-tam td{font-variant-numeric:tabular-nums}
.sobre{font-size:10.5px;letter-spacing:.22em}
.secao{padding:88px 0}
.secao-cab{margin-bottom:40px}
.secao-cab p{font-size:15.5px;line-height:1.65}
.vitrine p.lead{font-size:17.5px}

/* --- detalhes do navegador --- */
::selection{background:var(--ouro-claro);color:var(--preto)}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:2px}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:#D7CFC1;border:3px solid #fff;border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:var(--ouro)}
*::-webkit-scrollbar-track{background:#fff}

/* --- entrada suave dos blocos --- */
.revelar{opacity:0;transform:translateY(14px);
  transition:opacity 620ms cubic-bezier(.22,.8,.28,1),transform 620ms cubic-bezier(.22,.8,.28,1)}
.revelar.visivel{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.revelar{opacity:1;transform:none;transition:none}}

/* --- cartão de produto --- */
.card-img{box-shadow:0 1px 2px rgba(14,13,11,.04);transition:box-shadow 320ms ease}
.card:hover .card-img{box-shadow:0 12px 34px rgba(14,13,11,.13)}
.card-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(14,13,11,.07));opacity:0;transition:opacity 320ms}
.card:hover .card-img::after{opacity:1}
.card-pontos{display:flex;gap:6px;margin-top:9px}
.ponto{width:15px;height:15px;border-radius:50%;border:1px solid rgba(14,13,11,.16);
  transition:transform 180ms ease,box-shadow 180ms ease;cursor:pointer}
.ponto:hover{transform:scale(1.18)}
.ponto.on{box-shadow:0 0 0 1.5px #fff,0 0 0 3px var(--preto)}
.card-un{font-size:12px;color:var(--tinta3)}
.card-preco{margin-top:11px}
.card-preco .un{font-size:20px;letter-spacing:-.02em}
.card-nome{font-size:20px}
.selo-t{backdrop-filter:blur(6px);background:rgba(14,13,11,.86)}
.selo-t.ouro{background:linear-gradient(100deg,var(--ouro-escuro),var(--ouro-vivo))}

/* --- botões e links --- */
.btn{transition:transform 200ms cubic-bezier(.4,0,.2,1),box-shadow 200ms,background 200ms,filter 200ms}
.btn-o{position:relative;overflow:hidden}
.btn-o::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transition:left 700ms ease}
.btn-o:hover::after{left:130%}
.link-mais{transition:color 200ms,border-color 200ms}
.link-mais:hover{color:var(--preto);border-color:var(--preto)}
.nav a{position:relative}

/* --- painéis --- */
.painel{box-shadow:0 1px 2px rgba(14,13,11,.03)}
.resumo{box-shadow:0 1px 2px rgba(14,13,11,.03)}
.faixa{transition:transform 260ms ease,box-shadow 260ms ease}
.faixa:hover{transform:translateY(-2px);box-shadow:var(--sombra)}

/* --- produto: galeria acompanha a rolagem --- */
@media(min-width:901px){
  .galeria{position:sticky;top:132px}
  .prod-l{gap:64px}
}
.principal img{transition:transform 700ms cubic-bezier(.22,.8,.28,1)}
.principal:hover img{transform:scale(1.05)}
.mini{transition:border-color 200ms,transform 200ms}
.mini:hover{transform:translateY(-2px)}

/* --- menu no celular --- */
.menu-btn{display:none;padding:9px 10px;border-radius:2px;color:var(--preto)}
.menu-btn:hover{background:var(--papel3)}
@media(max-width:900px){
  .menu-btn{display:grid;place-items:center}
  .nav{max-height:0;overflow:hidden;transition:max-height 320ms cubic-bezier(.4,0,.2,1)}
  .nav.aberto{max-height:420px}
  .nav ul{flex-direction:column;align-items:stretch;height:auto;gap:0;padding:6px 0}
  .nav a{display:block;padding:13px 0;border-bottom:1px solid var(--fio);border-left:2px solid transparent}
  .nav a:hover,.nav a.ativo{border-bottom-color:var(--fio);padding-left:10px}
  .secao{padding:56px 0}
}

/* --- rodapé --- */
.rodape a{position:relative;transition:color 200ms}
.rodape li a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background:var(--ouro-vivo);transition:width 260ms ease}
.rodape li a:hover::after{width:100%}

/* --- filtros no celular: só quando pedidos --- */
.btn-filtros{display:none}
@media(max-width:900px){
  .btn-filtros{display:inline-flex}
  .filtros{display:none;position:sticky;top:0;background:#fff;border:1px solid var(--fio);
    border-radius:2px;padding:18px;margin-bottom:18px}
  .filtros.aberto{display:block}
  .barra-cat{order:-1}
  .cat-l{display:flex;flex-direction:column}
}


/* ============ telas novas: rastreio, pedido, páginas de texto ============ */
.tl-rastreio{list-style:none;margin:0;padding:0}
.tl-rastreio li{position:relative;padding:0 0 22px 30px;border-left:2px solid var(--linha);margin-left:6px}
.tl-rastreio li:last-child{border-left-color:transparent;padding-bottom:0}
.tl-rastreio .pt{position:absolute;left:-8px;top:2px;width:14px;height:14px;border-radius:50%;
  background:var(--papel);border:2px solid var(--linha)}
.tl-rastreio li.feito{border-left-color:var(--ouro-escuro)}
.tl-rastreio li.feito .pt{background:var(--ouro-escuro);border-color:var(--ouro-escuro)}
.tl-rastreio li.atual .pt{box-shadow:0 0 0 5px var(--ouro-claro)}
.tl-rastreio b{display:block;font-size:15px}
.tl-rastreio span{display:block;font-size:12.5px;color:var(--tinta3);margin-top:2px}

.grade-pedido{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
@media(max-width:900px){.grade-pedido{grid-template-columns:1fr}}

.tab-itens{width:100%;border-collapse:collapse}
.tab-itens td{padding:13px 8px;border-bottom:1px solid var(--linha);vertical-align:top;font-size:14.5px}
.tab-itens tr:last-child td{border-bottom:0}

.texto-legal{max-width:760px}
.texto-legal h2{font-size:20px;margin:34px 0 10px;letter-spacing:-.01em}
.texto-legal h2:first-child{margin-top:0}
.texto-legal p,.texto-legal li{font-size:15.5px;line-height:1.7;color:var(--tinta2)}
.texto-legal ul{padding-left:20px;margin:10px 0}
.texto-legal li{margin-bottom:6px}
.texto-legal a{color:var(--ouro-escuro);font-weight:600}
.texto-legal .obs{font-size:13.5px;color:var(--tinta3);margin-top:10px}
.tab-legal{width:100%;border-collapse:collapse;margin:14px 0 6px}
.tab-legal th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--tinta3);font-weight:600;padding:0 10px 9px 0;border-bottom:1px solid var(--tinta3)}
.tab-legal td{padding:12px 10px 12px 0;border-bottom:1px solid var(--linha);font-size:15px}

.cartoes-contato{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.cartoes-contato .painel{padding:24px}
.cartoes-contato h3{font-size:19px;margin:6px 0 8px}
.cartoes-contato p{font-size:14.5px;color:var(--tinta2);line-height:1.6;margin-bottom:16px}