/* Provador LZG — mesma pele da boutique.
   Off-white e preto, Playfair no nome e DM Sans no resto. A cor vem da peça,
   nunca da interface: nada de dourado, glow, gradiente decorativo ou canto
   arredondado. Os nomes das variáveis são os antigos de propósito — só os
   valores mudaram, então nenhuma regra de layout precisou ser reescrita. */
@font-face{font-family:'Playfair Display';font-weight:400;font-display:swap;
  src:url('fonte/PlayfairDisplay-400.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:700;font-display:swap;
  src:url('fonte/PlayfairDisplay-700.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-weight:100 1000;font-display:swap;
  src:url('fonte/DMSans-var.woff2') format('woff2')}

:root{
  --preto:#F4F2EE; --grafite:#F4F2EE; --carvao:#EDEAE4; --alto:#E9E5DE;
  --linha:#D9D3C9; --linha2:#C3BCB0;
  --champanhe:#121110; --dourado:#3A3733;
  --texto:#121110; --suave:#6E6963; --fraco:#A39D94;
  --ok:#4F6B4F; --alerta:#8A4B2E;
  --raio:0px;
  --sombra:none;
  --rapido:.18s cubic-bezier(.2,.7,.2,1);
  --suave-t:.38s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce){
  :root{ --rapido:0s; --suave-t:0s }
  *,*::before,*::after{ animation-duration:.001s!important; transition-duration:.001s!important }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:light}
body{background:var(--preto);color:var(--texto);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body.travado{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:1px solid var(--champanhe);outline-offset:3px}
[hidden]{display:none!important}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.serif{font-family:'Playfair Display',Georgia,serif;font-weight:400;letter-spacing:-.01em}
.etq{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--fraco)}

/* ---------- topo ---------- */
.aviso-previa{background:var(--texto);color:var(--preto);text-align:center;
  padding:8px 16px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.topo{position:sticky;top:0;z-index:40;background:rgba(244,242,238,.94);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)}
.topo .env{display:flex;align-items:center;gap:14px;padding:14px 22px;
  max-width:1560px;margin:0 auto;flex-wrap:wrap}
.marca{font-family:'Playfair Display',serif;font-size:19px;letter-spacing:.24em;
  text-transform:uppercase;white-space:nowrap}
.marca b{font-weight:400;color:var(--champanhe)}
.navloja{display:flex;gap:22px;margin-right:auto}
.navloja a{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--suave);
  padding:5px 0;border-bottom:1px solid transparent;transition:color var(--rapido)}
.navloja a:hover{color:var(--texto)}
.navloja a[aria-current="page"]{color:var(--texto);border-bottom-color:var(--champanhe)}
@media(max-width:860px){.navloja{display:none}}
.modos{display:flex;border:1px solid var(--linha);border-radius:0;padding:3px;gap:2px}
.modos button{padding:7px 16px;border-radius:0;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--suave);transition:color var(--rapido),background var(--rapido)}
.modos button[aria-pressed="true"]{background:var(--texto);color:var(--preto);font-weight:400}
.bt-sacola{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--linha);
  border-radius:0;padding:9px 16px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;transition:border-color var(--rapido)}
.bt-sacola:hover{border-color:var(--champanhe)}
.bt-sacola .n{min-width:20px;height:20px;border-radius:0;background:var(--texto);
  color:#231B0D;font-size:11px;font-weight:600;display:grid;place-items:center;padding:0 6px}
.bt-sacola .n[data-n="0"]{display:none}
.ic{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}

/* item de grid e de flex nasce com min-width:auto e se recusa a encolher
   abaixo do próprio conteúdo. Sem isto, a barra de ferramentas e a vitrine
   empurram a página inteira além da tela no celular. */
.corpo > *,.palco,.lado,.ferramentas,.grupo,.vitrine,.filtros,
.topo .env > *,.bloco{min-width:0}

/* ---------- estrutura ---------- */
.capa{max-width:1560px;margin:0 auto;padding:26px 22px 10px}
.capa h1{font-size:clamp(28px,4.6vw,50px);line-height:1.04}
.capa h1 em{font-style:normal;color:var(--champanhe)}
.capa p{color:var(--suave);max-width:56ch;margin-top:12px;font-size:14.5px}
.corpo{max-width:1560px;margin:0 auto;padding:22px;display:grid;gap:22px;
  align-items:start}
@media(min-width:1040px){.corpo{grid-template-columns:250px minmax(0,1fr) 380px}}
@media(min-width:1040px) and (max-width:1339px){
  .corpo{grid-template-columns:210px minmax(0,1fr)}
  .lado{grid-column:1/-1}
  .lado{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}

/* palco e carrossel são uma coluna só: soltos, viravam o terceiro item do
   grid e empurravam o painel do produto pra fora da tela */
.centro{display:flex;flex-direction:column;min-width:0}
@media(max-width:1039px){.centro{order:-2}.lado{order:-1}}   /* celular: provador, depois a peça escolhida, depois a coleção */

/* ---------- coluna da coleção ---------- */
.trilha{display:flex;flex-direction:column;gap:14px}
.trilha h2{font-family:'Playfair Display',serif;font-weight:400;font-size:22px;
  margin-top:-4px}
.categorias{display:flex;flex-direction:column;gap:1px}
@media(max-width:1039px){.categorias{flex-direction:row;overflow-x:auto;
  scrollbar-width:none;gap:8px}.categorias::-webkit-scrollbar{display:none}}
.categorias button{display:flex;align-items:center;gap:11px;padding:9px 10px;
  text-align:left;font-size:12px;color:var(--suave);white-space:nowrap;
  border-left:2px solid transparent;transition:color var(--rapido),background var(--rapido)}
.categorias button:hover{color:var(--texto);background:var(--carvao)}
.categorias button[aria-pressed="true"]{color:var(--texto);background:var(--carvao);
  border-left-color:var(--champanhe)}
@media(max-width:1039px){
  .categorias button{border-left:0;border-bottom:1px solid transparent;border-radius:0;
    padding:8px 14px;background:var(--carvao)}
  .categorias button[aria-pressed="true"]{background:var(--champanhe);color:var(--preto)}
}
.categorias .mini{width:30px;height:38px;flex:none;background:var(--alto);
  display:grid;place-items:center;overflow:hidden}
.categorias .mini svg{height:88%;width:auto}
@media(max-width:1039px){.categorias .mini{display:none}}
.duvida{font-size:12px;color:var(--fraco);line-height:1.6;margin-top:6px}
.duvida a{color:var(--suave);border-bottom:1px solid var(--linha)}
.duvida a:hover{color:var(--champanhe)}

/* ---------- outras opções ---------- */
.opcoes{margin-top:16px}
.opcoes .cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:10px}
.opcoes .setas{display:flex;gap:6px}
.opcoes .setas button{width:30px;height:30px;border:1px solid var(--linha);
  border-radius:0;color:var(--suave);font-size:16px;line-height:1}
.opcoes .setas button:hover{border-color:var(--champanhe);color:var(--champanhe)}
.opcoes .fila{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;scroll-snap-type:x mandatory}
.opcoes .fila::-webkit-scrollbar{display:none}
.opcoes .fila .tile{flex:0 0 118px;scroll-snap-align:start}

/* ---------- palco ---------- */
.palco{background:var(--grafite);border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;position:relative}
.quadro{position:relative;aspect-ratio:3/4;max-height:74vh;margin:0 auto;width:100%;
  background:linear-gradient(#EFECE6 0%,#E7E2DA 62%,#DBD5CB 100%);
  display:grid;place-items:center;overflow:hidden;touch-action:none}
.quadro img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(var(--zf,1));transition:transform var(--suave-t)}
.quadro .manequim{height:94%;width:auto;position:relative;z-index:1;opacity:1}
.capa-roupa{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  cursor:grab;touch-action:none}
.capa-roupa.arrastando{cursor:grabbing}
.capa-roupa .peca-svg{height:88%;width:auto;
  transform:translate(var(--px,0px),var(--py,0px)) scale(var(--pe,1));
  transition:transform var(--rapido);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.capa-roupa.arrastando .peca-svg{transition:none}
/* a chamada fica no rodapé do quadro, não no meio: no centro ela cobria
   justamente a peça que a pessoa quer ver */
.vazio-foto{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;
  place-items:end center;text-align:center;padding:60px 22px 20px;pointer-events:none;
  background:linear-gradient(to top,rgba(244,242,238,.96) 34%,rgba(244,242,238,0))}
.vazio-foto > div{pointer-events:auto;max-width:36ch}
.vazio-foto p{color:var(--suave);font-size:13.5px;margin:10px 0 16px}

.ferramentas{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:12px 14px;border-top:1px solid var(--linha);background:var(--carvao)}
.grupo{display:flex;align-items:center;gap:6px;border:1px solid var(--linha);
  border-radius:0;padding:4px 6px}
.grupo > span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fraco);padding:0 6px}
.grupo button{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  color:var(--suave);transition:color var(--rapido),background var(--rapido)}
.grupo button:hover{color:var(--texto);background:var(--alto)}
.grupo button[aria-pressed="true"]{background:var(--champanhe);color:var(--preto)}
.grupo button.txt{width:auto;padding:0 12px;border-radius:0;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase}
.dica{font-size:11.5px;color:var(--fraco);margin-left:auto;text-align:right}

/* ---------- botões ---------- */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--texto);color:var(--preto);border:1px solid var(--texto);
  padding:15px 24px;border-radius:0;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:400;
  transition:background var(--rapido),color var(--rapido)}
.bt:hover{background:transparent;color:var(--texto)}
.bt:active{transform:translateY(1px)}
.bt:disabled{opacity:.4;cursor:not-allowed}
.bt.vazio{background:transparent;color:var(--texto);border-color:var(--linha2);font-weight:400}
.bt.vazio:hover{background:var(--texto);color:var(--preto);border-color:var(--texto)}

/* ---------- painel lateral ---------- */
.lado{display:flex;flex-direction:column;gap:18px}
.bloco{background:var(--grafite);border:1px solid var(--linha);border-radius:var(--raio);
  padding:18px}
.bloco h2{font-family:'Playfair Display',serif;font-weight:400;font-size:21px;margin-bottom:4px}
.filtros{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:14px 0 4px}
.filtros::-webkit-scrollbar{display:none}
.filtros button{white-space:nowrap;border:1px solid var(--linha);border-radius:0;
  padding:7px 14px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--suave);transition:all var(--rapido)}
.filtros button[aria-pressed="true"]{background:var(--texto);color:var(--preto);
  border-color:var(--texto)}

.vitrine{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;
  margin-top:12px;max-height:min(46vh,430px);overflow-y:auto;padding-right:4px}
.vitrine::-webkit-scrollbar{width:5px}
.vitrine::-webkit-scrollbar-thumb{background:var(--linha2);border-radius:3px}
.tile{border:1px solid var(--linha);border-radius:0;overflow:hidden;background:var(--alto);
  text-align:left;transition:border-color var(--rapido),transform var(--rapido)}
.tile:hover{border-color:var(--linha2);transform:translateY(-2px)}
.tile[aria-pressed="true"]{border-color:var(--champanhe)}
.tile .mini{aspect-ratio:3/4;display:grid;place-items:center;padding:8px;
  background:linear-gradient(168deg,#EFEBE4,#DCD5CA)}
.tile .mini svg{height:100%;width:auto}
.tile .mini{position:relative}
.tile .mini .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .cap{padding:8px 9px 10px}
.tile .cap b{display:block;font-weight:500;font-size:11.5px;line-height:1.3}
.tile .cap span{display:block;font-size:11px;color:var(--suave);margin-top:3px}

.produto h3{font-family:'Playfair Display',serif;font-weight:400;font-size:23px;line-height:1.2}
.produto .desc{color:var(--suave);font-size:13.5px;margin-top:8px}
.preco{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.preco .v{font-family:'Playfair Display',serif;font-size:25px}
.preco .pix{font-size:12px;color:var(--champanhe)}
.rot{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fraco);
  margin:16px 0 8px}
.cores{display:flex;gap:9px;flex-wrap:wrap}
.cor{width:24px;height:24px;border-radius:50%;border:1px solid var(--linha2);
  transition:transform var(--rapido),box-shadow var(--rapido)}
.cor[aria-pressed="true"]{box-shadow:0 0 0 2px var(--preto),0 0 0 3px var(--texto);
  transform:scale(1.06)}
.tams{display:flex;gap:8px;flex-wrap:wrap}
.tam{min-width:42px;height:36px;padding:0 10px;border:1px solid var(--linha);border-radius:8px;
  font-size:12.5px;color:var(--suave);transition:all var(--rapido)}
.tam[aria-pressed="true"]{background:var(--texto);color:var(--preto);border-color:var(--texto)}
.tam:disabled{opacity:.32;text-decoration:line-through;cursor:not-allowed}
.estoque{font-size:12px;color:var(--suave);margin-top:10px}
.estoque.pouco{color:var(--alerta)}
.acoes-p{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.acoes-p .bt{flex:1 1 150px}

.combina{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.combina .tile .mini{aspect-ratio:1}

/* ---------- sacola ---------- */
.veu{position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:60;
  animation:aparecer var(--rapido) both}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.gaveta{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:61;
  background:var(--grafite);border-left:1px solid var(--linha);display:flex;
  flex-direction:column;box-shadow:var(--sombra);animation:entrar var(--suave-t) both}
@keyframes entrar{from{transform:translateX(100%)}to{transform:none}}
.gaveta header{display:flex;align-items:center;gap:12px;padding:20px 22px;
  border-bottom:1px solid var(--linha)}
.gaveta header h2{font-family:'Playfair Display',serif;font-weight:400;font-size:20px;
  letter-spacing:.12em;text-transform:uppercase;margin-right:auto}
.gaveta .lista{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:16px}
.gaveta footer{border-top:1px solid var(--linha);padding:18px 22px 22px;display:flex;
  flex-direction:column;gap:14px;max-height:68%;overflow-y:auto}
.linha-s{display:grid;grid-template-columns:58px 1fr auto;gap:13px;align-items:start}
.linha-s .mini{background:var(--alto);border-radius:8px;aspect-ratio:3/4;display:grid;
  place-items:center;padding:5px}
.linha-s .mini svg{height:100%;width:auto}
.linha-s b{font-weight:500;font-size:13.5px;line-height:1.3}
.linha-s .var{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fraco);margin-top:4px}
.linha-s .dir{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.qtd{display:inline-flex;align-items:center;border:1px solid var(--linha);border-radius:0}
.qtd button{width:28px;height:28px;color:var(--suave)}
.qtd button:disabled{opacity:.3;cursor:not-allowed}
.qtd span{min-width:26px;text-align:center;font-size:12.5px}
.tirar{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fraco);
  border-bottom:1px solid var(--linha2)}
.tirar:hover{color:var(--alerta);border-color:var(--alerta)}
.somas{display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--suave)}
.somas .l{display:flex;justify-content:space-between;gap:12px}
.somas .l.total{border-top:1px solid var(--linha);padding-top:12px;margin-top:4px;
  color:var(--texto);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.somas .l.total span:last-child{font-family:'Playfair Display',serif;font-size:23px;
  letter-spacing:0;text-transform:none;color:var(--champanhe)}
.vazia{text-align:center;color:var(--suave);padding:56px 16px;display:flex;
  flex-direction:column;gap:14px;align-items:center;font-size:13.5px}

/* ---------- aviso rápido ---------- */
.torrada{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  background:var(--texto);color:var(--preto);padding:12px 22px;border-radius:0;
  font-size:12px;font-weight:500;box-shadow:var(--sombra);max-width:calc(100% - 32px);
  text-align:center;animation:subir var(--rapido) both}
@keyframes subir{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

.rodape{border-top:1px solid var(--linha);margin-top:30px;padding:26px 22px 34px;
  max-width:1560px;margin-left:auto;margin-right:auto;display:flex;flex-wrap:wrap;gap:10px;
  justify-content:space-between;color:var(--fraco);font-size:11.5px;letter-spacing:.08em}

/* ---------- celular ---------- */
@media(max-width:1039px){
  .quadro{max-height:58vh}
  .vitrine{max-height:none;grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
}
@media(max-width:600px){
  .topo .env{padding:11px 16px;gap:9px}
  .marca{flex:1 1 100%;text-align:center;margin-right:0;order:-1}
  .modos{flex:1 1 auto}
  .modos button{flex:1}
  .ferramentas .grupo{flex:1 1 auto;justify-content:center}
  .marca{font-size:15px;letter-spacing:.18em}
  .modos button{padding:6px 11px;font-size:9.5px;letter-spacing:.12em}
  .bt-sacola{padding:8px 12px}
  .bt-sacola .rot-sac{display:none}
  .capa,.corpo{padding-left:16px;padding-right:16px}
  .ferramentas{gap:8px;padding:10px}
  .dica{margin-left:0;width:100%;text-align:left}
  .bloco{padding:15px}
  .acoes-p .bt{flex:1 1 100%}
}