/* SITE CANPRIME — folha única. Dourado #8E8169 medido no logo.
   TEMA CLARO desde 28/08/26 (decisão do Gustavo): fundo bege, tons de marrom —
   claro sem ser branco. Os NOMES das variáveis foram mantidos para não reescrever
   a folha inteira; o PAPEL de cada uma é o que o comentário diz:
     --grafite   = FUNDO bege        --grafite-2 = painel/cartão creme
     --grafite-3 = bloco mais fundo  --creme     = TEXTO marrom-escuro
     --creme-2   = texto forte       --cinza-txt = texto secundário
     --dourado-claro = marrom profundo (realce/hover — no claro, realce ESCURECE) */

:root{
  --grafite:#edeae3;      --grafite-2:#f5f3ee;    --grafite-3:#e2ded4;
  --borda:#d6d1c4;        --borda-2:#b9b19e;
  --dourado:#a28c66;      --dourado-claro:#7e6b49;
  --creme:#23201a;        --creme-2:#454035;      --cinza-txt:#7b7565;
  --oliva:#75836c;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'DM Sans','Helvetica Neue',system-ui,sans-serif;
  --max:1280px;
  --t:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--grafite);color:var(--creme);font-family:var(--sans);
  font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 78% -12%,rgba(162,140,102,.10),transparent 62%),
    radial-gradient(700px 420px at 8% 104%,rgba(117,131,108,.07),transparent 60%);
  background-attachment:fixed;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.env{max-width:var(--max);margin:0 auto;padding:0 32px}
.env.estreito{max-width:820px}
.vis-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--dourado-claro);outline-offset:3px}

/* ------------------------------------------------------------------ topo */
.faixa{border-bottom:0;background:#16130e}
.faixa .env{display:flex;justify-content:space-between;gap:20px;padding:10px 32px;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza-txt)}
.faixa strong,.faixa b{color:var(--dourado-claro);font-weight:500}

header{position:sticky;top:0;z-index:50;background:rgba(237,234,227,.95);
  backdrop-filter:blur(14px);border-bottom:1px solid #d6d1c4}
.topo{display:flex;align-items:center;gap:26px;padding-top:16px;padding-bottom:16px}
.topo .busca{margin:0 auto;flex:0 1 560px}
.topo .icone-carrinho{margin-left:auto}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:46px;width:auto;display:block}
.logo.rodape img{height:37px}
/* barra de categorias — vive ABAIXO do topo, cresce com o catálogo e rola
   horizontalmente quando não couber (celular incluso) */
.menu-cats{background:#1b170f;border-bottom:1px solid #322c1f}
.menu-cats .env{display:flex;gap:30px;overflow-x:auto;scrollbar-width:none;
  padding-top:0;padding-bottom:0}
.menu-cats .env::-webkit-scrollbar{display:none}
.menu-cats a{flex:0 0 auto;display:flex;align-items:center;padding:13px 2px;
  font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:#d8d2c3;position:relative;white-space:nowrap;
  transition:color .25s var(--t)}
.menu-cats a::after{content:'';position:absolute;left:0;right:100%;bottom:-1px;height:2px;
  background:var(--dourado);transition:right .3s var(--t)}
.menu-cats a:hover{color:#fff}
.menu-cats a:hover::after{right:0}
.menu-cats a.on{color:#c9b489}
.menu-cats a.on::after{right:0}
.menu-cats .grupo{position:relative;flex:0 0 auto;display:flex}
.menu-cats .seta{font-style:normal;font-size:9px;opacity:.7;margin-left:3px}
.menu-cats .sub{position:absolute;top:calc(100% + 1px);left:-14px;min-width:230px;z-index:60;
  margin:0;font-size:inherit;   /* anula o .sub genérico dos subtítulos (34px de margem!) */
  background:#1b170f;border:1px solid #322c1f;border-top:2px solid var(--dourado);
  border-radius:0 0 2px 2px;padding:8px 0;box-shadow:0 18px 34px -12px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .28s var(--t),transform .28s var(--t),visibility .28s}
.menu-cats .grupo:hover .sub,.menu-cats .grupo:focus-within .sub{
  opacity:1;visibility:visible;transform:translateY(0)}
.menu-cats .sub a{display:block;padding:10px 18px;font-size:11.5px;white-space:nowrap}
.menu-cats .sub a::after{display:none}
.menu-cats .sub a:hover{background:rgba(162,140,102,.16);color:#fff}
/* o suspenso precisa escapar da barra: no desktop ela não corta; no celular
   (sem hover) a barra continua rolando e a página da mãe lista as filhas */
@media(min-width:1081px){.menu-cats .env{overflow:visible;flex-wrap:wrap}}
.busca{display:flex;align-items:center;border:1px solid #c8c2b2;border-radius:2px;
  background:#f7f5f0;transition:border-color .3s var(--t)}
.busca:focus-within{border-color:var(--dourado)}
.busca input{flex:1;min-width:0;background:none;border:0;color:#23201a;
  font-family:var(--sans);font-size:14px;padding:12px 15px}
.busca input::placeholder{color:#9b937f;text-overflow:ellipsis}
.busca button{padding:0 14px;height:44px;color:#6d6553;transition:color .25s}
.busca button:hover{color:var(--dourado)}
.busca svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.4}

.migalhas{font-size:12px;color:var(--cinza-txt);letter-spacing:.05em;padding-top:24px}
.migalhas a:hover{color:var(--dourado-claro)}
.migalhas .sep{opacity:.5;margin:0 6px}
.migalhas span:not(.sep){color:var(--creme-2)}

/* ------------------------------------------------------------------ tipos */
.display{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,58px);
  line-height:1.1;letter-spacing:-.015em}
.display em{font-style:italic;color:var(--dourado-claro)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.olho{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--dourado);
  margin-bottom:22px;display:flex;align-items:center;gap:14px}
.olho::before{content:'';width:38px;height:1px;background:var(--dourado);opacity:.6}
.lead{margin-top:22px;font-size:16.5px;color:var(--cinza-txt);max-width:56ch;line-height:1.8}
.lead strong{color:var(--creme);font-weight:500}

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:2px;
  font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  transition:transform .3s var(--t),background .3s var(--t),color .3s,border-color .3s}
.btn.grande{padding:16px 30px}
.btn.peq{padding:9px 16px;font-size:11px}
.btn-ouro{background:var(--dourado);color:#fffdf8}
.btn-ouro:hover{background:#8a7550;transform:translateY(-2px)}
.btn-linha{border:1px solid var(--borda-2);color:var(--creme)}
.btn-linha:hover{border-color:var(--dourado);color:var(--dourado-claro);transform:translateY(-2px)}
.btn-oliva{background:var(--oliva);color:#f2f5f0}
.btn-oliva:hover{filter:brightness(.92);transform:translateY(-2px)}
.cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

section.bloco{padding:84px 0}
section.bloco.sem-topo{padding-top:0}
.cabeca{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  margin-bottom:40px;flex-wrap:wrap}
.cabeca h1,.cabeca h2{font-size:clamp(26px,3vw,38px)}
.cabeca p{color:var(--cinza-txt);margin-top:10px;font-size:15px;max-width:60ch}
.link-mais{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dourado);
  border-bottom:1px solid rgba(142,129,105,.4);padding-bottom:3px;transition:color .3s,border-color .3s}
.link-mais:hover{color:var(--dourado-claro);border-color:var(--dourado-claro)}
.sub{font-size:20px;margin:34px 0 4px}
.colunas{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.colunas h2{font-size:22px;margin-bottom:12px}
.colunas p{color:var(--cinza-txt);font-size:15px}

/* ------------------------------------------------------------------- hero */
.hero{border-bottom:1px solid var(--borda);overflow:hidden}
.hero .env{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;
  padding-top:88px;padding-bottom:88px}
.colagem{position:relative;height:500px}
.colagem figure{position:absolute;background:#f1eee7;border-radius:2px;overflow:hidden;
  box-shadow:0 30px 60px -26px rgba(20,16,10,.5);animation:sobe .9s var(--t) both}
.colagem figure:nth-child(1){width:64%;left:0;top:0;animation-delay:.05s}
.colagem figure:nth-child(2){width:46%;right:0;top:24%;animation-delay:.2s}
.colagem figure:nth-child(3){width:38%;left:14%;bottom:0;animation-delay:.35s}
.colagem figure a{display:block;position:relative}
.colagem figure img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#f1eee7}
.colagem figcaption{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(22,19,14,.92));color:#f2efe8;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;padding:26px 14px 10px}
@keyframes sobe{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}

.numeros{border-bottom:1px solid var(--borda)}
.numeros .env{display:grid;grid-template-columns:repeat(4,1fr);padding-left:32px;padding-right:32px}
.numeros div,.numeros a.celula{display:block;padding:16px 22px;border-left:1px solid var(--borda)}
.numeros .env>div:first-child,.numeros .env>a.celula:first-child{border-left:0;padding-left:0}
.numeros a.celula:hover b{color:var(--dourado)}
.numeros b{display:block;font-family:var(--serif);font-size:23px;font-weight:400;color:var(--dourado-claro);
  transition:color .25s}
.numeros s{display:block;text-decoration:none;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cinza-txt);margin-top:3px}

/* ------------------------------------------- faixa de marcas parceiras (home) */
.marcas-faixa{border-bottom:1px solid var(--borda);padding:24px 0 28px}
.marcas-faixa .rotulo{text-align:center;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cinza-txt);margin-bottom:20px}
.marcas-faixa .trilho{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marcas-faixa .fita{display:flex;align-items:center;width:max-content;
  animation:marcas-rola 48s linear infinite}
.marcas-faixa .fita:hover{animation-play-state:paused}
.marcas-faixa a{display:block;padding:0 34px;opacity:.78;transition:opacity .25s}
.marcas-faixa a:hover{opacity:1}
.marcas-faixa img{display:block;height:34px;width:auto;max-width:132px;object-fit:contain}
@keyframes marcas-rola{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .marcas-faixa .fita{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:18px}
}

/* ------------------------------------------------------------------ cards */
.grade{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.grade.tres{grid-template-columns:repeat(3,1fr)}
.card{position:relative}
.card .foto{position:relative;display:block;background:#f1eee7;border-radius:2px;
  overflow:hidden;aspect-ratio:1;transition:transform .4s var(--t)}
.card:hover .foto{transform:translateY(-5px)}
.card .foto img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--t)}
.card:hover .foto img{transform:scale(1.06)}
.card .foto img.alt{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--t)}
.card:hover .foto img.alt{opacity:1}
.sem-foto{position:absolute;inset:0;display:grid;place-items:center;background:#f3f1ea}
.sem-foto .cp{font-family:var(--serif);font-size:34px;color:#ccc6b6;letter-spacing:.1em}
.selo{position:absolute;top:12px;left:12px;z-index:2;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 9px;border-radius:2px;font-weight:500}
.selo-pronta{background:var(--oliva);color:#f2f5f0}
.selo-prazo{background:rgba(27,23,15,.88);color:#f2efe8;border:0}
.card .marca{margin-top:15px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dourado)}
.card h3{font-size:17px;margin-top:6px;line-height:1.35}
.card h3 a:hover{color:var(--dourado-claro)}
.card .preco{margin-top:9px;font-size:18px;color:var(--creme)}
/* oferta por produto (07/09/26): DE riscado + selo verde de desconto */
.oferta-de{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--cinza-txt)}
.oferta-de s{text-decoration:line-through}
.oferta-de.grande{font-size:14.5px;margin-top:0}
.oferta-selo{background:#12B05A;color:#fff;font-weight:700;font-size:11.5px;
  padding:2px 8px;border-radius:4px;letter-spacing:.02em}
.oferta-de.grande .oferta-selo{font-size:13px;padding:3px 10px}
.card .oferta-de + .preco{margin-top:2px}
.card .preco small{font-size:12px;color:var(--cinza-txt);font-weight:300}
.card .cores{margin-top:11px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bolinha{width:15px;height:15px;border-radius:50%;border:1px solid rgba(35,32,26,.22);
  display:block;transition:transform .25s var(--t),border-color .25s}
.bolinha:hover{transform:scale(1.25);border-color:var(--dourado)}
.cores em{font-style:normal;font-size:10.5px;color:var(--cinza-txt);margin-left:2px}

/* ---------------------------------------------------------------- paleta */
.paleta{display:flex;flex-wrap:wrap;gap:14px}
.amostra{display:flex;flex-direction:column;align-items:center;gap:8px;width:88px;
  font-size:11px;color:var(--cinza-txt);text-align:center;line-height:1.3}
.amostra .b{width:46px;height:46px;border-radius:50%;border:1px solid rgba(35,32,26,.2);
  transition:transform .25s var(--t),box-shadow .25s}
.amostra:hover{color:var(--creme)}
.amostra:hover .b{transform:scale(1.1)}
.amostra.on{color:var(--creme)}
.amostra.on .b{box-shadow:0 0 0 2px var(--grafite),0 0 0 3px var(--dourado)}

/* --------------------------------------------------------------- catálogo */
.cat{display:grid;grid-template-columns:250px 1fr;gap:48px;padding:44px 0 88px}
.filtros h4{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--dourado);
  margin:30px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--borda)}
.filtros h4:first-child{margin-top:0}
.filtros .cores-filtro{display:flex;flex-wrap:wrap;gap:10px}
.filtros .amostra{width:56px;font-size:9.5px}
.filtros .amostra .b{width:28px;height:28px}
.lista-filtro{display:flex;flex-direction:column}
.lista-filtro .op{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  font-size:14px;color:var(--cinza-txt);transition:color .25s}
.lista-filtro .op:hover{color:var(--creme)}
.lista-filtro .op.on{color:var(--dourado-claro)}
.lista-filtro .op .n{font-size:11.5px;opacity:.6}
.limpar{display:inline-block;margin-top:24px;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cinza-txt);border-bottom:1px solid var(--borda-2);padding-bottom:3px}
.limpar:hover{color:var(--dourado)}
.barra-cat{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid var(--borda);flex-wrap:wrap}
.barra-cat .qtd{font-size:13.5px;color:var(--cinza-txt)}
.barra-cat .qtd b{color:var(--creme);font-weight:500}
.ordena{border:1px solid var(--borda);background:var(--grafite-2);color:var(--creme);
  padding:9px 13px;border-radius:2px;font-size:13px;font-family:var(--sans)}
.ordena-form{display:flex;gap:8px;align-items:center}
.vazio{color:var(--cinza-txt);padding:40px 0}
.vazio a{color:var(--dourado-claro);border-bottom:1px solid rgba(179,162,132,.4)}

/* ---------------------------------------------------------------- produto */
.prod{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;padding:30px 0 80px}
.galeria{display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:start}
.galeria:only-child,.prod .galeria>.fotos-grandes:only-child{grid-column:1/-1}
.minis{display:flex;flex-direction:column;gap:12px}
.minis a{background:#f1eee7;border-radius:2px;overflow:hidden;aspect-ratio:1;
  border:1px solid transparent;display:block;transition:border-color .3s var(--t),opacity .3s;opacity:.62}
.minis a img{width:100%;height:100%;object-fit:contain}
.minis a.on{border-color:var(--dourado);opacity:1}
.minis a:hover{opacity:1}
.fotos-grandes{position:relative}
.foto-grande{background:#f1eee7;border-radius:2px;overflow:hidden;aspect-ratio:1;display:none}
.foto-grande.on{display:block}
/* galeria deslizante (07/09/26, v2): ROLAGEM NATIVA com scroll-snap — a física
   do arrasto é do próprio iOS/Android (dedo, inércia, encaixe), não de JS */
.fotos-grandes{overflow:hidden;border-radius:2px}
.fotos-pista{display:flex;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;touch-action:pan-x;   /* dedo na foto: só galeria, página não rola */
  transition:transform .22s ease-out,opacity .2s}
.fotos-pista::-webkit-scrollbar{display:none}
.fotos-pista .foto-grande{display:block;flex:0 0 100%;min-width:100%;
  scroll-snap-align:start;scroll-snap-stop:always}
.foto-grande img{width:100%;height:100%;object-fit:contain}
.foto-grande.sem-foto{display:grid;place-items:center;position:relative;text-align:center;padding:30px}
.foto-grande.sem-foto p{color:#8b8471;font-size:13.5px;margin-top:14px}
.foto-grande.sem-foto a{color:#6e5c44;border-bottom:1px solid rgba(110,92,68,.4)}
.ficha-lado .marca{font-size:10.5px;letter-spacing:.21em;text-transform:uppercase;color:var(--dourado)}
.ficha-lado h1{font-size:clamp(26px,3vw,34px);line-height:1.22;margin-top:12px}
.ficha-lado .cod{margin-top:10px;font-size:12.5px;color:var(--cinza-txt);letter-spacing:.04em}
.ficha-lado .cod b{color:var(--creme-2);font-weight:400}
.preco-bloco{margin:26px 0;padding:22px 0;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}
.preco-bloco .valor{font-size:34px;font-family:var(--serif);color:var(--creme)}
.preco-bloco .valor.pequeno{font-size:24px;color:var(--creme-2)}
.preco-bloco .valor small{font-size:14px;color:var(--cinza-txt);font-family:var(--sans)}
.preco-bloco .parc{font-size:13.5px;color:var(--cinza-txt);margin-top:8px}
.preco-bloco .parc a{color:var(--dourado-claro);border-bottom:1px solid rgba(179,162,132,.4)}
.opcao{margin-bottom:24px}
.opcao .rot{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--cinza-txt);margin-bottom:12px}
.opcao .rot b{color:var(--creme);font-weight:500;letter-spacing:.02em;text-transform:none;font-size:13.5px}
.acabamentos{display:flex;gap:10px;flex-wrap:wrap}
.acabamentos a{display:flex;flex-direction:column;align-items:center;gap:6px;width:60px;
  font-size:9px;color:var(--cinza-txt);line-height:1.3;text-align:center}
.acabamentos .b{width:32px;height:32px;border-radius:50%;border:1px solid rgba(35,32,26,.2);
  transition:box-shadow .25s var(--t),transform .25s}
.acabamentos a:hover .b{transform:scale(1.1)}
.acabamentos a.on{color:var(--creme)}
.acabamentos a.on .b{box-shadow:0 0 0 2px var(--grafite),0 0 0 3px var(--dourado)}
.acoes-prod{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.acoes-prod .btn{flex:1 1 200px;justify-content:center}
.nota-fase{margin-top:12px;font-size:12px;color:#8b8471}
.entrega{margin-top:26px;border:1px solid var(--borda);border-radius:2px;background:#f5f3ee}
.entrega .l{display:flex;gap:14px;padding:15px 18px;border-bottom:1px solid var(--borda);
  align-items:flex-start;font-size:13.5px}
.entrega .l:last-child{border-bottom:0}
.entrega svg{width:17px;height:17px;stroke:var(--dourado);fill:none;stroke-width:1.3;flex:0 0 auto;margin-top:2px}
.entrega b{font-weight:500;color:var(--creme)}
.entrega span{color:var(--cinza-txt)}
.entrega a{color:var(--dourado-claro);border-bottom:1px solid rgba(179,162,132,.4)}
.selo-sync{margin-top:16px;font-size:11.5px;color:var(--cinza-txt);display:flex;align-items:center;gap:8px}
.selo-sync i{width:6px;height:6px;border-radius:50%;background:var(--oliva);animation:pulsa 2.4s infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.35}}
.texto-prod{margin-top:26px;color:var(--cinza-txt);font-size:15px;line-height:1.8}
.ficha{margin-top:16px}
.ficha div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;
  border-bottom:1px solid var(--borda);font-size:14px}
.ficha dt{color:var(--cinza-txt)}
.ficha dd{color:var(--creme-2)}

/* --------------------------------------------------------------- carrinho */
.icone-carrinho{position:relative;display:grid;place-items:center;width:40px;height:40px;
  border:1px solid #b3ab98;border-radius:2px;color:#4a4436;
  transition:color .25s,border-color .25s}
.icone-carrinho:hover{color:var(--dourado-claro);border-color:var(--dourado)}
.icone-carrinho svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.4}
.icone-carrinho .badge{position:absolute;top:-7px;right:-7px;background:var(--dourado);
  color:#17181a;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;
  display:grid;place-items:center;padding:0 4px;font-style:normal}
.compra{display:flex;gap:12px;align-items:stretch;margin-top:26px;flex-wrap:wrap}
.stepper{display:flex;align-items:center;border:1px solid var(--borda-2);border-radius:2px;
  background:var(--grafite-2)}
.stepper button{width:42px;font-size:18px;color:var(--cinza-txt);transition:color .25s}
.stepper button:hover{color:var(--dourado)}
.stepper .qtd{width:56px;text-align:center;font-size:15px;background:none;border:0;
  color:var(--creme);font-family:var(--sans)}
.compra .btn{flex:1 1 220px;justify-content:center}
.carrinho{display:grid;grid-template-columns:1fr 400px;gap:44px;padding:36px 0 84px;align-items:start}
.item{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:20px 0;
  border-bottom:1px solid var(--borda);align-items:center}
.item .th{background:#f1eee7;border-radius:2px;overflow:hidden;aspect-ratio:1;display:block;position:relative}
.item .th img{width:100%;height:100%;object-fit:contain}
.item h4{font-family:var(--serif);font-weight:400;font-size:16.5px}
.item h4 a:hover{color:var(--dourado-claro)}
.item .meta{font-size:12px;color:var(--cinza-txt);margin-top:4px}
.item .v{text-align:right;font-size:16.5px}
.item .v small{display:block;font-size:11.5px;color:var(--cinza-txt);margin-top:4px}
.qtd-form{display:flex;gap:8px;align-items:center;margin-top:10px}
.qtd-form .qtd{width:64px;background:var(--grafite);border:1px solid var(--borda-2);
  border-radius:2px;color:var(--creme);padding:6px 8px;text-align:center;font-family:var(--sans)}
.mini-stepper{display:inline-flex;align-items:center;border:1px solid var(--borda-2);
  border-radius:2px;overflow:hidden}
.mini-stepper .mini-btn{border:0;border-radius:0;width:30px;padding:5px 0;font-size:14px;text-align:center}
.mini-stepper .qtd{border:0;border-left:1px solid var(--borda);border-right:1px solid var(--borda);
  border-radius:0;width:48px}
.mini-btn{font-size:11px;color:var(--cinza-txt);border:1px solid var(--borda);border-radius:2px;
  padding:5px 10px;letter-spacing:.06em;transition:color .25s,border-color .25s}
.mini-btn:hover{color:var(--dourado-claro);border-color:var(--dourado)}
.mini-btn.ruim:hover{color:#a4574d;border-color:#a4574d}
.nota-carrinho{margin-top:16px;font-size:12.5px;color:var(--cinza-txt);
  border-left:2px solid var(--oliva);padding-left:12px;line-height:1.6}
.nota-carrinho b{color:var(--creme);font-weight:500}
.flash-pub{padding:11px 15px;border-radius:2px;margin:0 0 18px;font-size:13.5px;
  border-left:3px solid var(--oliva);background:rgba(93,110,83,.14)}
.flash-pub.erro{border-color:#a4574d;background:rgba(164,87,77,.14)}
.resumo{border:1px solid var(--borda);border-radius:2px;background:var(--grafite-2);
  padding:26px;position:sticky;top:110px}
.resumo h3{font-family:var(--serif);font-weight:400;font-size:20px;margin-bottom:18px}
.resumo h4{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dourado);
  margin:20px 0 10px;font-family:var(--sans)}
.linha{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:var(--cinza-txt)}
.linha b{color:var(--creme);font-weight:400}
.cep{display:flex;gap:8px;margin:16px 0 10px}
.cep input{flex:1;background:var(--grafite);border:1px solid var(--borda-2);color:var(--creme);
  padding:10px 12px;border-radius:2px;font-family:var(--sans);font-size:14px}
.cep input::placeholder{color:#9b937f}
.cep button{border:1px solid var(--borda-2);padding:0 15px;border-radius:2px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cinza-txt);transition:color .25s,border-color .25s}
.cep button:hover{color:var(--dourado);border-color:var(--dourado)}
.frete-erro{font-size:12.5px;color:#a4574d;margin-bottom:10px}
.frete-op{border:1px solid var(--borda);border-radius:2px;padding:11px 13px;margin-bottom:8px;
  display:flex;align-items:center;gap:11px;font-size:13.5px;cursor:pointer;
  transition:border-color .25s}
.frete-op input{accent-color:var(--dourado)}
.frete-op span{flex:1}
.frete-op small{display:block;color:var(--cinza-txt);font-size:11.5px;margin-top:2px}
.frete-op:hover,.frete-op.on{border-color:var(--dourado)}
.dados-cliente label{display:block;font-size:12px;color:var(--cinza-txt);margin-bottom:11px}
.dados-cliente input,.dados-cliente textarea{display:block;width:100%;margin-top:4px;
  background:var(--grafite);border:1px solid var(--borda-2);border-radius:2px;color:var(--creme);
  padding:9px 11px;font-family:var(--sans);font-size:14px}
.dados-cliente input:focus,.dados-cliente textarea:focus{border-color:var(--dourado);outline:none}
.dados-cliente .opc{color:#6e6a63}
.linha-3a1{display:grid;grid-template-columns:2.4fr 1fr;gap:10px}
.btn-enviar{width:100%;justify-content:center;margin-top:12px}

/* --------------------------------------------------------------- contato */
.contato{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start}
.dados{list-style:none;border-top:1px solid var(--borda)}
.dados li{display:flex;flex-direction:column;gap:5px;padding:18px 0;border-bottom:1px solid var(--borda)}
.dados .r{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--dourado)}
.dados .v{font-size:16px;color:var(--creme)}
a.v:hover{color:var(--dourado-claro)}
.dados .obs{font-size:12.5px;color:var(--cinza-txt)}
.dados .redes{display:flex;gap:16px;flex-wrap:wrap;font-size:14px}
.dados .redes a{color:var(--cinza-txt)}
.dados .redes a:hover{color:var(--dourado-claro)}

/* -------------------------------------------------------------- showroom */
.showroom{border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);
  background:linear-gradient(120deg,rgba(117,131,108,.10),transparent 55%),#171310}
.sh{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding:72px 32px}
.sh h2{font-size:clamp(27px,3.2vw,40px);line-height:1.15}
.sh p{margin-top:18px;color:var(--cinza-txt);font-size:15.5px;max-width:48ch;line-height:1.8}
.passos{list-style:none;border-left:1px solid var(--borda);padding-left:30px}
.passos li{display:flex;gap:18px;padding:14px 0;align-items:baseline}
.passos li+li{border-top:1px solid var(--borda)}
.passos b{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--dourado);min-width:66px}
.passos span{color:var(--creme-2);font-size:14.5px;line-height:1.6}
.passos li.hora b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza-txt)}

/* --------------------------------------------------------------- rodapé */
footer{border-top:1px solid var(--borda);background:#e7e3da}
.rod{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:36px;padding:60px 0 36px}
.rod h5{font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--dourado);margin-bottom:16px}
.rod a,.rod p{display:block;color:var(--cinza-txt);font-size:13.5px;padding:4px 0;transition:color .25s}
.rod a:hover{color:var(--creme)}
.rod .sobre{font-size:14px;line-height:1.75;max-width:38ch;padding-top:16px}
.rod .destaque{color:var(--dourado-claro)}
.rod-fim{border-top:1px solid var(--borda);padding:20px 0;display:flex;justify-content:space-between;
  gap:20px;font-size:11.5px;color:#8b8471;flex-wrap:wrap}
.rod-fim .assinatura{letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;
  color:#a29a85}
.zap{position:fixed;right:24px;bottom:24px;z-index:55;width:54px;height:54px;border-radius:50%;
  background:var(--oliva);display:grid;place-items:center;
  box-shadow:0 14px 30px -10px rgba(20,16,10,.45);transition:transform .3s var(--t)}
.zap:hover{transform:scale(1.08)}
.zap svg{width:25px;height:25px;fill:#f2f5f0}

/* ------------------------------------------------------------ responsivo */
@media(max-width:1080px){
  .hero .env,.prod,.contato,.sh,.carrinho{grid-template-columns:1fr;gap:44px}
  .resumo{position:static}
  .cat{grid-template-columns:1fr;gap:34px}
  .grade,.grade.tres{grid-template-columns:repeat(2,1fr)}
  .colunas{grid-template-columns:1fr;gap:30px}
  .rod{grid-template-columns:1fr 1fr}
  .colagem{height:380px}
  .passos{border-left:0;padding-left:0;border-top:1px solid var(--borda)}
  .busca{flex:1}
}
@media(max-width:620px){
  .env{padding-left:20px;padding-right:20px}
  .faixa .env{padding-left:20px;padding-right:20px}
  .so-desktop{display:none}
  .numeros .env{grid-template-columns:repeat(2,1fr)}
  .numeros .env>div:nth-child(3),.numeros .env>a.celula:nth-child(3){border-left:0;padding-left:0}
  .marcas-faixa img{height:27px;max-width:104px}
  .marcas-faixa a{padding:0 22px}
  .grade,.grade.tres{grid-template-columns:1fr 1fr;gap:16px}
  .galeria{grid-template-columns:1fr}
  .minis{flex-direction:row;overflow-x:auto}
  .minis a{width:64px;flex:0 0 auto}
  .ficha div{flex-direction:column;gap:2px}
  .rod{grid-template-columns:1fr}
  .sh{padding-left:20px;padding-right:20px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}


/* ---- bandas quase-pretas da referência 29/08 (hero e showroom) ---- */
.hero{background:#1b170f;border-bottom:0}
.hero .olho{color:#a28c66}
.hero .olho::before{background:#a28c66}
.hero .display{color:#f2efe8}
.hero .display em{color:#c9b489}
.hero .lead{color:#aaa290}
.hero .btn-linha{color:#f2efe8;border-color:#57503f}
.hero .btn-linha:hover{border-color:#a28c66;color:#c9b489}
.showroom, .showroom h2{color:#f2efe8}
.showroom .olho{color:#a28c66}
.showroom .sh > div > p{color:#aaa290}
.showroom .passos span{color:#d8d2c3}
.showroom .passos li.hora b{color:#8d8676}
.showroom .passos, .showroom .passos li + li{border-color:#332d20}
.showroom .btn-linha{color:#f2efe8;border-color:#57503f}
.showroom .btn-linha:hover{border-color:#a28c66;color:#c9b489}

/* ---- status de entrega por quantidade (padrão CANMETAL, 30/08) ---- */
.selo-entrega{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;letter-spacing:.02em}
.selo-entrega.ok{background:#e5eae0;color:#4c5a44;border:1px solid #c3cdb9}
.selo-entrega.prazo{background:#f3e8d3;color:#7a5e2c;border:1px solid #ddc9a0}
.entrega-ok{color:#5a6a50}
.entrega-prazo{color:#8a6a30}
.aviso-prazo{margin:14px 0 4px;padding:12px 14px;border:1px solid #ddc9a0;border-left:4px solid #b98f3e;
  background:#f7efdd;color:#5d4a22;border-radius:10px;font-size:13.5px;line-height:1.55}
.aviso-prazo b{color:#4a3a18}

/* ---- endereço preenchido pelo CEP (ViaCEP, 30/08) ---- */
.endereco-auto{margin:2px 0 8px;padding:8px 12px;background:#e5eae0;border:1px solid #c3cdb9;
  border-radius:8px;color:#4c5a44;font-size:12.5px}

/* ---- celular de verdade (30/08): o topo em linha única forçava a página a
   ~508px e TUDO abria com zoom-out cortado. Agora o header empilha. ---- */
@media(max-width:720px){
  header{position:static}   /* sticky comia 1/3 da tela do celular */
  .topo{flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:12px}
  .logo{order:1}
  .logo img{height:36px}
  .icone-carrinho{order:2;margin-left:auto}
  .topo .busca{order:3;flex:1 1 100%;margin:0}
  .busca input{font-size:16px;padding:11px 13px}   /* <16px faz o iPhone dar zoom no campo */
  .busca button{height:42px}
  .faixa .env{padding-top:8px;padding-bottom:8px;font-size:10px;letter-spacing:.09em}
  .menu-cats .env{gap:22px}
  .menu-cats a{padding:12px 2px;font-size:11.5px}
  /* dica visual de que a barra de categorias rola para o lado */
  .menu-cats{position:relative}
  .menu-cats::after{content:'';position:absolute;top:0;right:0;bottom:0;width:34px;
    background:linear-gradient(to left,#1b170f,transparent);pointer-events:none}
  section.bloco{padding:56px 0}
  .hero .env{padding-top:52px;padding-bottom:52px;gap:34px}
  .colagem{height:300px}
  .cabeca{margin-bottom:26px}
  .display{font-size:clamp(30px,9vw,40px)}
  .cta .btn{flex:1 1 100%;justify-content:center}
  .dados-cliente input,.dados-cliente textarea,.cep input,.ordena{font-size:16px}
  .item{grid-template-columns:76px 1fr;row-gap:6px}
  .item .v{grid-column:2;text-align:left;font-size:15px}
  .item .v small{display:inline;margin-left:8px}
  .resumo{padding:20px 16px}
  .sh{padding-top:52px;padding-bottom:52px;gap:36px}
  .zap{right:16px;bottom:16px;width:50px;height:50px}
}

/* ---- conserto 30/08: 'bloco env' no MESMO elemento — o padding vertical do
   .bloco anulava o respiro lateral do .env (contato/sobre/404/pedido-*) ---- */
section.bloco.env{padding-left:32px;padding-right:32px}
@media(max-width:620px){section.bloco.env{padding-left:20px;padding-right:20px}}

/* ---- botão Voltar nas migalhas (pedido do Gustavo: sem beco sem saída) ---- */
.migalhas{display:flex;align-items:center;flex-wrap:wrap}
.voltar{display:inline-flex;align-items:center;gap:6px;margin-right:14px;
  border:1px solid var(--borda-2);border-radius:99px;padding:6px 14px;
  font-size:12px;letter-spacing:.05em;color:var(--creme-2);
  transition:color .25s,border-color .25s;line-height:1}
.voltar:hover{color:var(--dourado-claro);border-color:var(--dourado)}
@media(max-width:720px){
  .voltar{padding:9px 16px;font-size:13px}   /* alvo de toque confortável */
  .migalhas{row-gap:8px}
}

/* ---- botão Compartilhar (produto e categoria, 30/08) ---- */
.compartilhar{display:inline-flex;align-items:center;gap:8px;justify-content:center}
.barra-cat .compartilhar{border:1px solid var(--borda-2);border-radius:99px;padding:7px 15px;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--creme-2);
  transition:color .25s,border-color .25s}
.barra-cat .compartilhar:hover{color:var(--dourado-claro);border-color:var(--dourado)}
.barra-cat .compartilhar svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ---- atalhos de filtro na home (30/08) ---- */
.atalhos{border-bottom:1px solid var(--borda);background:var(--grafite-2)}
.atalhos .env{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:14px;padding-bottom:14px}
.atalhos .rot{font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--dourado);margin-right:6px}
.atalhos a{border:1px solid var(--borda-2);border-radius:99px;padding:8px 16px;
  font-size:12.5px;color:var(--creme-2);transition:color .25s,border-color .25s,background .25s}
.atalhos a:hover{color:var(--dourado-claro);border-color:var(--dourado);background:#f1eee7}
@media(max-width:720px){
  .atalhos .env{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .atalhos .env::-webkit-scrollbar{display:none}
  .atalhos a{white-space:nowrap;flex:0 0 auto}
  .atalhos .rot{display:none}
}

/* ---- carrossel do herói (banners recompostos do site antigo, 30/08) ---- */
.hero-carrossel{position:relative;aspect-ratio:1120/1000;border-radius:2px;overflow:hidden;
  box-shadow:0 30px 60px -26px rgba(20,16,10,.5)}
.hero-carrossel .slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;
  transition:opacity .8s var(--t),visibility .8s}
.hero-carrossel .slide.on{opacity:1;visibility:visible}
.hero-carrossel .slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero-carrossel .pontos{position:absolute;left:0;right:0;bottom:14px;display:flex;
  justify-content:center;gap:10px;z-index:3}
.hero-carrossel .ponto{width:9px;height:9px;border-radius:50%;padding:0;
  background:rgba(27,23,15,.25);border:1px solid rgba(27,23,15,.4);transition:background .3s,transform .3s}
.hero-carrossel .ponto.on{background:var(--dourado);border-color:var(--dourado);transform:scale(1.25)}
.hero-carrossel .slide:hover img{transform:scale(1.015)}
.hero-carrossel .slide img{transition:transform .8s var(--t)}
@media(max-width:720px){
  .hero-carrossel{max-width:100%}
}

/* ---- fotos do showroom (humanização, 30/08) ---- */
.sh-fotos{position:relative;padding-bottom:34px}
.sh-fotos figure{margin:0;border-radius:2px;overflow:hidden}
.sh-fotos .sh-grande{box-shadow:0 30px 60px -26px rgba(0,0,0,.6);border:1px solid #332d20}
.sh-fotos .sh-grande img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}
.sh-fotos .sh-mini{position:absolute;left:-34px;bottom:0;width:46%;
  border:4px solid #171310;box-shadow:0 22px 44px -18px rgba(0,0,0,.7)}
.sh-fotos .sh-mini img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.passos.horizontal{display:flex;flex-wrap:wrap;gap:0;border-left:0;padding:18px 0 46px;
  border-top:1px solid #332d20;margin-top:8px}
.passos.horizontal li{flex:1 1 220px;border-top:0;padding:10px 22px 0 0}
.passos.horizontal li+li{border-top:0}
.galeria-showroom{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}
.galeria-showroom .alto{grid-row:span 2}
.galeria-showroom figure{margin:0;border-radius:2px;overflow:hidden;background:#f1eee7;
  border:1px solid var(--borda)}
.galeria-showroom img{width:100%;height:100%;object-fit:cover;display:block}
.galeria-showroom .alto img{aspect-ratio:4/5}
.galeria-showroom figure:not(.alto) img{aspect-ratio:16/10}
.galeria-showroom figcaption{padding:10px 14px;font-size:12px;letter-spacing:.06em;
  color:var(--cinza-txt);background:var(--grafite-2);border-top:1px solid var(--borda)}
.foto-contato{margin:0 0 22px;border-radius:2px;overflow:hidden;border:1px solid var(--borda)}
.foto-contato img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
@media(max-width:720px){
  .sh-fotos{padding-bottom:0;margin-top:6px}
  .sh-fotos .sh-mini{display:none}   /* no celular, uma foto forte basta */
  .galeria-showroom{grid-template-columns:1fr}
  .galeria-showroom .alto{grid-row:auto}
  .passos.horizontal{padding-bottom:26px}
}

/* ---- kits de fechadura (conjuntos, 30/08) ---- */
.kit-comp{margin:22px 0 4px;border:1px solid var(--borda);border-radius:2px;background:var(--grafite-2)}
.kit-comp .rot{padding:12px 16px 0;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dourado)}
.kit-comp ul{list-style:none;margin:8px 0 0;padding:0 16px}
.kit-comp li{padding:9px 0;border-top:1px solid var(--borda);font-size:13.5px;color:var(--creme-2)}
.kit-comp li:first-child{border-top:0}
.kit-comp b{font-weight:500;color:var(--cinza-txt)}
.kit-comp .obs{padding:10px 16px 14px;font-size:12px;color:var(--cinza-txt)}
.kit-comp .cod-comp{float:right;font-size:11px;color:var(--cinza-txt);font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em}

/* ---- SKU discreto ao lado do nome na vitrine (30/08) ---- */
.card h3 .sku{font-style:italic;font-weight:300;font-size:11px;color:var(--cinza-txt);
  letter-spacing:.04em;white-space:nowrap}

/* ---- visão do gestor (link interno por token, 30/08) ---- */
.gestor .g-cartao{border:1px solid var(--borda);border-radius:2px;background:var(--grafite-2);
  padding:18px 20px;margin-top:16px}
.gestor .g-cartao h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dourado);margin-bottom:10px;font-family:var(--sans)}
.gestor .g-cartao p{font-size:14px;margin:3px 0;color:var(--creme-2)}
.gestor .ajuda-gestor{font-size:12px;color:var(--cinza-txt)!important;margin-top:8px}
.gestor .g-tab{width:100%;border-collapse:collapse;font-size:13.5px}
.gestor .g-tab th{text-align:left;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cinza-txt);padding:6px 8px 6px 0;border-bottom:1px solid var(--borda)}
.gestor .g-tab td{padding:8px 8px 8px 0;border-bottom:1px solid var(--borda);vertical-align:top}
.gestor .g-comp td{font-size:12px;color:var(--cinza-txt);border-bottom:1px dotted var(--borda)}
.gestor .g-total td{border-bottom:0;font-size:15px;padding-top:12px}
.gestor .mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.gestor .g-rastreio{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.gestor .g-rastreio input{flex:1 1 240px;background:var(--grafite);border:1px solid var(--borda-2);
  border-radius:2px;padding:11px 12px;font-size:16px;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--creme)}

/* ---- landing de promoção (30/08) ---- */
.lp-promo{background:var(--grafite)}
.pr-topo{background:#16130e;border-bottom:1px solid #322c1f}
.pr-topo .env{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:14px;padding-bottom:14px}
.pr-logo-claro{height:34px;width:auto;filter:brightness(0) invert(0.92)}
.pr-acoes{display:flex;gap:10px;flex-wrap:wrap}
.pr-btn,.pr-btn-cheio{border:1px solid #57503f;border-radius:2px;padding:9px 16px;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#f2efe8}
.pr-btn-cheio{background:var(--dourado);border-color:var(--dourado);color:#fffdf8}
.pr-hero{background:#1b170f;border-bottom:1px solid #322c1f;padding:52px 0 46px}
.pr-hero .display{color:#f2efe8;margin:14px 0 6px}
.pr-hero .lead{color:#aaa290}
.pr-chips{display:flex;gap:10px;flex-wrap:wrap}
.pr-chip{border:1px solid #57503f;border-radius:99px;padding:6px 14px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:#d8d2c3}
.pr-chip.destaque{background:var(--dourado);border-color:var(--dourado);color:#fffdf8}
.pr-hero-acoes{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.pr-hero-acoes .btn-linha{color:#f2efe8;border-color:#57503f}
.pr-hero-acoes .btn-linha:hover{border-color:var(--dourado);color:#c9b489}
.pr-card{position:relative;border:1px solid var(--borda);border-radius:2px;background:var(--grafite-2);
  padding:14px}
.pr-off{position:absolute;top:-10px;right:12px;z-index:3;background:var(--oliva);color:#f2f5f0;
  font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:99px;letter-spacing:.04em}
.pr-precos{margin:10px 0 12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pr-precos s{color:var(--cinza-txt);font-size:13px}
.pr-precos b{font-size:21px;color:var(--dourado-claro);font-family:var(--serif);font-weight:400}
.pr-precos small{font-size:11px;color:var(--cinza-txt)}
.pr-comprar .btn{width:100%;justify-content:center}
.pr-rodape-nota{margin-top:28px;font-size:12px;color:var(--cinza-txt);border-left:2px solid var(--dourado);
  padding-left:12px;max-width:70ch}
.pr-barra{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#1b170f;color:#f2efe8;
  text-align:center;padding:14px;font-size:14px;border-top:2px solid var(--dourado)}
.pr-barra b{color:#c9b489}
.pr-fim{border-top:1px solid var(--borda);background:#e7e3da;margin-top:40px}
.pr-fim .env{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:18px;padding-bottom:18px;font-size:12px;color:#8b8471}
@media(max-width:720px){
  .pr-topo .env{flex-wrap:wrap}
  .pr-hero{padding:36px 0 32px}
}

/* ---- painel de subcategorias no toque (30/08) ---- */
.sub-painel{display:none;width:100%;background:#241e13;border-top:1px solid #3a3324}
.sub-painel.on{display:block}
.sub-painel a{display:block;padding:13px 20px;font-size:13px;letter-spacing:.08em;
  color:#d8d2c3;border-bottom:1px solid #322c1f}
.sub-painel a:last-child{border-bottom:0}
.sub-painel a:active{background:rgba(162,140,102,.18)}
.sub-painel .sub-tudo{color:#c9b489;font-weight:500}

/* ---- banner LGPD (31/08) ---- */
.lgpd{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:560px;margin:0 auto;
  background:#1b170f;color:#d8d2c3;border:1px solid #3a3324;border-top:2px solid var(--dourado);
  border-radius:4px;padding:18px 20px;box-shadow:0 24px 50px -18px rgba(0,0,0,.6);font-size:13px}
.lgpd p{margin:0 0 10px;line-height:1.55}
.lgpd a{color:#c9b489;text-decoration:underline}
.lgpd-ops{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px;font-size:12.5px}
.lgpd-ops label{display:flex;gap:6px;align-items:center}
.lgpd-botoes{display:flex;gap:10px;flex-wrap:wrap}
.lgpd .btn{padding:10px 18px;font-size:11.5px}
.lgpd .btn-linha{color:#d8d2c3;border-color:#57503f}
.pagina-texto{max-width:760px}
.pagina-texto h2{margin:26px 0 8px;font-size:20px}
.pagina-texto p,.pagina-texto li{color:var(--creme-2);font-size:14.5px;line-height:1.75;margin-bottom:10px}
.pagina-texto ul{padding-left:22px}

/* ---- Fase 1 UX (31/08/26): selos, frete no produto, guia de medidas, showroom ---- */
.selos-conf{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:12.5px}
.selos-conf a{display:inline-flex;align-items:center;gap:6px;color:var(--cinza-txt)}
.selos-conf a:hover{color:var(--creme)}
.selos-conf svg{width:14px;height:14px;stroke:var(--dourado);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
aside .selos-conf{justify-content:center;margin-top:16px;font-size:12px}
aside .selos-conf a{color:var(--cinza-txt);border-bottom:1px dotted rgba(164,158,145,.4)}

.frete-sim{margin-top:22px;border:1px solid var(--borda);border-radius:2px;padding:16px 18px}
.frete-sim .rot{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dourado);margin-bottom:10px}
.frete-sim form{display:flex;gap:10px}
.frete-sim input{flex:1;min-width:0;background:transparent;border:1px solid var(--borda);border-radius:2px;
  padding:10px 12px;color:var(--creme);font-size:16px}
.frete-sim .btn{padding:10px 18px;white-space:nowrap}
.frete-erro{margin-top:10px;font-size:13px;color:#c98a7d}
.frete-res{list-style:none;margin-top:12px;border-top:1px solid var(--borda)}
.frete-res li{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--borda);font-size:13.5px}
.frete-res b{color:var(--creme);font-weight:600;min-width:96px}
.frete-res span{color:var(--cinza-txt);flex:1}
.frete-res em{font-style:normal;color:var(--dourado-claro);font-weight:600;white-space:nowrap}
.frete-obs{margin-top:10px;font-size:12.5px;color:var(--cinza-txt)}

.guia-med{margin-top:22px;border:1px solid var(--borda);border-radius:2px;padding:16px 18px}
.guia-med .rot{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dourado);margin-bottom:12px}
.guia-svg{width:100%;max-width:300px;display:block;margin:0 auto 10px}
.guia-svg rect,.guia-svg line,.guia-svg path{stroke:var(--cinza-txt);fill:none;stroke-width:1.2}
.guia-svg rect{stroke:var(--dourado-claro)}
.guia-svg circle{fill:var(--dourado)}
.guia-svg text{fill:var(--cinza-txt);font-size:9px;letter-spacing:.06em}
.guia-med ul{list-style:none}
.guia-med li{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-top:1px solid var(--borda);font-size:13.5px}
.guia-med li span{color:var(--cinza-txt)}
.guia-med li b{color:var(--creme);font-weight:600;white-space:nowrap}
.guia-link{display:inline-block;margin-top:12px;font-size:13px;color:var(--dourado-claro);
  border-bottom:1px solid rgba(179,162,132,.4)}
.guia-link.solto{margin-top:18px}

.info-show div{padding:10px 0}
@media (max-width:720px){
  .frete-sim form{flex-direction:column}
  .frete-sim .btn{width:100%}
}

/* botões de marca no filtro (05/09/26) */
.marcas-filtro{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.marcas-filtro .chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;
  border:1px solid var(--borda-2);border-radius:2px;font-size:12px;letter-spacing:.06em;
  color:var(--creme-2);transition:border-color .25s,color .25s,background .25s}
.marcas-filtro .chip .n{font-size:10.5px;color:var(--cinza-txt)}
.marcas-filtro .chip:hover{border-color:var(--dourado);color:var(--dourado-claro)}
.marcas-filtro .chip.on{background:var(--dourado);border-color:var(--dourado);color:#fffdf8}
.marcas-filtro .chip.on .n{color:#f4ecdd}

/* lightbox da foto do produto (05/09/26) */
.luz{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background:rgba(20,17,12,.92);
  display:none;align-items:center;justify-content:center}
.luz.on{display:flex}
.luz img{max-width:92vw;max-height:92vh;width:auto;height:auto;border-radius:2px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);cursor:zoom-out}
.luz button{position:absolute;color:#e8e2d4;font-size:34px;line-height:1;padding:14px 18px;
  transition:color .2s;z-index:1}
.luz button:hover{color:var(--dourado)}
.luz-x{top:10px;right:14px}
.luz-ant{left:6px;top:50%;transform:translateY(-50%);font-size:52px}
.luz-prox{right:6px;top:50%;transform:translateY(-50%);font-size:52px}
@media (max-width:720px){.luz-ant{left:0}.luz-prox{right:0}}

/* banners fixos ROTATIVOS do herói (artes do Gustavo, 05/09/26) — borda a borda */
.hero-fixo{background:#1b170f;border-bottom:1px solid var(--borda);position:relative}
.hero-fixo a.bf{display:block;line-height:0}
.hero-fixo a.bf:not(.on){display:none}
.hero-fixo img{width:100%;height:auto;display:block}
.bf-pontos{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:10px;justify-content:center}
.bf-ponto{width:9px;height:9px;border-radius:50%;background:rgba(242,239,232,.45);
  transition:background .3s,transform .3s;padding:0}
.bf-ponto.on{background:#c9b489;transform:scale(1.25)}
.bf-ponto:hover{background:#f2efe8}

/* botão limpar filtros (05/09/26) */
.limpar-filtros{display:block;text-align:center;margin-bottom:20px;padding:9px 14px;
  border:1px solid var(--borda-2);border-radius:2px;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--creme-2);transition:border-color .25s,color .25s}
.limpar-filtros:hover{border-color:var(--dourado);color:var(--dourado-claro)}
