/** Shopify CDN: Minification failed

Line 157:0 Unexpected "0%"
Line 158:0 Unexpected "18%"
Line 159:0 Unexpected "100%"
Line 160:0 Unexpected "0%"
Line 161:0 Unexpected "30%"
Line 162:0 Unexpected "72%"
Line 163:0 Unexpected "0%"
Line 164:0 Unexpected "40%"
Line 165:0 Unexpected "56%"
Line 166:0 Unexpected "62%"

**/
/* ══ ON Móveis · folha única ═══════════════════════════════════════
   Tokens vêm do layout, que os lê das configurações do tema.
   Nada de framework, nada de reset gigante: só o que a loja usa.
   ═══════════════════════════════════════════════════════════════ */
:root{--gut:20px;--top:62px;--col:clamp(330px,24vw,460px);--ease:cubic-bezier(.22,.61,.36,1)}
@media(min-width:1000px){
:root{--gut:clamp(28px,2.6vw,72px)}
}


*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
  /* o vão da barra de rolagem fica reservado sempre: sem ele, travar a
     página com o menu aberto encolhia a largura e o X saía do lugar */
  scrollbar-gutter:stable}

body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--texto);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}

body.lock{overflow:hidden}

img,svg{max-width:100%;display:block}

img{height:auto}

a{color:inherit;text-decoration:none}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

h1,h2,h3,h4{font-family:var(--titulo);margin:0;line-height:1.16;letter-spacing:-.015em;font-weight:600}

p{margin:0}

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

.pular{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200}

.pular:focus{left:0}

.wrap{padding:0 var(--gut)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.rt p+p{margin-top:12px}

.rt a{text-decoration:underline;text-underline-offset:3px}

.rt ul{margin:12px 0;padding-left:18px}

.lead{font-size:15px;max-width:56ch;opacity:.78}

.chapeu{display:block;font-family:var(--titulo);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin-bottom:10px}

.mini{font-size:13px;opacity:.7;display:inline-block;margin-top:10px}

.sec{padding:clamp(40px,5vw,84px) 0}

.sec__h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,30px)}

.sec h2{font-size:clamp(22px,2.6vw,34px);letter-spacing:-.025em}

.sec__v{font-family:var(--titulo);font-size:13.5px;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:2px}


/* ── barra de aviso ── */
.aviso{background:var(--ink);color:#fff;font-size:13px;text-align:center;padding:9px 0}

.aviso a{text-decoration:underline;text-underline-offset:2px}


/* ── marca ── */
.lg{--h:22px;display:inline-flex;align-items:center;color:var(--ink);flex:none;background:transparent}

.lg__m{height:var(--h);width:calc(var(--h)*1.051);flex:none;transform-origin:50% 50%}

.lg__wrap{overflow:hidden;width:0;flex:none;display:flex;align-items:center;height:calc(var(--h)*1.1857)}

.lg__w{flex:none;display:flex;white-space:nowrap;font-family:var(--titulo);font-weight:600;
  font-size:calc(var(--h)*1.1857);line-height:1;letter-spacing:.02em;
  margin-left:calc(var(--h)*.42);margin-top:calc(var(--h)*-.01)}

.lg__w .l{display:inline-block;transform-origin:50% 52%}

.lg__w .sp{width:.3em}


/* ── topo ── */
/* O topo não acompanha a rolagem em lugar nenhum: fica no alto da página
   e sai de cena junto com o conteúdo. No celular ele carrega só a marca,
   porque todo o resto vive na barra de baixo. */
.top{position:static;z-index:100;height:var(--top);background:var(--bg)}

body{padding-top:0}

.top__in{padding:0 var(--gut);height:100%;display:flex;align-items:center;gap:22px}

.tools{margin-left:auto;display:flex;align-items:center;gap:2px}

.ico{width:40px;height:40px;display:grid;place-items:center;position:relative;border-radius:50%;transition:background .18s}

.ico:hover{background:rgba(0,0,0,.05)}

.ico svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:999px){
 .top .tools{display:none}
}
   /* no celular tudo vive na barra de baixo */
.burg{width:42px;height:42px;display:grid;place-items:center;position:relative;border-radius:50%;transition:background .18s}

.burg:hover{background:rgba(0,0,0,.05)}

.burg i{position:relative;width:19px;height:11px;display:block;transition:opacity .25s}

.burg i::before,.burg i::after{content:"";position:absolute;left:0;width:100%;height:1.6px;
  background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),top .2s var(--ease)}

.burg i::before{top:0}

.burg i::after{top:9.4px}

.burg.x i::before{top:4.7px;transform:rotate(45deg)}

.burg.x i::after{top:4.7px;transform:rotate(-45deg)}

.burg .cx{position:absolute;width:24px;height:24px;opacity:0;pointer-events:none;
  stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linejoin:round;stroke-linecap:round}

.burg .cx__t{transform-origin:4px 10px}

.burg .cx__i{fill:var(--ink);stroke:none;opacity:0}

/* a caixa: as barras somem, a caixa aparece com a tampa aberta, o móvel cai,
   a tampa fecha, a caixa some e as barras voltam. 1,5 s ao todo. */
.burg.caixa i{opacity:0}

.burg.caixa .cx{animation:cx-aparece 1.1s var(--ease) both}

.burg.caixa .cx__t{animation:cx-tampa 1.1s var(--ease) both}

.burg.caixa .cx__i{animation:cx-item 1.1s var(--ease) both}
0%,8%{opacity:0}
18%,86%{opacity:1}
100%{opacity:0}
0%,18%{transform:rotate(0)}
30%,58%{transform:rotate(-70deg)}
72%,100%{transform:rotate(0)}
0%,28%{opacity:0;transform:translateY(-4px)}
40%{opacity:1;transform:translateY(0)}
56%{opacity:1;transform:translateY(9px)}
62%,100%{opacity:0;transform:translateY(9px)}
@media(min-width:1000px){
 .tools{gap:4px}
}

/* a marca dentro do conteúdo existia para quando o cabeçalho sumia no
   celular. Agora o cabeçalho está sempre lá, então ela sai de cena. */
/* ── menu ── */
.menu{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;
  overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s}

.menu.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}

/* a área de clique fora só existe no desktop, onde o painel é uma faixa */
.menu__fora{display:none}
@media(min-width:1000px){

  /* faixa lateral, não a tela toda. Encostada na direita para o X do topo
     cair na mesma coluna do hambúrguer do cabeçalho. */
  .menu{left:auto;right:0;width:clamp(480px,38vw,760px);padding-top:0;
    border-left:1px solid var(--line);box-shadow:-24px 0 60px rgba(0,0,0,.1);
    transform:translateX(24px)}

  .menu.on{transform:none}

  /* clicar fora fecha, e o cursor avisa disso com um X */
  .menu__fora{display:block;position:fixed;top:0;bottom:0;left:0;right:clamp(480px,38vw,760px);
    background:transparent;border:0;
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='15' fill='rgba(28,28,28,.55)'/><path d='M11 11l10 10M11 21L21 11' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/></svg>") 16 16, pointer}
}

/* No celular os ícones vivem só na barra de baixo. O topo do painel é
   coisa de desktop, onde não existe barra de baixo. */
.menu__top{height:64px;display:flex;align-items:center;justify-content:flex-end;gap:2px;
  padding:0 var(--gut);flex:none}

.menu__top .ico{width:42px;height:42px}
@media(max-width:999px){

  /* no celular o painel cobre a página, então a marca vem para cá; os
     ícones e o fechar ficam na barra de baixo, sem repetir nada */
  .menu__top{justify-content:flex-start;height:var(--top);
    border-bottom:1px solid var(--line)}

  .menu__top .ico,.menu__top .menu__x{display:none}

  .menu__body{padding-top:22px}

  .bsc{padding-top:22px}
}

.menu__marca{display:flex;align-items:center}
@media(min-width:1000px){
.menu__marca{display:none}
}

.menu__x{display:none}
@media(min-width:1000px){

  /* com o cabeçalho parado na página, o menu carrega a própria marca e o
     próprio fechar, senão abriria sem logo e sem saída */
  .menu__top{height:var(--top);border-bottom:1px solid var(--line)}

  /* mesma medida do hambúrguer, para cair no mesmo ponto da tela */
  .menu__x{width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.06);
    display:grid;place-items:center;transition:background .18s}

  .menu__x:hover{background:rgba(0,0,0,.12)}

  .menu__x svg{width:20px;height:20px;stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:round}
}

.menu__body{flex:1;width:100%;padding:12px var(--gut) 36px}
@media(max-width:999px){
.menu__body{padding-bottom:96px}
}

@media(min-width:1000px){
.menu__body{padding-top:40px;padding-inline:clamp(28px,3vw,48px)}
}

.cats{position:relative}

.cat__t{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;
  font-family:var(--titulo);font-weight:600;font-size:22px;letter-spacing:-.02em;border-bottom:1px solid var(--hair)}

.cat__t svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.6;fill:none;flex:none;transform:rotate(-90deg)}

.cat__sub{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2;background:var(--bg);overflow-y:auto;
  padding:0 var(--gut) 96px;transform:translateX(100%);visibility:hidden;
  transition:transform .3s var(--ease),visibility .3s}

.cat.on .cat__sub{transform:none;visibility:visible}

.cat__back{display:flex;align-items:center;gap:11px;height:58px;font-family:var(--titulo);font-weight:600;font-size:16px}

.cat__back::before{content:"‹";font-size:21px;font-weight:500;line-height:1}

.subs{list-style:none;margin:0;padding:4px 0 20px;display:grid}

.subs>li{border-bottom:1px solid var(--hair)}

.subs>li>a,.sub__t{font-family:var(--titulo);font-weight:600;font-size:22px;letter-spacing:-.02em;
  display:block;padding:11px 0;width:100%;text-align:left}

.sub__t{display:flex;align-items:center;justify-content:space-between;gap:14px}

.pm2{width:14px;height:14px;position:relative;flex:none}

.pm2::before,.pm2::after{content:"";position:absolute;background:var(--ink);border-radius:1px;transition:transform .3s var(--ease)}

.pm2::before{left:0;right:0;top:6.5px;height:1.4px}

.pm2::after{top:0;bottom:0;left:6.5px;width:1.4px}

.grupo.on .pm2::after{transform:scaleY(0)}

.sub__b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}

.grupo.on .sub__b{grid-template-rows:1fr}

.sub__b>div{overflow:hidden}

.sub__b ul{list-style:none;margin:0;padding:0 0 14px;display:grid;gap:9px}

.sub__b a{font-size:16px;display:inline-block}

.menu__bar{position:sticky;bottom:0;z-index:5;flex:none;background:var(--bg);border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:8px var(--gut)}

.menu__bar .ico{width:46px;height:46px}
@media(max-width:999px){
.menu__bar{display:none}
}

.menu__bar .ico svg{width:21px;height:21px}

.menu__bar .close{width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.07);display:grid;place-items:center}

.menu__bar .close svg{width:20px;height:20px;stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:round}
@media(min-width:1000px){

  .cats{display:grid;grid-template-columns:190px minmax(0,1fr);gap:40px;align-items:start}

  .cats__list{grid-column:1}

  .cat__t{font-size:22px;border:0;padding:8px 0;opacity:.4;transition:opacity .2s}

  .cat.on .cat__t,.cat__t:hover{opacity:1}

  .cat__t svg{display:none}

  .cat__sub{position:absolute;left:230px;right:0;top:0;bottom:auto;padding:0;overflow:visible;
    transform:none;visibility:inherit;opacity:0;pointer-events:none;transition:opacity .22s var(--ease)}

  .cat.on .cat__sub{opacity:1}

  .menu.on .cat.on .cat__sub{pointer-events:auto}

  .cat__back{display:none}

  .subs{padding:0}

  .subs>li{border:0}

  .subs>li>a,.sub__t{font-size:18px;padding:7px 0}

  .sub__t{pointer-events:none}

  .pm2{display:none}

  .sub__b{grid-template-rows:1fr}

  .sub__b ul{padding:2px 0 12px;gap:7px}

  .sub__b a{font-size:15px;opacity:.72}

  .menu__bar{display:flex;justify-content:flex-start;gap:6px}
}


/* ── página de produto ── */
.hero{display:flex;flex-direction:column;padding:16px 0 clamp(34px,4vw,56px)}

.side{display:contents}

/* a marca dentro do conteúdo era para quando o cabeçalho sumia no
   celular; agora o cabeçalho está sempre lá com a marca */
.brand{display:none}

.nomew{order:3}

.stars{display:inline-flex;align-items:center;gap:7px;font-size:13px;margin-top:9px}

.st{display:flex;gap:1.5px}

.st svg{width:12px;height:12px;fill:var(--ink);stroke:none}

.stars b{font-family:var(--titulo);font-weight:600;font-size:13px}

.stars u{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}

.buy__ln{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin-bottom:6px}

.hero h1{font-size:clamp(23px,2.2vw,30px);text-wrap:balance}

.tagsw{order:5;margin-top:14px}

.gal{order:6;margin-top:20px}

.prw{order:7;margin-top:20px}

.desc{order:8;font-size:15px;margin-top:12px;max-width:46ch}

.compra{order:9;display:contents}

.pick{order:9;margin-top:20px}

.opc{order:9}

.ctas{order:10;display:none}
@media(min-width:1000px){
.ctas{display:block}
}

.ship{order:11;margin-top:13px;font-size:13.5px;opacity:.75}
@media(min-width:1000px){
.ship{text-align:center}
}

.tec{order:12;margin-top:26px}
@media(min-width:1000px){

  .hero{display:grid;grid-template-columns:minmax(0,1fr) var(--col);gap:clamp(28px,3vw,64px);
    align-items:start;grid-template-rows:auto auto;padding:24px 0 clamp(40px,4vw,72px)}

  .side{display:flex;flex-direction:column;grid-column:2;grid-row:1 / span 2;position:sticky;top:calc(var(--top) + 24px)}

  .gal{grid-column:1;grid-row:1;order:0;margin-top:0}

  .prw{order:5;margin-top:10px}

  .desc{order:6}

  .tagsw{order:7;margin-top:18px}

  .tec{grid-column:1;grid-row:2;margin-top:clamp(20px,2.2vw,30px);max-width:640px}
}

.gal__track{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -ms-overflow-style:none;margin-inline:calc(var(--gut)*-1)}

.gal__track::-webkit-scrollbar{display:none}

.gal__track::after{content:"";flex:0 0 30px}

.gal__s{flex:0 0 calc(100% - 30px);scroll-snap-align:start;margin:0;background:var(--paper);
  border-radius:0;overflow:hidden;aspect-ratio:4/5}

.gal__s img{width:100%;height:100%;object-fit:cover}
@media(min-width:1000px){

  .gal__track{margin-inline:0}

  .gal__track::after{display:none}

  .gal__s{flex:none;width:auto;height:min(78vh,860px);min-height:520px;aspect-ratio:3/4}
}

.capanav{display:none}

.gal__nav{display:none;align-items:center;gap:2px;margin-top:10px;margin-left:-8px}
@media(min-width:1000px){
.gal__nav{display:flex}
}

.gal__nav button{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;transition:background .18s}

.gal__nav button:hover{background:rgba(0,0,0,.05)}

.gal__nav svg{width:17px;height:17px;stroke:var(--ink);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

.gal__c{margin-left:9px;font-size:12.5px;font-variant-numeric:tabular-nums}

.pr{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}

.pr s{font-size:14px;opacity:.45}

.pr b{font-family:var(--texto);font-size:17px;font-weight:500}

.tags{display:flex;flex-wrap:wrap;gap:6px}

.tag{border:1px solid var(--line);border-radius:2px;padding:6px 10px;font-family:var(--titulo);
  font-size:11px;font-weight:600;letter-spacing:.03em;display:flex;align-items:center;gap:6px;transition:.18s}

.tag::after{content:"i";width:14px;height:14px;border-radius:50%;background:rgba(0,0,0,.08);
  font-size:9px;display:grid;place-items:center;flex:none;line-height:1}

.tag:hover{border-color:var(--ink)}

.pick__h{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;font-size:13.5px}

.pick__h b{font-family:var(--titulo);font-size:13px;font-weight:600}

.pick__h span{opacity:.65}

.pick__r{display:flex;gap:8px;flex-wrap:wrap}

.sw{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--sw,#ccc);
  display:block;flex:none;transition:box-shadow .2s}

.sw.on{box-shadow:0 0 0 1.5px var(--ink),inset 0 0 0 2px var(--bg)}

.size{min-width:56px;height:38px;padding:0 16px;border:1px solid var(--line);background:var(--paper);
  font-family:var(--titulo);font-size:13.5px;font-weight:600;border-radius:999px;transition:.18s;
  display:inline-flex;align-items:center;justify-content:center}

.size.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

.size[disabled]{opacity:.35;text-decoration:line-through;cursor:not-allowed}

/* O display fica na base de propósito: sem ele a classe só funcionava
   em <button>, e qualquer <a class="cta"> virava texto solto, sem
   altura, sem fundo e sem raio. */
.cta{display:grid;place-items:center;text-align:center;
  width:100%;height:52px;background:var(--ink);color:var(--paper);font-family:var(--titulo);
  font-weight:600;font-size:15px;border-radius:999px;margin-top:22px;transition:.2s var(--ease)}

.cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.15)}

.cta[disabled]{opacity:.4;pointer-events:none}

.cta.done{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);transform:none}

.cta--linha{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);
  display:inline-grid;place-items:center;width:auto;padding:0 26px;height:46px;font-size:13.5px}

.tec h4{font-family:var(--titulo);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;opacity:.45;margin:0 0 10px}

.tecs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

.tecs button{display:flex;align-items:center;gap:11px;padding:7px 14px 7px 7px;border:1px solid var(--line);
  background:transparent;transition:border-color .2s,background .2s;text-align:left}

.tecs button:hover{border-color:var(--ink);background:rgba(0,0,0,.02)}

.tecs img{width:40px;height:34px;object-fit:cover;flex:none}

.tecs__s{width:40px;height:34px;flex:none;display:grid;place-items:center;background:var(--bg);
  border:1px solid var(--hair)}

.tecs__i{width:20px;height:20px;fill:currentColor}

.tecs span{font-family:var(--titulo);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
@media(min-width:1000px){
.tecs{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

  .tecs img,.tecs__s{width:46px;height:40px}
.tecs__i{width:23px;height:23px}
.tecs span{font-size:11.5px}
}


/* ── acordeões dos blocos ── */
/* Camada própria, acima da capa. O fundo sozinho não bastou: fundo de
   elemento estático pinta ABAIXO de elemento posicionado, e o hero da
   capa é posicionado, então a foto sticky continuava aparecendo por
   cima dos blocos num instante do scroll. Com position e z-index, os
   blocos viram uma camada inteira sobre o hero, sempre. */
.blocks{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--line)}

.acc{border-bottom:1px solid var(--line)}
@media(min-width:1000px){

  .blocks{border-top:0}

  .acc{border-bottom:0}

  .acc__t{max-width:1180px;margin-inline:auto;border-top:1px solid var(--line)}

  /* a linha que fecha a lista, na mesma largura dos títulos */
  .blocks::after{content:"";display:block;max-width:1180px;margin-inline:auto;
    border-bottom:1px solid var(--line)}
}

@media(max-width:999px){

  .acc.open>.acc__t{position:sticky;top:0;z-index:30;background:var(--bg);
    box-shadow:0 1px 0 var(--line),0 6px 14px -12px rgba(0,0,0,.4)}

  body:not(.t-product) .acc.open>.acc__t{position:static;box-shadow:none}
}

.acc__t{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(18px,2vw,26px) var(--gut);text-align:left}

.acc__t span{font-family:var(--titulo);font-weight:600;font-size:clamp(18px,1.9vw,23px);letter-spacing:-.015em}

.acc__t em{display:block;font-style:normal;font-family:var(--texto);font-size:14px;opacity:.55;margin-top:3px;letter-spacing:0}

.pm{width:15px;height:15px;position:relative;flex:none}

.pm::before,.pm::after{content:"";position:absolute;background:var(--ink);border-radius:1px;transition:transform .3s var(--ease)}

.pm::before{left:0;right:0;top:7px;height:1.4px}

.pm::after{top:0;bottom:0;left:7px;width:1.4px}

.acc.open>.acc__t .pm::after,.qa.open>button .pm::after{transform:scaleY(0)}

.acc__b,.qa__b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}

.acc.open .acc__b,.qa.open .qa__b{grid-template-rows:1fr}

.acc__b>div,.qa__b>div{overflow:hidden}

.acc__in{padding:0 var(--gut) clamp(30px,3.4vw,48px)}


/* ── introdução ── */
.intro{display:grid;gap:clamp(44px,6vw,92px);margin-top:clamp(20px,2.6vw,32px)}

.abre h3{font-size:clamp(25px,3.4vw,46px);letter-spacing:-.03em;line-height:1.08;max-width:19ch;text-wrap:balance}

.abre p{margin-top:clamp(14px,1.6vw,20px);font-size:clamp(15.5px,1.35vw,18px);max-width:56ch;opacity:.78}

.larga figure{margin:0;background:var(--paper);overflow:hidden;aspect-ratio:4/3;margin-inline:calc(var(--gut)*-1)}

.larga img{width:100%;height:100%;object-fit:cover}
@media(min-width:820px){
.larga figure{aspect-ratio:21/9;margin-inline:0}
}

.larga__t{display:grid;gap:14px;margin-top:clamp(18px,2.2vw,28px)}
@media(min-width:820px){
.larga__t{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(30px,4vw,70px)}
}

.larga__t h3{font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em;max-width:16ch;text-wrap:balance}

.larga__t p{font-size:clamp(15px,1.3vw,17px);opacity:.78;max-width:52ch}

.par{display:grid;gap:clamp(28px,3.4vw,44px)}
@media(min-width:760px){
.par{grid-template-columns:1fr 1fr}
}

.par figure{margin:0;background:var(--paper);overflow:hidden;aspect-ratio:4/3}

.par img{width:100%;height:100%;object-fit:cover}

.par h3{font-size:clamp(18px,1.8vw,22px);margin-top:clamp(14px,1.6vw,20px);letter-spacing:-.02em}

.par p{margin-top:8px;font-size:15px;opacity:.78;max-width:42ch}


/* ── explore os detalhes ── */
.det__h{font-size:clamp(22px,2.6vw,34px);letter-spacing:-.025em;margin-bottom:clamp(20px,2.4vw,30px)}

.det__w{display:grid;gap:clamp(20px,2.6vw,36px)}
@media(min-width:900px){
.det__w{grid-template-columns:minmax(0,400px) minmax(0,1fr);align-items:start;gap:clamp(28px,3.4vw,56px)}
}

.det__f{position:relative;margin:0;background:var(--paper);overflow:hidden;aspect-ratio:4/3;margin-inline:calc(var(--gut)*-1)}
@media(min-width:900px){
.det__f{aspect-ratio:auto;height:min(62vh,560px);margin-inline:0;order:2;
  position:sticky;top:calc(var(--top) + 24px)}
}

.det__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}

.det__f img.on{opacity:1}

.det__l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media(min-width:900px){
.det__l{order:1}
}

.det__i{border:1px solid var(--line);border-radius:22px;overflow:hidden;
  transition:border-color .25s,background .25s,border-radius .25s var(--ease)}

.det__i.on{border-color:var(--ink);background:var(--paper);border-radius:16px}

.det__b{width:100%;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;text-align:left;
  font-family:var(--titulo);font-weight:600;font-size:15.5px;letter-spacing:-.01em}

.mais{width:22px;height:22px;flex:none;border:1px solid var(--ink);border-radius:50%;position:relative;opacity:.55;transition:opacity .25s}

.det__i.on .mais{opacity:1}

.mais::before,.mais::after{content:"";position:absolute;background:var(--ink);border-radius:1px;transition:transform .3s var(--ease)}

.mais::before{left:5px;right:5px;top:9.6px;height:1.4px}

.mais::after{top:5px;bottom:5px;left:9.6px;width:1.4px}

.det__i.on .mais::after{transform:scaleY(0)}

.det__c{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}

.det__i.on .det__c{grid-template-rows:1fr}

.det__c>div{overflow:hidden}

.det__c p{padding:0 18px 16px 48px;font-size:15px;opacity:.8;max-width:46ch}


/* ── comparativo e garantia ── */
.custo{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,40px)}

.custo>div{min-width:0}


.cmpw{margin-top:20px;min-width:0}

.cmp{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}

.cmp th,.cmp td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--hair);vertical-align:top;
  overflow-wrap:anywhere}

.cmp thead th{border-bottom:1px solid var(--line);padding-bottom:12px;vertical-align:bottom}

.cmp thead span{font-family:var(--titulo);font-size:9.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;opacity:.55;display:block}

.cmp thead b{font-family:var(--titulo);font-size:clamp(17px,4.6vw,29px);font-weight:600;
  letter-spacing:-.03em;display:block;margin-top:5px;opacity:.55}

.cmp thead i{font-style:normal;font-size:10.5px;opacity:.5;display:block}

.cmp tbody th{font-weight:400;font-size:11px;padding-left:0;opacity:.55}

.cmp .k{padding-left:0;width:20%}

.cmp .me{background:var(--ink);color:var(--paper)}

.cmp thead .me{border-bottom-color:var(--ink);padding-top:14px}
@media(min-width:1100px){
.cmp thead .me{padding-top:20px}
}

.cmp thead .me span{opacity:.6}

.cmp thead .me b{opacity:1;font-size:clamp(17px,4.9vw,38px)}

.cmp thead b{white-space:nowrap}

.cmp thead .me i{opacity:.6}

.cmp tbody .me{font-family:var(--titulo);font-weight:600;border-bottom-color:rgba(255,255,255,.14)}

.cmp tbody tr:last-child .me{border-bottom:0}
@media(min-width:640px){

  .cmp{font-size:14px}

  .cmp th,.cmp td{padding:13px 16px}

  .cmp tbody th{font-size:13px;width:98px;white-space:nowrap}

  .cmp thead span{font-size:11.5px}

  .cmp thead i{font-size:12px}
}

.note{margin-top:8px;font-size:12.5px;opacity:.55}

.gar{background:var(--ink);color:var(--paper);padding:clamp(26px,3.2vw,44px);
  display:grid;gap:clamp(14px,2vw,34px);align-items:center}
@media(min-width:760px){
.gar{grid-template-columns:auto minmax(0,1fr)}
}

.gar b{font-family:var(--titulo);font-weight:600;font-size:clamp(44px,6vw,80px);letter-spacing:-.045em;line-height:.9;display:block}

.gar h3{font-size:clamp(17px,1.8vw,22px);color:var(--paper)}

.gar p{margin-top:9px;font-size:15.5px;opacity:.78;max-width:52ch}
@media(min-width:1100px){

  .custo{grid-template-columns:minmax(0,1fr) 340px;gap:0;align-items:stretch}

  .custo .cmpw{margin-top:0}

  .custo .cmp thead th{padding-top:0}

  .custo .gar{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:32px 34px}

  .custo .gar b{font-size:56px}

  .custo .gar h3{font-size:19px}

  .custo .gar p{max-width:none;font-size:14.5px}
}


/* ── avaliações e dúvidas ── */
.revs__v{margin-bottom:clamp(22px,2.6vw,34px)}

.revs__v:empty{display:none}

.rvh{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.rvh>b{font-family:var(--titulo);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1}

.rvh .st svg{width:13px;height:13px}

.rvh span{font-size:14px;opacity:.7}

.revs{display:grid;gap:14px;margin-top:20px}
@media(min-width:820px){
.revs{grid-template-columns:repeat(3,1fr)}
}

.rev{background:var(--paper);border:1px solid var(--line);padding:17px}

.rev__h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;margin-bottom:6px}

.rev__h span{opacity:.55}

.rev__h b{font-family:var(--titulo);font-size:14px;font-weight:600}

.rev__s{display:flex;gap:2px;margin-bottom:7px}

.rev__s svg{width:12px;height:12px;fill:var(--ink);stroke:none}

.rev p{font-size:14.5px}

.rev__v{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.5;
  font-family:var(--titulo);font-weight:600;display:block;margin-top:9px}

.rev__fotos{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}

.rev__fotos a{width:56px;height:56px;overflow:hidden;background:var(--bg);flex:none;position:relative}

.rev__fotos img{width:100%;height:100%;object-fit:cover}

.rev__play::after{content:'';position:absolute;inset:0;margin:auto;width:0;height:0;
  border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}

.revs--carrega{opacity:.45}

.rvmais{margin-top:18px;display:flex;justify-content:center}

.rvmais[hidden]{display:none}

.konf{margin-top:22px}

.faq{max-width:820px;margin-top:18px;display:grid;gap:10px}
@media(min-width:900px){
.faq{margin-inline:auto}
}

.faq--centro{margin-top:clamp(20px,2.4vw,32px)}

.qa{background:var(--paper);border:1px solid var(--hair)}

.qa>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 18px;text-align:left;font-family:var(--titulo);font-weight:600;font-size:15.5px}

.qa .pm{width:13px;height:13px;flex:none}

.qa .pm::before{top:6px}

.qa .pm::after{left:6px}

.qa__b .rt{font-size:15px;padding:0 18px 16px;max-width:70ch;opacity:.8}

.qa{transition:border-color .2s}

.qa.open{border-color:var(--line)}


/* ── barra do celular ── */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:95;padding:9px var(--gut) calc(9px + env(safe-area-inset-bottom));
  justify-content:space-between;
  background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}
@media(min-width:1000px){
.dock{display:none}
}

.dock .cta{margin:0;flex:1;height:48px}

body{padding-bottom:76px}
@media(min-width:1000px){
body{padding-bottom:0}
}



/* ── janela lateral ── */
.sheet{position:fixed;inset:0;z-index:120}

.sheet[hidden]{display:none}

.sheet__bg{position:absolute;inset:0;background:rgba(28,28,28,.32);opacity:0;transition:opacity .3s var(--ease)}

.sheet.on .sheet__bg{opacity:1}

/* No celular a janela tem altura mínima e sobra abaixo do texto, para a
   resposta não terminar colada na borda nem na barra do navegador. */
.sheet__p{position:absolute;left:0;right:0;bottom:0;min-height:42vh;max-height:82vh;overflow-y:auto;
  background:var(--ink);color:var(--paper);
  padding:30px var(--gut) calc(56px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .34s var(--ease)}

.sheet.on .sheet__p{transform:none}
@media(min-width:1000px){
.sheet__p{left:auto;top:0;bottom:0;width:min(460px,42vw);
  min-height:0;max-height:none;padding:34px 40px;transform:translateX(100%)}
}

.sheet__x{position:absolute;top:18px;right:16px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%}

.sheet__x svg{width:18px;height:18px;stroke:var(--paper);stroke-width:1.5;fill:none;stroke-linecap:round}

.sheet h3{font-size:19px;padding-right:44px;color:var(--paper)}

.sheet__c{margin-top:14px;font-size:15px;line-height:1.62;opacity:.85;max-width:46ch}

.sheet__c > *+*{margin-top:12px}


/* ── grades, cartões e listagens ── */
.cab{padding-block:clamp(26px,3.4vw,52px) clamp(18px,2.2vw,28px)}

.cab h1{font-size:clamp(26px,3.4vw,44px);letter-spacing:-.03em}

.cab__d{margin-top:12px;max-width:60ch;opacity:.78;font-size:15px}

.cab__l{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:16px;font-size:13.5px;opacity:.7}

.ordem{display:flex;align-items:center;gap:8px}

.ordem select{font:inherit;font-size:13.5px;border:1px solid var(--line);background:transparent;
  padding:7px 10px;border-radius:999px;color:inherit}

.grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,26px);
  padding-bottom:clamp(30px,4vw,60px)}
@media(min-width:760px){
.grade{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(min-width:1100px){
.grade{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.grade--rola{grid-auto-flow:column;grid-auto-columns:66%;grid-template-columns:none;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut)}

.grade--rola::-webkit-scrollbar{display:none}

.grade--rola,.cols--rola{scroll-padding-inline:var(--gut)}

.grade--rola>*{scroll-snap-align:start}
@media(min-width:900px){
.grade--rola{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));
  overflow:visible;margin-inline:0;padding-inline:0}
}

.card__f{margin:0;background:var(--paper);overflow:hidden;aspect-ratio:4/5;position:relative}

.card__f img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}

.card:hover .card__f img{transform:scale(1.03)}

.card{display:flex;flex-direction:column}

/* o cartão é sempre igual: cor, título, preço e nota, nesta ordem */
.card__sw{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap;min-height:18px}

.card__sw .sw{width:18px;height:18px;border-width:1px}

.card__sw .sw.on{box-shadow:0 0 0 1.5px var(--ink),inset 0 0 0 1.5px var(--bg)}

.sw--vazia{width:18px;height:18px;border-radius:50%;border:1px dashed var(--line);opacity:.5}

.card h3{font-family:var(--titulo);font-size:14.5px;font-weight:600;margin:9px 0 0;line-height:1.3}

.card__r{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:12px;opacity:.7;min-height:14px}

/* sem avaliação ainda: a estrela fica vazia, mas a linha existe */
.card__r--vazia svg{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round;opacity:.38}

.card__r svg{width:11px;height:11px;fill:var(--ink);stroke:none}

.card__r b{font-weight:600}

.card__r em{font-style:normal;opacity:.7}

.card__p{display:grid;justify-items:start;gap:1px;margin-top:3px;font-size:13.5px;line-height:1.25}

.card__p s{opacity:.42;font-size:12px}

.card__p b{font-weight:600}

/* valor e rótulo Pix lado a lado, na linha de baixo */
.pr__v{display:inline-flex;align-items:baseline;gap:5px}

.card__tag{position:absolute;top:10px;left:10px;background:var(--ink);color:var(--paper);
  font-family:var(--titulo);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px}

.card--txt{padding:18px;border:1px solid var(--line)}

.pag{display:flex;align-items:center;justify-content:center;gap:18px;padding:0 0 clamp(40px,5vw,70px);font-size:13.5px}

.pag a{border-bottom:1px solid var(--line)}

.vazio{padding:40px 0;opacity:.6}

.cols{display:grid;gap:clamp(20px,2.6vw,38px);margin-top:clamp(20px,2.6vw,34px)}
@media(min-width:760px){
.cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.cols figure{margin:0;background:var(--paper);overflow:hidden;aspect-ratio:4/3}

.cols img{width:100%;height:100%;object-fit:cover}

.cols h3{font-size:clamp(17px,1.8vw,21px);margin-top:14px}

.cols p{margin-top:6px;font-size:14.5px;opacity:.75}


/* ── capa e foto com texto ── */
.hero-h{position:relative;display:grid;align-items:end}

.hero-h--foto{min-height:clamp(380px,62vh,660px)}

.hero-h__f{position:absolute;inset:0;margin:0;overflow:hidden}

.hero-h__f img{width:100%;height:100%;object-fit:cover}

.hero-h__t{position:relative;padding-top:clamp(60px,10vw,140px);padding-bottom:clamp(30px,4vw,60px);max-width:820px}

.hero-h h1{font-size:clamp(30px,5vw,64px);letter-spacing:-.035em;line-height:1.04;text-wrap:balance}

.hero-h p{margin-top:14px;font-size:clamp(15px,1.5vw,18px);max-width:46ch}

.hero-h .cta--linha{margin-top:22px}

.hero-h--escuro{color:var(--paper)}

.hero-h--escuro::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.05) 60%)}

.hero-h--escuro .hero-h__t{z-index:1}

.hero-h--escuro .cta--linha{box-shadow:inset 0 0 0 1px var(--paper);color:var(--paper)}

.texto{max-width:70ch}

.texto--c{margin-inline:auto;text-align:center}

.texto h2{font-size:clamp(24px,3vw,40px);letter-spacing:-.03em;margin-bottom:14px}


/* ── carrinho ── */
.carrinho{padding-block:clamp(26px,3.4vw,52px) clamp(50px,6vw,90px)}

.carrinho h1{font-size:clamp(24px,3vw,38px);letter-spacing:-.03em;margin-bottom:clamp(20px,2.6vw,34px)}

.carr{display:grid;gap:clamp(24px,3vw,54px);align-items:start}
@media(min-width:900px){
.carr{grid-template-columns:minmax(0,1fr) 340px}
}

.li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;padding:20px 0;border-bottom:1px solid var(--hair)}

.li:first-child{padding-top:0}

/* nome e preço na mesma linha, detalhes embaixo, quantidade no pé */
.li__top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}

.li__top a{min-width:0}

.li__pe{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px}

.li__x{font-size:13px;opacity:.55;border-bottom:1px solid transparent;transition:.18s}

.li__x:hover{opacity:1;border-bottom-color:var(--line)}

.li__f{margin:0;background:var(--paper);overflow:hidden;aspect-ratio:4/5}

.li__f img{width:100%;height:100%;object-fit:cover}

.li__c strong{font-family:var(--titulo);font-size:15px;font-weight:600}

.li__v{display:block;font-size:13px;opacity:.6;margin-top:2px}

.li__d{display:inline-block;margin-top:6px;font-size:12px;border:1px solid var(--line);padding:2px 7px}

.li__q{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px}

.li__q button{width:34px;height:34px;font-size:16px}

.li__q input{width:40px;text-align:center;border:0;background:none;font:inherit;font-size:14px;color:inherit;-moz-appearance:textfield}

.li__q input::-webkit-outer-spin-button,.li__q input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.li__p{font-family:var(--titulo);font-weight:600;font-size:15px;white-space:nowrap;flex:none}

.carr__res{border:1px solid var(--line);padding:clamp(18px,2.2vw,26px);position:sticky;top:calc(var(--top) + 20px)}

.res__l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;font-size:14.5px}

.res__l b{font-family:var(--titulo);font-size:17px}

.res__l--pix{border-top:1px solid var(--hair);margin-top:6px;padding-top:12px}

.res__n{margin-top:12px;font-size:12.5px;opacity:.6}

.vaziao{padding-block:clamp(50px,8vw,110px);text-align:center}

.vaziao h1{font-size:clamp(24px,3vw,38px);margin-bottom:12px}

.vaziao p{opacity:.72;margin-bottom:22px}


/* ── gaveta do carrinho ── */
/* ── janela de confirmação da caixa ─────────────────────────────── */
.add{position:fixed;inset:0;z-index:140;pointer-events:none}

.add[hidden]{display:none}

.add__bg{position:absolute;inset:0;background:rgba(28,28,28,.28);opacity:0;
  transition:opacity .3s var(--ease);pointer-events:none}

.add.on .add__bg{opacity:1;pointer-events:auto}

.add__p{position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:var(--paper);
  padding:20px var(--gut) calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .32s var(--ease);pointer-events:auto}

.add.on .add__p{transform:none}

.add__h{display:flex;align-items:center;justify-content:space-between;gap:16px}

.add__h strong{font-family:var(--titulo);font-size:15px;font-weight:600}

.add__x{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.12);flex:none;transition:background .2s}

.add__x:hover{background:rgba(255,255,255,.2)}

.add__x svg{width:16px;height:16px;stroke:var(--paper);stroke-width:1.6;fill:none;stroke-linecap:round}

.add__i{display:flex;align-items:flex-start;gap:14px;margin:16px 0 18px}

.add__f2{width:64px;flex:none;background:rgba(255,255,255,.08);overflow:hidden;aspect-ratio:4/5}

.add__f2 img{width:100%;height:100%;object-fit:cover}

.add__c{flex:1;min-width:0;display:grid;gap:3px}

.add__c strong{font-family:var(--titulo);font-size:14.5px;font-weight:600;line-height:1.3}

.add__c span{font-size:13px;opacity:.6}

.add__i>b{font-size:14.5px;white-space:nowrap}

.add__f{display:grid;gap:10px}
@media(min-width:560px){
.add__f{grid-template-columns:1fr 1fr}
}

.add__b{height:48px;display:grid;place-items:center;font-family:var(--titulo);font-weight:600;
  font-size:14.5px;background:var(--paper);color:var(--ink);transition:opacity .2s}

.add__b:hover{opacity:.88}

.add__b--linha{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
@media(min-width:1000px){

  /* no desktop é um cartão de canto: a página continua livre atrás dele */
  .add.on .add__bg{opacity:0;pointer-events:none}

  .add__p{left:auto;right:20px;bottom:20px;width:min(430px,calc(100vw - 40px));padding:22px;
    box-shadow:0 18px 50px rgba(0,0,0,.3)}
}


.gav{position:fixed;inset:0;z-index:130}

.gav[hidden]{display:none}

.gav__bg{position:absolute;inset:0;background:rgba(28,28,28,.32);opacity:0;transition:opacity .3s var(--ease)}

.gav.on .gav__bg{opacity:1}

.gav__p{position:absolute;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--bg);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .34s var(--ease)}
/* no celular a gaveta é a tela inteira: sem fresta, sem fundo espiando */
@media(max-width:999px){
.gav--filtro .gav__p{width:100%}
}

.gav.on .gav__p{transform:none}

.gav__h{display:flex;align-items:center;justify-content:space-between;padding:18px var(--gut);
  border-bottom:1px solid var(--line);font-family:var(--titulo)}

.gav__x{width:36px;height:36px;display:grid;place-items:center}

.gav__x svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:round}

.gav__c{flex:1;overflow-y:auto;padding:8px var(--gut)}

.gav__f{border-top:1px solid var(--line);padding:16px var(--gut) calc(20px + env(safe-area-inset-bottom))}



/* ── páginas de conteúdo e conta ── */
.pagina{padding-block:clamp(30px,4vw,64px) clamp(50px,6vw,90px);max-width:74ch;box-sizing:content-box}

.pagina h1{font-size:clamp(26px,3.4vw,44px);letter-spacing:-.03em;margin-bottom:18px}

.artigo{padding-block:clamp(30px,4vw,64px) clamp(50px,6vw,90px);max-width:74ch;box-sizing:content-box}

.artigo h1{font-size:clamp(26px,3.4vw,44px);letter-spacing:-.03em}

.artigo__f{margin:clamp(20px,3vw,36px) 0;background:var(--paper);overflow:hidden;aspect-ratio:16/9}

.artigo__f img{width:100%;height:100%;object-fit:cover}

.conta{padding-block:clamp(26px,3.4vw,52px) clamp(50px,6vw,90px)}

.conta h1{font-size:clamp(24px,3vw,38px);letter-spacing:-.03em;margin-bottom:20px}

.conta h2{font-size:18px;margin-bottom:12px}

.conta__g{display:grid;gap:clamp(24px,3vw,52px)}
@media(min-width:820px){
.conta__g{grid-template-columns:1fr 1fr}
}

.conta--uma{max-width:520px}

.conta label{display:block;font-size:13px;margin:14px 0 5px;opacity:.7}

.conta input{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--line);background:var(--paper);color:inherit}

.conta .cta{max-width:280px}

.tab{width:100%;border-collapse:collapse;font-size:14px}

.tab th,.tab td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--hair)}

.tab th{font-family:var(--titulo);font-size:12px;opacity:.6}

.end{border-bottom:1px solid var(--hair);padding:14px 0}

.busca{display:flex;gap:8px;margin-top:16px;max-width:520px}

.busca input{flex:1;font:inherit;padding:12px 16px;border:1px solid var(--line);background:var(--paper);color:inherit;border-radius:999px}

.busca button{font-family:var(--titulo);font-size:13.5px;font-weight:600;padding:0 20px;
  border-radius:999px;background:var(--ink);color:var(--paper)}

.erro{color:#b23c2e;font-size:13.5px;margin-top:10px}

.senha{min-height:100vh;display:grid;place-items:center;padding:var(--gut);text-align:center}

.senha__c{max-width:420px;display:grid;justify-items:center;gap:14px}

.senha input{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--line);background:var(--paper);color:inherit}


/* ── rodapé ── */
.ft{border-top:1px solid var(--line);padding:clamp(36px,4.5vw,64px) 0 clamp(28px,3vw,44px);margin-top:clamp(30px,4vw,60px)}

.ft__topo{display:grid;gap:clamp(24px,3vw,48px)}
@media(min-width:760px){
.ft__topo{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.ft h3{font-family:var(--titulo);font-size:12.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;opacity:.5;margin-bottom:12px}

.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px}

.ft__col--texto .rt{font-size:14.5px;opacity:.78;max-width:40ch}

.news{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

.news input{flex:1;min-width:180px;font:inherit;font-size:14px;padding:11px 14px;
  border:1px solid var(--line);background:var(--paper);color:inherit;border-radius:999px}

.news button{font-family:var(--titulo);font-size:13px;font-weight:600;padding:0 18px;border-radius:999px;
  background:var(--ink);color:var(--paper)}

.news .ok{width:100%;font-size:13px;opacity:.7}

.ft__base{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;
  font-size:12px;margin-top:clamp(30px,3.4vw,50px);padding-top:20px;border-top:1px solid var(--hair)}

.ft__base p{opacity:.5;max-width:62ch;order:2;flex:1 1 260px}

.ft__redes{display:flex;gap:4px;order:1}

.ft__redes a{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  opacity:.55;transition:opacity .2s,background .2s}

.ft__redes a:hover{opacity:1;background:rgba(0,0,0,.05)}

.ft__redes svg{width:17px;height:17px;fill:currentColor}
@media(min-width:760px){
.ft__base p{order:1}
.ft__redes{order:2}
}

@media(prefers-reduced-motion:reduce){

  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}

  html{scroll-behavior:auto}
}


/* ── coleção: marca no topo do conteúdo, como na PDP ── */
.brand--col{display:none}

.cab__f{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.botao-filtro{display:none;font-family:var(--titulo);font-size:13.5px;font-weight:600;
  border:1px solid var(--line);border-radius:999px;padding:7px 16px;transition:border-color .2s}

.botao-filtro:hover{border-color:var(--ink)}

.botao-filtro b{font-size:11px;background:var(--ink);color:var(--paper);border-radius:8px;padding:1px 6px;margin-left:4px}
@media(min-width:1000px){
.botao-filtro{display:inline-flex;align-items:center}
}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(16px,2vw,24px)}

.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;transition:border-color .2s}

.chip:hover{border-color:var(--ink)}

.chip svg{width:11px;height:11px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}

.chip--limpa{border-style:dashed}


/* ── gaveta de filtros ── */
/* grade esmaecendo enquanto o filtro novo chega */
#colGrade{transition:opacity .18s var(--ease)}

#colGrade.carrega{opacity:.45;pointer-events:none}

.gav--filtro .gav__p{left:0;right:auto;transform:translateX(-100%)}

.gav--filtro.on .gav__p{transform:none}
@media(max-width:759px){

  .gav--filtro .gav__p{left:0;right:0;top:auto;bottom:0;width:auto;max-height:86vh;transform:translateY(100%)}

  .gav--filtro.on .gav__p{transform:none}
}

.fil{border-bottom:1px solid var(--hair)}

.fil__t{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;
  text-align:left;font-family:var(--titulo);font-weight:600;font-size:15px}

.fil__t b{margin-left:auto;margin-right:10px;font-size:11px;background:var(--ink);color:var(--paper);
  border-radius:8px;padding:1px 6px}

.fil.on .pm2::after{transform:scaleY(0)}

.fil__b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}

.fil.on .fil__b{grid-template-rows:1fr}

.fil__b>div{overflow:hidden}

.fil__v{display:flex;align-items:center;gap:10px;padding:8px 0 8px 2px;font-size:14.5px;cursor:pointer}

.fil__v em{margin-left:auto;font-style:normal;font-size:12px;opacity:.45}

.fil__v input{width:17px;height:17px;accent-color:var(--ink);flex:none}

.fil__v--off{opacity:.35;cursor:default}

.fil__preco{display:flex;gap:12px;padding:6px 0 14px}

.fil__preco label{flex:1;font-size:12.5px;opacity:.7}

.fil__preco input{width:100%;font:inherit;font-size:14px;padding:9px 11px;margin-top:5px;
  border:1px solid var(--line);background:var(--paper);color:inherit}

.gav__f--filtro{display:flex;align-items:center;gap:16px}

.gav__f--filtro .cta{margin:0;flex:1}

.gav__f--filtro .mini{margin:0;white-space:nowrap}

.dock__n{font-size:11px;background:var(--paper);color:var(--ink);border-radius:8px;padding:1px 6px;margin-left:6px}


/* ── contato ── */
.contato{display:grid;gap:clamp(24px,3vw,54px)}
@media(min-width:820px){
.contato{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
}

.contato h2{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.025em;margin-bottom:12px}

.contato .rt{opacity:.78;max-width:42ch;margin-bottom:18px}

.contato__f label{display:block;font-size:13px;margin:14px 0 5px;opacity:.7}

.contato__f input,.contato__f textarea{width:100%;font:inherit;padding:12px 14px;
  border:1px solid var(--line);background:var(--paper);color:inherit}

.contato__f .cta{max-width:240px}

.ok{font-size:14px;border:1px solid var(--line);padding:12px 14px;background:var(--paper)}


/* ── barra de avisos rotativa ── */
.aviso .wrap{position:relative;height:20px}

.aviso__m{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .5s var(--ease);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.aviso__m.on{opacity:1}


/* ── preço: cashback ── */
.pr__cb{font-size:12.5px;opacity:.65;margin-top:6px}

.ship__b{display:block;margin-top:4px;font-size:12.5px;text-decoration:underline;text-underline-offset:3px;opacity:.7}
@media(min-width:1000px){
.ship__b{margin-inline:auto}
}

.frete-t{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}

.frete-t th{font-family:var(--titulo);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  opacity:.55;text-align:left;padding:6px 0;border-bottom:1px solid currentColor}

.frete-t td{padding:9px 6px 9px 0;border-bottom:1px solid rgba(127,127,127,.25);vertical-align:top}

.frete-t td b{display:block;font-family:var(--titulo);font-weight:600}

.frete-t td span{font-size:12px;opacity:.65}

.frete-n{margin-top:12px;font-size:13px;opacity:.7}


/* ── colunas ampliadas ── */
.cols--4{}
@media(min-width:900px){

  .cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}

  .cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}

  .cols--5{grid-template-columns:repeat(5,minmax(0,1fr))}
}

@media(max-width:899px){

  .cols--rola{grid-auto-flow:column;grid-auto-columns:72%;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut)}

  .cols--rola::-webkit-scrollbar{display:none}

  .cols--rola>*{scroll-snap-align:start}
}

.cols__f{margin:0;background:var(--paper);overflow:hidden;position:relative}

.cols__f img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}

.cols__i:hover .cols__f img{transform:scale(1.03)}

.cols__n{display:block;font-family:var(--titulo);font-size:11.5px;font-weight:600;letter-spacing:.1em;opacity:.45;margin-top:14px}

.cols__n+h3{margin-top:4px}

.cols__cta{display:inline-block;margin-top:10px;font-family:var(--titulo);font-size:12.5px;font-weight:600;
  border-bottom:1px solid var(--line);padding-bottom:2px}


/* ── vantagens ── */
.vant{display:grid;gap:clamp(20px,2.6vw,34px);margin-top:clamp(22px,2.8vw,36px)}
@media(min-width:700px){
.vant{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(min-width:1100px){
.vant{grid-template-columns:repeat(5,minmax(0,1fr))}
}

.vant__i{border-top:1px solid var(--ink);padding-top:16px}

.vant__ic{display:block;width:26px;height:26px;margin-bottom:12px}

.vant__ic svg{width:26px;height:26px;stroke:var(--ink);stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round}

.vant h3{font-size:16px}

.vant p{margin-top:6px;font-size:14px;opacity:.72}


/* ── manifesto ── */
.manif{background:var(--paper)}

.manif__g{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media(min-width:900px){
.manif__g{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}

.manif h2{font-size:clamp(30px,4.4vw,58px);letter-spacing:-.035em;line-height:1.04}

.manif h2 em{font-style:normal;opacity:.4}

.manif__lead{margin-top:16px;font-size:clamp(16px,1.5vw,19px);max-width:44ch}

.manif .rt{margin-top:14px;opacity:.75;max-width:52ch}

.manif .cta--linha{margin-top:24px}

.manif__p{display:grid;gap:clamp(18px,2.4vw,30px)}

.manif__p div{border-top:1px solid var(--line);padding-top:14px}

.manif__p b{display:block;font-family:var(--titulo);font-size:clamp(34px,4vw,56px);letter-spacing:-.04em;line-height:.95}

.manif__p span{display:block;margin-top:6px;font-size:14px;opacity:.7}


/* ── cores ── */
.coresr{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px);margin-top:clamp(22px,2.8vw,36px)}

.coresr__i{display:grid;justify-items:center;gap:10px;font-size:13.5px;text-align:center}

.coresr__b{width:clamp(64px,9vw,104px);aspect-ratio:1;border-radius:50%;background:var(--c,#ccc);
  overflow:hidden;border:1px solid var(--line);transition:transform .3s var(--ease)}

.coresr__b img{width:100%;height:100%;object-fit:cover}

.coresr__i:hover .coresr__b{transform:scale(1.05)}


/* ── depoimentos e vip ── */
.rvh--home>b{font-size:26px}

.revs--home{margin-top:clamp(20px,2.6vw,32px)}

.rev__h--fim{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--hair)}

.vip{display:grid;gap:clamp(22px,3vw,54px);align-items:center;background:var(--paper);
  padding:clamp(24px,3.4vw,48px);border:1px solid var(--line)}
@media(min-width:900px){
.vip{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}

.vip h2{font-size:clamp(24px,3vw,40px);letter-spacing:-.03em}

.vip .lead{margin-top:12px}

.vip__l{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;font-size:14.5px}

.vip__l li{padding-left:16px;position:relative}

.vip__l li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--sage-ink)}

.news--vip{flex-direction:column;align-items:stretch}

.news--vip input,.news--vip button{height:48px}

.news__fine{width:100%;font-size:12px;opacity:.55;margin-top:2px}

.faq__h{max-width:820px}
@media(min-width:900px){
.faq__h{margin-inline:auto;text-align:center}
.faq__h .lead{margin-inline:auto}
}


/* ── carrinho ampliado ── */
.res__l--mini{padding:4px 0;font-size:13px;opacity:.7}

.carr__zap{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:13.5px;
  padding:10px;border:1px solid var(--line);border-radius:999px;transition:border-color .2s}

.carr__zap:hover{border-color:var(--ink)}

.carr__zap svg{width:16px;height:16px;fill:currentColor}

.pagtos,.selos{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:16px}

.pagtos img{height:24px;width:auto}

.selos img{height:34px;width:auto}

.carr__cupom{font-size:13px;opacity:.6;margin-top:14px}

.carr__prazos{margin-top:clamp(24px,3vw,40px);max-width:760px}

.carr__prazos summary{cursor:pointer;font-family:var(--titulo);font-weight:600;font-size:15px;padding:12px 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}

.carr__prazos .frete-t{margin-top:12px}


/* ── rodapé ampliado ── */

/* ── coleção enxuta ── */
.cab--col{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px}

.cab--col .chapeu{flex-basis:100%;margin-bottom:0}

.cab--col .botao-filtro{margin-left:auto}

.col-desc{max-width:74ch;margin:clamp(30px,4vw,56px) 0 clamp(30px,4vw,60px)}

.col-desc__c{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;opacity:.78}

.col-desc.aberta .col-desc__c{display:block;-webkit-line-clamp:unset}

.col-desc__b{margin-top:10px;font-family:var(--titulo);font-size:13px;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:2px}

.col-desc__b[hidden]{display:none}


/* ── filtro no padrão antigo, estética nova ── */
.gav--filtro .gav__p{width:min(520px,94vw)}

.filx{flex:1;min-height:0;overflow-y:auto}

.filx__form{padding:4px var(--gut) 24px}

/* ordenar: um dropdown quieto no topo */
.ordena{display:block;padding:16px 0 4px}

.ordena>span{display:block;font-size:12px;opacity:.55;margin-bottom:6px}

.ordena select{width:100%;font:inherit;font-family:var(--titulo);font-size:14.5px;font-weight:600;
  padding:12px 40px 12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);color:inherit;-webkit-appearance:none;appearance:none;cursor:pointer}

.ordena{position:relative}

.ordena::after{content:"";position:absolute;right:16px;bottom:22px;width:9px;height:9px;
  border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg);pointer-events:none}

/* cada grupo é um details: título com chevron, corpo com os chips */
.filg{border-bottom:1px solid var(--hair)}

.filg summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
  padding:17px 0;font-family:var(--titulo);font-weight:600;font-size:15px}

.filg summary::-webkit-details-marker{display:none}

.filg summary b{font-size:10px;background:var(--ink);color:var(--paper);border-radius:8px;padding:1px 6px}

.filg summary i{margin-left:auto;width:9px;height:9px;border-right:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform .22s var(--ease)}

.filg[open] summary i{transform:rotate(225deg)}

.filg>.filg__v,.filg>.faixa{padding-bottom:18px}

.filg__v{display:flex;flex-wrap:wrap;gap:9px}

.chipf{position:relative;cursor:pointer}

.chipf input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}

.chipf span{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;background:var(--paper);transition:.18s}

.chipf input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

.chipf input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}

.chipf--off{opacity:.32;cursor:not-allowed}

.chipf--off span{text-decoration:line-through;background:transparent}

.faixa{--a:0%;--b:100%}

.faixa__t{position:relative;height:32px;margin:4px 6px 10px}

.faixa__t::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:var(--hair)}

.faixa__t::after{content:"";position:absolute;left:var(--a);right:calc(100% - var(--b));top:15px;height:2px;background:var(--ink)}

.faixa__t input{position:absolute;inset:0;width:100%;margin:0;-webkit-appearance:none;appearance:none;background:none;pointer-events:none;height:32px}

.faixa__t input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);cursor:grab}

.faixa__t input::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);cursor:grab}

.faixa__n{display:flex;gap:10px}

.faixa__n label{flex:1;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:6px;font-size:12px;opacity:.85}

.faixa__n span{grid-column:1 / -1;opacity:.6;margin-bottom:3px}

.faixa__n i{font-style:normal;font-size:13px;opacity:.6}

.faixa__n input{width:100%;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);background:var(--paper);color:inherit}


/* ── sua caixa ── */
.li__v{display:block;font-size:13px;opacity:.6;margin-top:2px}

.carr__estoque{font-size:13px;opacity:.6;margin-top:14px}

.cep{margin-bottom:16px}

.cep__l>span:first-child{display:block;font-size:12.5px;opacity:.7;margin-bottom:6px}

.cep__f{display:flex;gap:8px}

.cep__f input{flex:1;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);background:var(--paper);color:inherit;border-radius:999px;min-width:0}

.cep__f button{font-family:var(--titulo);font-size:13px;font-weight:600;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--paper)}

.cep__r{margin-top:10px;font-size:13.5px;display:grid;gap:4px}

.cep__r[hidden]{display:none}

.cep__erro{color:#b23c2e}

.cep__taxa{border-top:1px solid var(--hair);padding-top:6px;margin-top:4px}

.cep .ship__b{margin:8px 0 0;text-align:left}

.seguro{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);display:grid;gap:10px}

.seguro__t{display:flex;align-items:center;gap:7px;font-family:var(--titulo);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.6}

.seguro__t svg{width:15px;height:15px;stroke:var(--ink);stroke-width:1.4;fill:none}

.seguro__g{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}

.seguro__g img{height:24px;width:auto;opacity:.85}

.seguro__s{font-size:12px;opacity:.55}

.compl{margin-top:clamp(40px,5vw,70px)}

.compl[hidden]{display:none}

.compl h2{font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em}

.compl .grade{margin-top:18px}


/* ── rodapé mínimo ── */
.ft--min{border-top:0;padding:clamp(24px,3vw,40px) 0 clamp(24px,3vw,40px)}

/* Rodapé: as redes ao lado do texto, como antes. No desktop o conjunto
   inteiro é centralizado, mas o texto continua alinhado à esquerda: só o
   bloco anda para o meio. */
.ft--min .ft__base{border-top:0;padding-top:0;margin-top:0;justify-content:flex-start;
  gap:14px 22px;align-items:center;width:fit-content;max-width:100%;margin-inline:auto}

.ft--min .ft__redes{order:0}

.ft--min .ft__redes a{width:40px;height:40px}

.ft--min .ft__redes svg{width:22px;height:22px}

.ft--min .ft__base p{order:1;flex:0 1 auto;font-size:12px;max-width:52ch}


/* ── stories das fotos de clientes ──────────────────────────────── */
.sty{position:fixed;inset:0;z-index:200;background:#000;opacity:0;
  transition:opacity .26s var(--ease);display:flex;align-items:center;justify-content:center}

.sty[hidden]{display:none}

.sty.on{opacity:1}

.sty__topo{position:absolute;top:0;left:0;right:0;z-index:3;padding:10px 12px calc(10px + env(safe-area-inset-top));
  background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent)}

.sty__barras{display:flex;gap:4px}

.sty__barras i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.32);overflow:hidden}

.sty__barras b{display:block;height:100%;width:0;background:#fff}

.sty__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}

.sty__quem{color:#fff;font-family:var(--titulo);font-size:13.5px;font-weight:600}

.sty__x{width:36px;height:36px;display:grid;place-items:center;flex:none}

.sty__x svg{width:19px;height:19px;stroke:#fff;stroke-width:1.7;fill:none;stroke-linecap:round}

.sty__palco{position:absolute;inset:0;display:grid;place-items:center;z-index:2;touch-action:pan-y}

.sty__palco img,.sty__palco video{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block}
@media(min-width:1000px){

  .sty__palco img,.sty__palco video{max-width:min(520px,92vw);max-height:92vh}
}

.sty--pausa .sty__topo{opacity:0;transition:opacity .2s}


/* ── caixa aberta ao lado do menu ───────────────────────────────── */
.cxa{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  transition:background .18s,opacity .22s var(--ease),transform .22s var(--ease)}

.cxa:hover{background:rgba(0,0,0,.05)}

.cxa svg{width:21px;height:21px;stroke:var(--ink);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

.cxa--off{display:none}

.dock .cxa{flex:none}

.dock .cxa svg{width:22px;height:22px}


/* ── avaliar o produto ──────────────────────────────────────────── */
.rvh__b{margin-left:auto;font-family:var(--titulo);font-size:13px;font-weight:600;
  padding:9px 16px;border:1px solid var(--ink);border-radius:999px;background:transparent;
  color:var(--ink);transition:background .18s,color .18s;display:inline-block}

.rvh__b:hover{background:var(--ink);color:var(--bg)}

.rvf{margin-top:20px;background:var(--paper);border:1px solid var(--line);
  padding:20px;display:grid;gap:16px;max-width:620px}

.rvf[hidden]{display:none}

.rvf__n{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.rvf__n>span,.rvf__t>span{font-family:var(--titulo);font-size:13px;font-weight:600}

.rvf__st{display:flex;gap:2px}

.rvf__st button{width:34px;height:34px;display:grid;place-items:center;background:transparent;border:0}

.rvf__st svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.6;
  stroke-linejoin:round;opacity:.35;transition:opacity .15s}

.rvf__st button.on svg{fill:var(--ink);stroke:none;opacity:1}

.rvf__t{display:grid;gap:7px}

.rvf__t textarea{width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--bg);
  font:inherit;font-size:15px;color:var(--ink);resize:vertical;border-radius:0}

.rvf__t textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

.rvf__f{display:flex;align-items:center;gap:16px}

.rvf__f .cta{width:auto;padding:0 26px;height:46px;margin:0}

.rvf__f .mini{margin:0}

.rvf__msg{font-size:14px;line-height:1.55}

.rvf__msg--erro{color:#a4443c}
@media(min-width:760px){
.rvf{padding:24px}
}


/* ── ver mais produtos ──────────────────────────────────────────── */
.colmais{text-align:center;margin:clamp(30px,4vw,52px) 0 8px}

.colmais__b{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:240px;height:48px;padding:0 30px;border-radius:999px;
  background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);
  font-family:var(--titulo);font-size:14px;font-weight:600;
  transition:background .2s var(--ease),color .2s var(--ease)}

.colmais__b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
@media(hover:hover){
.colmais__b:hover{background:var(--ink);color:var(--paper)}

  .colmais__b:hover svg{transform:translateY(2px)}
}

.colmais__b:active{transform:translateY(1px)}

.colmais__b--carrega{pointer-events:none;opacity:.65}

.colmais__b--carrega svg{animation:mais-gira .8s linear infinite}
to{transform:rotate(360deg)}

.colmais__c{font-size:13px;opacity:.6;margin-top:12px}

.colmais__c strong{font-family:var(--titulo);font-weight:700;opacity:1}
@media(max-width:600px){
.colmais__b{width:100%;max-width:340px;padding:0 24px}
}


/* ── avatar do depoimento: a foto do próprio cliente, sem abrir ──── */
.rev__q{display:flex;align-items:center;gap:10px;min-width:0}

.rev__av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--bg);display:grid;place-items:center;pointer-events:none;
  border:1px solid var(--hair)}

.rev__av img{width:100%;height:100%;object-fit:cover;display:block}

.rev__av--letra{font-family:var(--titulo);font-size:14px;font-weight:600;opacity:.55}

.rev__h--fim .rev__q b{font-size:14px}


/* ── carrinho: barra de baixo e acabamento ──────────────────────── */
.carrinho h1{margin-bottom:clamp(18px,2.4vw,30px)}

.carr__itens{min-width:0}

/* sem bandeirinhas de pagamento: fica a frase e os selos, centralizados */
.seguro{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair);text-align:center}

.seguro__t{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--titulo);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.7}

.seguro__t svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}

.seguro__g{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin-top:14px}

.seguro__g img{height:26px;width:auto;opacity:.75;transition:opacity .18s}

.seguro__g a:hover img{opacity:1}

.seguro__s{font-size:12px;opacity:.5;margin-top:14px}
@media(max-width:999px){
#irCheckout{display:none}
}


/* ── barra de baixo ─────────────────────────────────────────────────
   Duas composições e uma regra: o menu fica sempre encostado na direita,
   então cai no mesmo ponto da tela em qualquer página. Com botão, é
   botão e menu. Sem botão, são os quatro ícones espalhados na largura,
   sempre na mesma ordem: login, busca, caixa, menu.
   ───────────────────────────────────────────────────────────────── */
.dock__acao{display:contents}

.dock .ico,.dock .cxa{width:44px;height:44px}

.dock .ico svg,.dock .cxa svg{width:21px;height:21px}

.dock--acao [data-dock-login],.dock--acao [data-dock-busca],.dock--acao [data-caixa]{display:none}

/* sem botão a caixa fica sempre, cheia ou vazia */
.dock:not(.dock--acao) [data-caixa].cxa--off{display:grid}

/* Com o menu aberto a barra continua por cima do painel: o hambúrguer
   vira o X no lugar exato onde estava. O botão de ação sai de cena e os
   três ícones aparecem, então a barra fica igual em qualquer página. */
body.menuon .dock__acao{display:none}

body.menuon .dock [data-dock-login],body.menuon .dock [data-dock-busca],
body.menuon .dock [data-caixa]{display:grid}


/* ── busca dentro do painel ─────────────────────────────────────────
   Uma linha de digitação e nada mais. O campo é um fio embaixo do texto,
   sem caixa nem botão, e os resultados descem logo abaixo enquanto a
   pessoa escreve.
   ───────────────────────────────────────────────────────────────── */
.menu--busca .menu__body{display:none}

.menu__busca{flex:1;min-height:0;display:flex;flex-direction:column}

.menu__busca[hidden]{display:none}

.bsc{flex:none;padding:clamp(16px,2.4vw,26px) var(--gut) 0}

.bsc input[type="search"]{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:10px 0 14px;font-family:var(--titulo);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(22px,3.4vw,30px);color:var(--ink);border-radius:0;-webkit-appearance:none}

.bsc input[type="search"]::placeholder{color:var(--ink);opacity:.28}

.bsc input[type="search"]:focus{outline:none;border-bottom-color:var(--ink)}

.bsc input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}


.bsc__saida{flex:1;overflow-y:auto;padding:0 var(--gut) 28px;transition:opacity .18s}
@media(max-width:999px){
.bsc__saida{padding-bottom:96px}
}

.bsc__saida--carrega{opacity:.45}


.bsc__at{display:grid;gap:10px;padding-top:22px}

.bsc__at span{font-family:var(--titulo);font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;opacity:.45}

.bsc__at a{font-family:var(--titulo);font-size:17px;font-weight:600;letter-spacing:-.01em}


.bsc__l{list-style:none;margin:0;padding:8px 0 0}

.bsc__l li{border-bottom:1px solid var(--hair)}

.bsc__l a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;padding:12px 0}

.bsc__f{background:var(--paper);overflow:hidden;aspect-ratio:4/5;display:block}

.bsc__f img{width:100%;height:100%;object-fit:cover;display:block}

.bsc__c{display:grid;gap:3px;min-width:0}

.bsc__c strong{font-family:var(--titulo);font-size:14.5px;font-weight:600;line-height:1.3}

.bsc__p{display:grid;justify-items:start;gap:0;font-size:13.5px;line-height:1.25}

.bsc__p s{opacity:.42;font-size:12px}

.bsc__p b{font-weight:600}

.bsc__vazio,.bsc__conta{padding:24px 0;font-size:14.5px;opacity:.7}

.bsc__tudo{margin-top:18px;width:100%;height:46px;border:1px solid var(--line);border-radius:999px;
  font-family:var(--titulo);font-size:13.5px;font-weight:600;transition:.18s}

.bsc__tudo:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}


/* ── a caixa dentro do painel do menu ───────────────────────────────
   O painel é o mesmo do hambúrguer. Em modo caixa, as coleções somem e
   entra o carrinho: lista rolando e o pé parado embaixo, para o
   finalizar ficar à mão por mais móveis que entrem.
   ───────────────────────────────────────────────────────────────── */
.menu--caixa .menu__body{display:none}

.menu__caixa{flex:1;min-height:0;display:flex;flex-direction:column;transition:opacity .18s}

.menu__caixa[hidden]{display:none}

.menu__caixa--carrega{opacity:.5;pointer-events:none}

.cxd__corpo{display:flex;flex-direction:column;min-height:0;flex:1}

.cxd__itens{flex:1;overflow-y:auto;padding:4px var(--gut) 12px}

.cxd__vazio{flex:1;display:grid;place-content:center;gap:16px;text-align:center;padding:40px var(--gut)}

.cxd__erro{padding:30px var(--gut);font-size:14.5px}


.cxi{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;padding:18px 0;
  border-bottom:1px solid var(--hair)}

.cxi__f{background:var(--paper);overflow:hidden;aspect-ratio:4/5}

.cxi__f img{width:100%;height:100%;object-fit:cover;display:block}

.cxi__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}

.cxi__top strong{font-family:var(--titulo);font-size:14.5px;font-weight:600;line-height:1.3}

.cxi__p{font-family:var(--titulo);font-weight:600;font-size:14.5px;white-space:nowrap;flex:none}

.cxi__v{display:block;font-size:12.5px;opacity:.55;margin-top:4px}

.cxi__d{display:inline-block;font-size:12px;margin-top:6px;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--sage) 26%,var(--paper))}

.cxi__pe{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}

.cxi__q{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px}

.cxi__q button{width:32px;height:32px;display:grid;place-items:center;font-size:15px}

.cxi__q span{min-width:26px;text-align:center;font-size:14px}

.cxi__x{font-size:12.5px;opacity:.55;border-bottom:1px solid transparent;transition:.18s}

.cxi__x:hover{opacity:1;border-bottom-color:var(--line)}


.cxd__pe{flex:none;border-top:1px solid var(--line);
  padding:16px var(--gut) calc(18px + env(safe-area-inset-bottom));background:var(--bg)}
@media(max-width:999px){
.cxd__pe{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
}

.cxd__envio{font-size:12.5px;opacity:.6;margin-bottom:10px}

.cxd__l{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:14.5px}

.cxd__l--desc{color:var(--sage-ink);font-size:13.5px;margin-bottom:6px}

.cxd__l--total strong{font-family:var(--titulo);font-size:19px;font-weight:600}

.cxd__mini{font-size:12.5px;opacity:.6;margin-top:4px}

.cxd__pe .cta{margin-top:14px;width:100%;height:52px}

.add__erro{font-size:14.5px;line-height:1.5}


/* ── capítulos da PDP ───────────────────────────────────────────────
   Uma ideia por tela: imagem grande, título em duas linhas e um
   parágrafo curto e centralizado. O que faz esse formato funcionar é o
   vazio em volta, então o respiro entre capítulos é grande de
   propósito. Nada de caixa, selo ou lista dentro do capítulo.
   ───────────────────────────────────────────────────────────────── */
.cap{padding:clamp(56px,9vw,130px) 0;text-align:center}

.cap + .cap{padding-top:0}

.cap--escuro{background:var(--ink);color:var(--paper);margin-top:clamp(40px,6vw,90px);
  margin-bottom:clamp(40px,6vw,90px);padding:clamp(56px,9vw,120px) 0}

.cap--escuro + .cap{padding-top:clamp(56px,9vw,130px)}


.cap__f{margin:0 auto;max-width:900px;position:relative;background:var(--paper)}
/* a figura pinta um bloco sólido antes de a imagem lazy chegar; sem
   isso o espaço reservado ficava transparente durante o carregamento */
.cap--escuro .cap__f{background:rgba(255,255,255,.05)}

.cap--larga .cap__f{max-width:none;width:100vw;margin-left:50%;transform:translateX(-50%)}

.cap__f img{display:block;width:100%;height:auto}

.cap__f figcaption{margin-top:16px;display:grid;gap:2px}

.cap__f figcaption b{font-family:var(--titulo);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase}

.cap__f figcaption span{font-size:13.5px;opacity:.6}


.cap__t{max-width:640px;margin:clamp(26px,3.4vw,44px) auto 0}

.cap__t h3{font-family:var(--titulo);font-weight:600;letter-spacing:-.032em;line-height:1.08;
  font-size:clamp(28px,5.4vw,52px)}

.cap__t h3 em{display:block;font-style:normal;opacity:.42}

.cap__t p{margin-top:clamp(14px,1.8vw,22px);font-size:clamp(15px,1.7vw,18px);
  line-height:1.62;opacity:.78;max-width:52ch;margin-inline:auto}

.cap--escuro .cap__t p{opacity:.72}


/* o modelo em 3D abrindo a introdução */
.tresd{position:relative;margin-bottom:clamp(30px,4vw,60px)}

.tresd model-viewer,.tresd .shopify-model-viewer-ui{width:100%;height:clamp(340px,52vh,560px);
  background:var(--paper);display:block}

.tresd__d{display:block;text-align:center;margin-top:12px;font-size:12.5px;opacity:.5}


/* o que está no preço: lista seca, sem enfeite */
.inclui{max-width:720px;margin:clamp(40px,5vw,72px) auto 0;text-align:left}

.inclui h4{font-family:var(--titulo);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;opacity:.55;margin-bottom:6px}

.inclui__g{display:grid;border-top:1px solid var(--line)}

.inclui__g>div{display:grid;gap:4px 28px;padding:18px 0;border-bottom:1px solid var(--hair)}
@media(min-width:640px){
.inclui__g>div{grid-template-columns:180px minmax(0,1fr);align-items:baseline}
}

.inclui__g b{font-family:var(--titulo);font-size:14px;font-weight:600}

.inclui__g span{font-size:14.5px;line-height:1.6;opacity:.78}


/* o número, no fim e sem drama */
.pordia{max-width:720px;margin:clamp(34px,4vw,56px) auto 0;text-align:center}

.pordia b{display:block;font-family:var(--titulo);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(34px,6vw,58px);line-height:1}

.pordia span{display:block;margin-top:8px;font-size:14.5px;opacity:.6}


/* a conta completa continua aqui, recolhida */
.conta{max-width:720px;margin:clamp(34px,4vw,56px) auto 0;border-top:1px solid var(--line)}

.conta summary{cursor:pointer;list-style:none;padding:16px 0;display:flex;align-items:center;gap:9px;
  justify-content:center;font-family:var(--titulo);font-size:13.5px;font-weight:600}

.conta summary::-webkit-details-marker{display:none}

.conta summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);transform:rotate(45deg);margin-top:-4px;transition:transform .25s}

.conta[open] summary::after{transform:rotate(-135deg);margin-top:2px}

.conta__in{padding-bottom:8px}


/* ── a caixa dentro do painel do menu ───────────────────────────────
   O painel é o mesmo do hambúrguer. Em modo caixa, as coleções somem e
   entra o carrinho: lista rolando e o pé parado embaixo, para o
   finalizar ficar à mão por mais móveis que entrem.
   ───────────────────────────────────────────────────────────────── */
.menu--caixa .menu__body{display:none}

.menu__caixa{flex:1;min-height:0;display:flex;flex-direction:column;transition:opacity .18s}

.menu__caixa[hidden]{display:none}

.menu__caixa--carrega{opacity:.5;pointer-events:none}

.cxd__corpo{display:flex;flex-direction:column;min-height:0;flex:1}

.cxd__itens{flex:1;overflow-y:auto;padding:4px var(--gut) 12px}

.cxd__vazio{flex:1;display:grid;place-content:center;gap:16px;text-align:center;padding:40px var(--gut)}

.cxd__erro{padding:30px var(--gut);font-size:14.5px}


.cxi{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;padding:18px 0;
  border-bottom:1px solid var(--hair)}

.cxi__f{background:var(--paper);overflow:hidden;aspect-ratio:4/5}

.cxi__f img{width:100%;height:100%;object-fit:cover;display:block}

.cxi__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}

.cxi__top strong{font-family:var(--titulo);font-size:14.5px;font-weight:600;line-height:1.3}

.cxi__p{font-family:var(--titulo);font-weight:600;font-size:14.5px;white-space:nowrap;flex:none}

.cxi__v{display:block;font-size:12.5px;opacity:.55;margin-top:4px}

.cxi__d{display:inline-block;font-size:12px;margin-top:6px;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--sage) 26%,var(--paper))}

.cxi__pe{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}

.cxi__q{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px}

.cxi__q button{width:32px;height:32px;display:grid;place-items:center;font-size:15px}

.cxi__q span{min-width:26px;text-align:center;font-size:14px}

.cxi__x{font-size:12.5px;opacity:.55;border-bottom:1px solid transparent;transition:.18s}

.cxi__x:hover{opacity:1;border-bottom-color:var(--line)}


.cxd__pe{flex:none;border-top:1px solid var(--line);
  padding:16px var(--gut) calc(18px + env(safe-area-inset-bottom));background:var(--bg)}
@media(max-width:999px){
.cxd__pe{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
}

.cxd__envio{font-size:12.5px;opacity:.6;margin-bottom:10px}

.cxd__l{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:14.5px}

.cxd__l--desc{color:var(--sage-ink);font-size:13.5px;margin-bottom:6px}

.cxd__l--total strong{font-family:var(--titulo);font-size:19px;font-weight:600}

.cxd__mini{font-size:12.5px;opacity:.6;margin-top:4px}

.cxd__pe .cta{margin-top:14px;width:100%;height:52px}

.add__erro{font-size:14.5px;line-height:1.5}


/* ── introdução e valor: leitura em duas velocidades ────────────────
   Quem escaneia pega a headline, as etapas e os quatro rótulos. Quem lê
   encontra a narrativa inteira. Muito respiro, pouca caixa, nada de selo.
   ───────────────────────────────────────────────────────────────── */
.etapas{list-style:none;margin:clamp(22px,3vw,34px) 0 0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:10px 0;counter-reset:et}

.etapas li{position:relative;display:flex;align-items:center;gap:10px;padding-right:14px;
  font-family:var(--titulo);font-size:13px;font-weight:600;letter-spacing:.01em}

.etapas li::before{counter-increment:et;content:counter(et);width:24px;height:24px;flex:none;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  font-size:11px;font-weight:600;opacity:.55}

.etapas li:not(:last-child)::after{content:"";width:16px;height:1px;background:var(--line);margin-left:4px}
@media(max-width:600px){
.etapas li{padding-right:10px;font-size:12.5px}

  .etapas li:not(:last-child)::after{width:9px}
}


.provas{display:grid;gap:clamp(20px,2.6vw,34px);margin-top:clamp(28px,3.6vw,46px);
  grid-template-columns:1fr}
@media(min-width:760px){
.provas{grid-template-columns:repeat(3,1fr)}
}

.prova{border-top:1px solid var(--line);padding-top:14px}

.prova b{display:block;font-family:var(--titulo);font-size:15px;font-weight:600;margin-bottom:7px}

.prova p{font-size:14.5px;line-height:1.62;opacity:.78;max-width:38ch}


.fecha{margin-top:clamp(30px,4vw,52px);font-family:var(--titulo);font-weight:600;
  font-size:clamp(17px,2vw,21px);line-height:1.42;letter-spacing:-.01em;max-width:34ch}


.valor{max-width:760px}

.valor__h{font-size:clamp(21px,2.6vw,30px);letter-spacing:-.02em;line-height:1.2}

.valor__c{margin-top:12px;font-size:15.5px;line-height:1.66;opacity:.82;max-width:56ch}

.valor__g{display:grid;gap:0;margin-top:clamp(26px,3.2vw,40px);border-top:1px solid var(--line)}

.valor__i{display:grid;gap:4px 24px;padding:16px 0;border-bottom:1px solid var(--hair)}
@media(min-width:640px){
.valor__i{grid-template-columns:170px minmax(0,1fr);align-items:baseline}
}

.valor__i b{font-family:var(--titulo);font-size:14px;font-weight:600}

.valor__i span{font-size:14.5px;line-height:1.6;opacity:.78}

.valor__t{margin-top:clamp(22px,2.6vw,32px);padding:16px 18px;
  background:color-mix(in srgb,var(--sage) 14%,var(--paper))}

.valor__t p{font-family:var(--titulo);font-size:15px;font-weight:600}

.valor__f{margin-top:clamp(24px,3vw,38px);font-family:var(--titulo);font-weight:600;
  font-size:clamp(16px,1.9vw,20px);line-height:1.44;max-width:36ch}


/* a conta completa continua aqui, recolhida: quem quiser confere */
.conta{margin-top:clamp(26px,3.2vw,40px);border-top:1px solid var(--line)}

.conta summary{cursor:pointer;list-style:none;padding:16px 0;display:flex;align-items:center;gap:9px;
  font-family:var(--titulo);font-size:13.5px;font-weight:600}

.conta summary::-webkit-details-marker{display:none}

.conta summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);transform:rotate(45deg);margin-top:-4px;transition:transform .25s}

.conta[open] summary::after{transform:rotate(-135deg);margin-top:2px}

.conta__in{padding-bottom:8px}


/* ── cotação de frete no pé da caixa ────────────────────────────── */
.cepd{border-top:1px solid var(--hair);margin-bottom:14px}

.cepd summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:13px 0;font-size:13.5px;opacity:.75}

.cepd summary::-webkit-details-marker{display:none}

.cepd summary::after{content:"";width:7px;height:7px;border-right:1.4px solid var(--ink);
  border-bottom:1.4px solid var(--ink);transform:rotate(45deg);margin-top:-3px;transition:transform .25s;opacity:.6}

.cepd[open] summary::after{transform:rotate(-135deg);margin-top:2px}

.cepd .cep{padding-bottom:14px}

.cepd .cep__f{display:flex;gap:8px}

.cepd .cep__f input{flex:1;min-width:0;height:44px;padding:0 14px;border:1px solid var(--line);
  background:var(--bg);border-radius:999px;font:inherit;font-size:14.5px;color:var(--ink)}

.cepd .cep__f input:focus-visible{outline:none;border-color:var(--ink)}

.cepd .cep__f button{flex:none;height:44px;padding:0 20px;border-radius:999px;background:var(--ink);
  color:var(--bg);font-family:var(--titulo);font-size:13.5px;font-weight:600}

.cepd .cep__r{margin-top:10px;font-size:13.5px;line-height:1.55;opacity:.8}

.cepd .cep__r[hidden]{display:none}


/* ── preço completo da PDP: Pix em cima, preço cheio e parcelas embaixo, discretos ── */
.pr__pix{font-style:normal;font-size:12.5px;opacity:.6;margin-left:-3px}

.pr .pr__l2{flex-basis:100%;font-size:12.5px;opacity:.55;margin-top:1px}


/* ── linha de links do rodapé: inline, miúda, sem coluna ── */
.ft__links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;margin-bottom:18px}

.ft__links a{opacity:.6;text-decoration:none;transition:opacity .2s}

.ft__links a:hover{opacity:1}


/* ── resumo da nota nas avaliações, agrupado para poder nascer escondido ── */
.rvh__n{display:contents}

/* ══ CAPA DE TELA CHEIA ════════════════════════════════════════════
   Vale para a capa da home e para a primeira foto do produto no
   celular. No CELULAR a barra do topo flutua sobre a foto e vai
   embora com a rolagem, como qualquer conteúdo: nada de barra fixa
   perseguindo a pessoa. No DESKTOP ela continua fixa, transparente
   sobre a capa e sólida depois dela. A posição inicial vem de :has(),
   então já nasce certa na primeira pintura; o resto é o onm.js. */
.hero-h--tela{min-height:100vh;min-height:100svh}

@media(max-width:999px){
  /* HOME: a barra flutua sobre a capa e vai embora com a rolagem, como
     qualquer conteúdo (nada de barra fixa perseguindo a pessoa). */
  body:has(.hero-h--tela) .topo{position:absolute;top:0;left:0;right:0;z-index:60}
  /* PDP: a barra fica parada junto com a foto e só some quando a folha
     cobre tudo. Fixamos a .top e não o grupo, para o menu manter a
     própria camada. */
  body:has(.gal--tela) .top{position:fixed;top:0;left:0;right:0;z-index:60;
    transition:opacity .3s}
  html.onmCapaFim body:has(.gal--tela) .top{opacity:0}
  /* nas duas: transparente sobre a foto, e só a marca e o menu pegam
     toque (a barra vazia engolia o toque dos botões da capa) */
  body:has(.hero-h--tela) .top,
  body:has(.gal--tela) .top{background:transparent;box-shadow:none;
    backdrop-filter:none;color:#fff;pointer-events:none}
  body:has(.hero-h--tela) .top .lg,
  body:has(.gal--tela) .top .lg,
  body:has(.hero-h--tela) .top .burg,
  body:has(.gal--tela) .top .burg{pointer-events:auto}
  html.onmCapaPreto body:has(.hero-h--tela) .top,
  html.onmCapaPreto body:has(.gal--tela) .top{color:var(--ink)}
  body:has(.hero-h--tela) .top .lg,
  body:has(.gal--tela) .top .lg{color:inherit;--h:28px}
  body:has(.hero-h--tela) .top .burg i::before,
  body:has(.hero-h--tela) .top .burg i::after,
  body:has(.gal--tela) .top .burg i::before,
  body:has(.gal--tela) .top .burg i::after{background:currentColor}
}

@media(min-width:1000px){
  html.onmCapa .top{position:fixed;top:0;left:0;right:0;z-index:60;
    background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);
    box-shadow:0 1px 0 var(--line);transition:background .28s,box-shadow .28s,color .28s}
  html.onmCapa.onmCapaTopo .top{background:transparent;backdrop-filter:none;box-shadow:none;color:#fff}
  html.onmCapa.onmCapaTopo.onmCapaPreto .top{color:var(--ink)}
  html.onmCapa.onmCapaTopo .top .lg{color:inherit;--h:28px}
  html.onmCapa.onmCapaTopo .top .burg i::before,
  html.onmCapa.onmCapaTopo .top .burg i::after{background:currentColor}
}

/* barra de baixo, só no celular: transparente enquanto a capa está sob
   ela; o botão de compra vira uma pastilha clara para sobrar destaque
   à foto. Com o menu aberto, tudo volta ao sólido na hora. */
html.onmCapa .dock{transition:background .28s,color .28s,border-color .28s}
html.onmCapa.onmCapaDock .dock{background:transparent;border-top-color:transparent;
  backdrop-filter:none;color:#fff}
html.onmCapa.onmCapaDock.onmCapaPreto .dock{color:var(--ink)}
html.onmCapa.onmCapaDock .dock .burg i::before,
html.onmCapa.onmCapaDock .dock .burg i::after{background:currentColor}
html.onmCapa.onmCapaDock .dock .cxa svg{stroke:currentColor}
html.onmCapa.onmCapaDock .dock .cta{background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(10px);box-shadow:none}
html.onmCapa.onmCapaDock.onmCapaPreto .dock .cta{background:rgba(255,255,255,.7);
  color:var(--ink);border-color:rgba(0,0,0,.14)}
html.onmCapa:has(#onmMenu.on) .dock{background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);color:var(--ink)}
html.onmCapa:has(#onmMenu.on) .dock .burg i::before,
html.onmCapa:has(#onmMenu.on) .dock .burg i::after{background:var(--ink)}
html.onmCapa:has(#onmMenu.on) .dock .cxa svg{stroke:var(--ink)}

/* o texto da capa da home nunca fica embaixo das barras */
@media(max-width:999px){
  .hero-h--tela .hero-h__t{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
/* entrada e movimento das fontes da capa da home */
.hero-h--tela .hero-h__t{transform:translateY(calc(var(--heroIda,0)*44px));
  opacity:calc(1 - var(--heroIda,0)*0.92)}
.hero-h--tela .hero-h__t>*{animation:onmSobe .7s cubic-bezier(.22,.61,.36,1) both}
.hero-h--tela .hero-h__t>*:nth-child(2){animation-delay:.09s}
.hero-h--tela .hero-h__t>*:nth-child(3){animation-delay:.18s}
.hero-h--tela .hero-h__t>*:nth-child(4){animation-delay:.27s}
@keyframes onmSobe{from{opacity:0;transform:translateY(16px)}}
@media(prefers-reduced-motion:reduce){
  .hero-h--tela .hero-h__t{transform:none;opacity:1}
  .hero-h--tela .hero-h__t>*{animation:none}
}

/* ══ PDP IMERSIVA NO CELULAR ═══════════════════════════════════════
   A primeira tela inteira (foto + nome + selos + opções) FICA PARADA e
   o conteúdo sobe por cima, como uma folha. São dois blocos grudados
   (position:sticky): a foto e a frente. Sem JavaScript de rolagem.

   Empilhamento: a seção isola o contexto, a foto fica em -2, a frente
   em -1 e a folha logo acima dela; tudo o que vem depois é conteúdo
   normal e passa por cima naturalmente, sem precisar de z-index. */
.capafrente{display:contents}
/* a lupa entra aqui junto: sem ela nesta linha, o botão ficava sem regra
   nenhuma no desktop e o SVG esticava na largura da coluna de compra */
.capaespaco,.capanav,.capalupa{display:none}

@media(max-width:999px){
  .hero--capa{display:grid;grid-template-columns:100%;padding-top:0;
    position:relative;isolation:isolate}
  .hero--capa .gal--tela{grid-area:1 / 1 / -1 / -1;position:sticky;top:0;
    height:100svh;align-self:start;margin:0 calc(var(--gut)*-1);
    overflow:hidden;z-index:-2}
  /* com o onm.js no ar, a foto e a frente ficam PRESAS na tela: não
     rolam nem no fim da seção. Quando a folha cobre tudo, somem. O
     sticky acima continua sendo a rede de segurança sem JavaScript. */
  html.onmCapa .hero--capa .gal--tela,
  html.onmCapa .hero--capa .capafrente{position:fixed;top:0;left:0;width:100%;margin:0}
  /* a foto usa a tela grande: quando a barra do navegador recolhe, o
     svh encolhe e aparecia uma fresta embaixo da foto */
  html.onmCapa .hero--capa .gal--tela{height:100vh}
  /* a frente usa a tela pequena: assim as opções nunca ficam escondidas
     atrás da barra do navegador */
  html.onmCapa .hero--capa .capafrente{height:100svh}
  html.onmCapaFim .hero--capa .gal--tela,
  html.onmCapaFim .hero--capa .capafrente{visibility:hidden}
  .hero--capa .capaespaco{display:block;grid-area:1 / 1 / 2 / 2;height:100svh;
    pointer-events:none}
  .gal--tela .gal__track{height:100%;margin-inline:0;gap:0;touch-action:pan-x pan-y}
  .gal--tela .gal__track::after{display:none}
  .gal--tela .gal__s{flex:0 0 100%;height:100%;aspect-ratio:auto;background:none}
  .gal--tela .gal__s img{height:100%;object-fit:cover}
  .gal--tela::before,.gal--tela::after{content:"";position:absolute;left:0;right:0;
    z-index:2;pointer-events:none}
  .gal--tela::before{top:0;height:30%;
    background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.2) 55%,transparent)}
  .gal--tela::after{bottom:0;height:34%;
    background:linear-gradient(transparent,rgba(0,0,0,.22) 45%,rgba(0,0,0,.5))}

  /* a folha que sobe e cobre a capa */
  .hero--capa::after{content:"";position:absolute;z-index:-1;
    left:calc(var(--gut)*-1);right:calc(var(--gut)*-1);top:100svh;bottom:0;
    background:var(--bg);border-radius:18px 18px 0 0;
    box-shadow:0 -16px 40px rgba(0,0,0,.22)}

  /* a frente da capa: gruda junto com a foto, nas mesmas faixas de
     antes, e some por baixo da folha. Nada aqui rouba o gesto de
     deslizar: só os elementos que se tocam recebem o toque. */
  .hero--capa .capafrente{display:grid;grid-area:1 / 1 / -1 / -1;position:sticky;top:0;
    height:100svh;align-self:start;z-index:-1;pointer-events:none;
    grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr auto auto}
  .hero--capa .capafrente>*{grid-column:1 / 3}
  .capalupa{display:none}

  .hero--capa .nomew--capa{grid-row:1;color:#fff;
    padding:15px var(--gut) 0 calc(var(--gut) + 42px)}
  .nomew--capa .buy__ln{margin:0 0 1px;font-size:10px;opacity:.8}
  .nomew--capa h1{margin:0;font-size:15.5px;line-height:1.15;letter-spacing:-.01em}
  .nomew--capa .stars{margin-top:4px;font-size:11.5px;opacity:.9;pointer-events:auto}
  .nomew--capa .st svg{width:10px;height:10px;fill:#fff}
  .nomew--capa .stars b{font-size:11.5px}
  .nomew--capa .stars u{text-decoration-color:rgba(255,255,255,.4)}

  .hero--capa .tagsw--capa{grid-row:2;grid-column:1 / 3;margin:0;padding:12px var(--gut) 0}
  /* o botão de tela cheia mora na faixa do nome, na coluna da direita:
     área livre em qualquer tela, longe dos selos e das cores */
  .hero--capa .nomew--capa{grid-column:1}
  .hero--capa .capalupa{display:grid;grid-row:1;grid-column:2;place-items:center;
    align-self:center;margin:15px var(--gut) 0 10px;width:38px;height:38px;
    border:1px solid rgba(255,255,255,.32);border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.14);backdrop-filter:blur(10px);pointer-events:auto}
  .capalupa svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}
  html.onmCapaPreto .capalupa{background:rgba(255,255,255,.7);border-color:rgba(0,0,0,.14)}
  html.onmCapaPreto .capalupa svg{stroke:var(--ink)}
  .tagsw--capa .tags{flex-wrap:nowrap;gap:7px}
  .tagsw--capa .tag{min-width:0;background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.32);color:#fff;backdrop-filter:blur(10px);
    border-radius:999px;padding:6px 11px;font-size:clamp(9.5px,2.7vw,12px);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto}
  .tagsw--capa .tag svg{stroke:#fff;flex:none}

  .hero--capa .capanav{display:flex;grid-row:3;align-items:center;
    justify-content:space-between;padding:0 8px}
  .capanav svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.4;
    stroke-linecap:round;stroke-linejoin:round;opacity:.62;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}

  .hero--capa .opc--capa{grid-row:4 / 6;margin:0;display:grid;grid-template-rows:auto auto;
    padding:0 var(--gut) calc(84px + env(safe-area-inset-bottom))}
  .opc--capa .pick{margin:0;pointer-events:auto}
  .opc--capa .pick__h{display:none}
  .opc--capa .pick--cor{justify-self:end}
  .opc--capa .pick--cor .pick__r{flex-direction:column;gap:9px}
  .opc--capa .pick--med{justify-self:start;margin-top:16px}
  .opc--capa .pick--med .pick__r{gap:7px}
  .opc--capa .sw{width:30px;height:30px;border-color:rgba(255,255,255,.55);
    box-shadow:0 2px 8px rgba(0,0,0,.3)}
  .opc--capa .sw.on{box-shadow:0 0 0 1.5px #fff,inset 0 0 0 2px rgba(0,0,0,.3)}
  .opc--capa .size{min-width:0;height:34px;padding:0 16px;font-size:13px;
    background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);
    color:#fff;backdrop-filter:blur(10px);border-radius:999px}
  .opc--capa .size.on{background:#fff;color:var(--ink);border-color:#fff;box-shadow:none}

  /* o que sobe na folha */
  .hero--capa .desc{order:6;padding:34px 0 4px;font-size:16.5px;line-height:1.6;max-width:none}
  .hero--capa .tec{order:7;margin-top:24px}
  .hero--capa .prw{order:8;margin-top:24px}

  /* variante de foto clara */
  html.onmCapaPreto .gal--tela::before{background:linear-gradient(rgba(255,255,255,.6),transparent)}
  html.onmCapaPreto .gal--tela::after{background:linear-gradient(transparent,rgba(255,255,255,.55))}
  html.onmCapaPreto .nomew--capa{color:var(--ink)}
  html.onmCapaPreto .nomew--capa .st svg{fill:var(--ink)}
  html.onmCapaPreto .capanav svg{stroke:var(--ink);filter:none}
  html.onmCapaPreto .tagsw--capa .tag{background:rgba(255,255,255,.7);
    border-color:rgba(0,0,0,.14);color:var(--ink)}
  html.onmCapaPreto .opc--capa .sw{border-color:rgba(0,0,0,.25)}
  html.onmCapaPreto .opc--capa .sw.on{box-shadow:0 0 0 1.5px var(--ink),inset 0 0 0 2px #fff}
  html.onmCapaPreto .opc--capa .size{background:rgba(255,255,255,.72);
    border-color:rgba(0,0,0,.14);color:var(--ink)}
  html.onmCapaPreto .opc--capa .size.on{background:var(--ink);color:#fff;border-color:var(--ink)}
}

/* ══ FOTOS EM TELA CHEIA ═══════════════════════════════════════════
   Só as imagens e o X. Aqui a pinça é livre (touch-action:auto), ao
   contrário da galeria na página, onde ela atrapalhava a rolagem. */
.zoom{position:fixed;inset:0;z-index:200;background:#0b0b0b;opacity:0;
  transition:opacity .22s var(--ease);touch-action:auto}
.zoom.on{opacity:1}
.zoom__t{position:absolute;inset:0;display:flex;overflow-x:auto;overscroll-behavior:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.zoom__t::-webkit-scrollbar{display:none}
.zoom__s{flex:0 0 100%;height:100%;margin:0;scroll-snap-align:center;
  display:grid;place-items:center}
.zoom__s img{width:100%;height:100%;object-fit:contain}
.zoom__n{position:absolute;z-index:2;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.1);backdrop-filter:blur(8px);cursor:pointer}
.zoom__n--e{left:10px}
.zoom__n--d{right:10px}
.zoom__n svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.zoom__x{position:absolute;z-index:2;top:calc(14px + env(safe-area-inset-top));right:14px;
  width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px);cursor:pointer}
.zoom__x svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round}



/* preço da gaveta empilhado: riscado, Pix e cartão, um em cada linha
   (esta regra tinha se perdido numa reescrita e o preço voltou a ficar
   numa linha só, empurrando o nome do item) */
.cxi__p{display:grid;justify-items:end;gap:1px;text-align:right;white-space:normal;
  max-width:46%;flex:none}
.cxi__p s{font-size:12px;opacity:.45}
.cxi__p b{white-space:nowrap}
.cxi__p b i{font-style:normal;font-size:11px;opacity:.6;font-weight:400}
.cxi__p em{font-style:normal;font-size:11.5px;opacity:.55;white-space:nowrap}

/* título sutil da descrição da coleção */
.col-desc__t{font-family:var(--titulo);font-size:15px;font-weight:600;margin:0 0 10px}