/* Loja 3D dois G — mesmos tokens do site */
:root{
  --tinta:#17150F; --carvao:#211E17; --mostarda:#E2A72E; --mostarda-esc:#B9851A; --creme:#F5EFE1; --palha:#EDE5D2; --taupe:#7D7563;
  --linha:rgba(245,239,225,.1); --linha-e:rgba(23,21,15,.12); --mudo:rgba(245,239,225,.64); --mudo-e:rgba(23,21,15,.62);
  --ok:#2F7D4F; --erro:#A3301F;
  --display:'Unbounded','Arial Black',sans-serif; --corpo:'Manrope',system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.32,.72,0,1); --mola:cubic-bezier(.34,1.56,.64,1);
  --larg:1280px; --gut:max(18px,env(safe-area-inset-left,0px));
}
@media(min-width:768px){:root{--gut:max(40px,env(safe-area-inset-left,0px))}}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{background:var(--creme);color:var(--tinta);font-family:var(--corpo);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--mostarda);color:var(--tinta)}
.box{max-width:var(--larg);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.mono{font-family:var(--mono)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.04em;text-wrap:balance}
h1{font-size:clamp(38px,6vw,84px);line-height:.94;font-weight:800}
h2{font-size:clamp(26px,3.2vw,40px);line-height:1;font-weight:700}
h3{font-size:18px;font-weight:700;letter-spacing:-.03em;line-height:1.2}
p{line-height:1.6}
.selo{display:inline-flex;align-items:center;gap:9px;border-radius:99px;padding:7px 13px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;background:rgba(23,21,15,.06);box-shadow:inset 0 0 0 1px rgba(23,21,15,.1)}
.escuro .selo{background:rgba(245,239,225,.06);box-shadow:inset 0 0 0 1px rgba(245,239,225,.1)}
.selo i{width:7px;height:7px;background:var(--mostarda);clip-path:polygon(50% 0,100% 30%,50% 60%,0 30%);transform:scale(1.5)}
:focus-visible{outline:2px solid var(--mostarda);outline-offset:3px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:99px;padding:8px 8px 8px 22px;font-weight:700;font-size:15px;background:var(--mostarda);color:var(--tinta);transition:transform .4s var(--ease),opacity .3s}
.btn .ic{width:36px;height:36px;border-radius:50%;background:var(--tinta);color:var(--mostarda);display:grid;place-items:center;transition:transform .6s var(--mola)}
.btn .ic svg{width:16px;height:16px}
.btn:hover .ic{transform:translate(3px,-2px) scale(1.06)}
.btn:active{transform:scale(.97)}
.btn.tinta{background:var(--tinta);color:var(--creme)}.btn.tinta .ic{background:var(--mostarda);color:var(--tinta)}
.btn.cheio{width:100%;justify-content:space-between}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.so-texto{padding:12px 22px}

/* topo */
.topo{background:var(--tinta);color:var(--creme);position:relative;overflow:hidden}
.topo::before{content:"";position:absolute;inset:0;background:url(../grafismos/blocos-escuro.svg) center/320px;opacity:.8;-webkit-mask-image:linear-gradient(90deg,transparent 20%,#000);mask-image:linear-gradient(90deg,transparent 20%,#000)}
.barra-nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:-.02em;white-space:nowrap}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links a{font-size:14px;font-weight:600;padding:9px 14px;border-radius:99px;opacity:.75;transition:opacity .3s,background .3s}
.nav-links a:hover,.nav-links a[aria-current]{opacity:1;background:rgba(245,239,225,.08)}
@media(max-width:700px){.nav-links a.esconde{display:none}}
.btn-sacola{position:relative;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:99px;background:rgba(245,239,225,.08);box-shadow:inset 0 0 0 1px rgba(245,239,225,.12);font-weight:700;font-size:14px}
.btn-sacola svg{width:20px;height:20px}
.btn-sacola b{min-width:22px;height:22px;border-radius:99px;background:var(--mostarda);color:var(--tinta);display:grid;place-items:center;font-size:12px;padding:0 6px}

/* rodapé */
.rodape{background:var(--tinta);color:var(--mudo);font-size:13px;padding-block:30px calc(30px + env(safe-area-inset-bottom,0px))}
.rodape .box{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.rodape img{height:36px;width:auto}

/* gaveta do carrinho */
.veu{position:fixed;inset:0;z-index:40;background:rgba(23,21,15,.5);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.gaveta{position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(440px,100%);background:var(--creme);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .7s var(--ease);box-shadow:-30px 0 60px -30px rgba(0,0,0,.5);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.sacola-aberta .veu{opacity:1;pointer-events:auto}
.sacola-aberta .gaveta{transform:none}
.gaveta header{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--linha-e)}
.fechar{width:40px;height:40px;border-radius:50%;background:rgba(23,21,15,.06);display:grid;place-items:center}
.fechar svg{width:16px;height:16px}
.gaveta .lista{flex:1;overflow:auto;padding:8px 24px}
.gaveta footer{padding:20px 24px 24px;border-top:1px solid var(--linha-e);display:grid;gap:14px}
.linha-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--linha-e);align-items:start}
.linha-item .mini{width:64px;height:64px;border-radius:14px;background:var(--palha);display:grid;place-items:center}
.linha-item .mini svg{width:34px;height:34px}
.linha-item h3{font-size:14px}
.linha-item small{display:block;font-size:12.5px;color:var(--mudo-e);margin-top:4px;line-height:1.45}
.linha-item .preco{font-weight:700;font-size:14px;white-space:nowrap}
.qtd{display:inline-flex;align-items:center;gap:2px;margin-top:10px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--linha-e);padding:3px}
.qtd button{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700}
.qtd button:hover{background:rgba(23,21,15,.06)}
.qtd span{min-width:24px;text-align:center;font-weight:700;font-size:14px}
.remover{font-size:12px;color:var(--mudo-e);text-decoration:underline;margin-left:10px}
.vazio{padding:40px 0;text-align:center;color:var(--mudo-e)}
.soma{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
.soma b{font-family:var(--display);font-size:22px;letter-spacing:-.03em}
.aviso-frete{font-size:12.5px;color:var(--mudo-e)}

/* toast */
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom,0px));z-index:50;transform:translate(-50%,140%);background:var(--tinta);color:var(--creme);padding:12px 18px;border-radius:99px;font-weight:600;font-size:14px;display:flex;align-items:center;gap:10px;transition:transform .6s var(--ease);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.toast.on{transform:translate(-50%,0)}
.toast i{width:8px;height:8px;background:var(--mostarda);clip-path:polygon(50% 0,100% 30%,50% 60%,0 30%);transform:scale(1.6)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}