/* ===========================================================================
   NEXUS IMPORTS
   Ideia unica da pagina: o numero em real e a maior coisa do cartao.
   Quem chega aqui nao veio ver a foto, veio saber quanto da.
   Por isso o preco e o maior tipo do cartao e a unica coisa colorida.
   =========================================================================== */

:root{
  --papel:#f4f2ed;
  --carta:#ffffff;
  --tinta:#14161a;
  --tinta2:#6b6f76;
  --tinta3:#9a9ea5;
  --linha:#e4e0d6;
  --real:#0f6b3f;          /* unico destaque: o preco em real */
  --marca:#005078;         /* azul escuro da logo */
  --marca2:#40b8d8;        /* azul claro da logo */
  --alerta:#8a3324;

  --r-p:4px;               /* dois raios, so */
  --r-g:12px;

  /* escala nao-linear */
  --e1:4px; --e2:8px; --e3:16px; --e4:32px; --e5:64px;

  /* 52 / 12 = 4,3:1 */
  --t-hero:52px; --t-g:28px; --t-m:18px; --t-p:14px; --t-mini:12px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:Archivo,system-ui,-apple-system,sans-serif;
  font-weight:400;
  background:var(--papel);
  color:var(--tinta);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

.pular{position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;padding:var(--e2) var(--e3);z-index:99}
.pular:focus{left:var(--e2);top:var(--e2)}

:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}

/* sem isto o display:flex da gaveta/ficha vence o hidden e elas nascem abertas */
[hidden]{display:none!important}

/* ---------- faixa de cambio ------------------------------------------- */
.cambio{background:var(--tinta);color:#fff;font-size:var(--t-mini)}
.cambio-in{
  max-width:1180px;margin:0 auto;padding:0 var(--e3);
  height:38px;display:flex;align-items:center;gap:var(--e3);
}
.cambio-txt{letter-spacing:.02em}
.cambio-txt strong{font-weight:800}
.cambio-data{color:#8b9097;margin-left:var(--e2)}
.cambio-btn{
  margin-left:auto;font-size:var(--t-mini);color:#c9cdd3;
  border-bottom:1px solid #4a4f56;padding-bottom:1px;
}
.cambio-btn:hover{color:#fff;border-color:#fff}

.cambio-painel{background:#1c1f24;border-top:1px solid #2b2f36}
.cambio-painel-in{
  max-width:1180px;margin:0 auto;padding:var(--e3);
  display:flex;align-items:flex-end;gap:var(--e3);flex-wrap:wrap;
}
.cambio-painel label{display:flex;flex-direction:column;gap:var(--e1)}
.cambio-painel label span{font-size:var(--t-mini);color:#8b9097}
.cambio-painel input{
  width:150px;background:#0f1216;border:1px solid #363b43;border-radius:var(--r-p);
  padding:var(--e2) 10px;color:#fff;font-size:var(--t-p);font-weight:800;
}
.cambio-painel input:focus{border-color:#7d838b;outline:none}
.btn-fantasma{font-size:var(--t-mini);color:#8b9097;border-bottom:1px solid #4a4f56;padding-bottom:1px}
.btn-fantasma:hover{color:#fff;border-color:#fff}
.cambio-nota{font-size:var(--t-mini);color:#6d727a;flex-basis:100%;margin-top:var(--e1)}

/* ---------- topo ------------------------------------------------------- */
/* ---------- faixa fina --------------------------------------------------
   Aqui mora o que antes era a capa inteira: cidade, tamanho do catalogo e
   como o pedido fecha. Uma linha resolve o que ocupava meia tela.
   ----------------------------------------------------------------------- */
.faixa{background:var(--marca);color:#a9cede;font-size:var(--t-mini)}
.faixa-in{
  max-width:1180px;margin:0 auto;padding:0 var(--e3);
  height:34px;display:flex;align-items:center;gap:var(--e3);
  white-space:nowrap;overflow-x:auto;scrollbar-width:none;
}
.faixa-in::-webkit-scrollbar{display:none}
.faixa-in p{display:flex;align-items:center;gap:6px}
.faixa-in p+p::before{content:"";width:1px;height:12px;background:#2a6d92;margin-right:var(--e3)}
.faixa-in strong{color:#fff;font-weight:800}
.faixa-zap{margin-left:auto}

.topo{
  position:sticky;top:0;z-index:30;
  background:var(--carta);border-bottom:1px solid var(--linha);
}
.topo-in{
  max-width:1180px;margin:0 auto;padding:var(--e3);
  display:flex;align-items:center;gap:var(--e3);
}
.marca{display:block;flex-shrink:0}
.marca img{height:30px;width:auto}

/* ---------- navegacao de categoria (a barra de filtro virou nav) ------- */
.nav{border-top:1px solid var(--linha)}
.nav-in{
  max-width:1180px;margin:0 auto;padding:0 var(--e3);
  display:flex;align-items:center;gap:var(--e3);
}

.busca{position:relative;flex:1;max-width:420px}
.busca svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;fill:none;stroke:var(--tinta3);stroke-width:2;
  stroke-linecap:round;pointer-events:none;
}
.busca input{
  width:100%;background:var(--carta);border:1px solid var(--linha);
  border-radius:var(--r-g);padding:11px 12px 11px 36px;font-size:var(--t-p);
}
.busca input:focus{outline:none;border-color:var(--tinta)}
.busca input::placeholder{color:var(--tinta3)}

.btn-carrinho{
  position:relative;margin-left:auto;display:flex;align-items:center;gap:var(--e2);
  background:var(--marca);color:#fff;border-radius:var(--r-g);
  padding:11px var(--e3);font-size:var(--t-p);
}
.btn-carrinho svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn-carrinho strong{font-weight:800}
.conta-bolha{
  position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;
  background:var(--real);color:#fff;border-radius:10px;
  font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px;
}

/* item de navegacao: sem caixa, o ativo se marca por peso e sublinhado */
.chips{
  display:flex;gap:var(--e3);flex:1;min-width:0;
  overflow-x:auto;scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  position:relative;white-space:nowrap;padding:14px 0;
  font-size:var(--t-p);color:var(--tinta2);
  display:inline-flex;align-items:center;gap:6px;
  border-bottom:2px solid transparent;
}
.chip:hover{color:var(--tinta)}
.chip[aria-pressed="true"]{color:var(--marca);font-weight:800;border-bottom-color:var(--marca2)}
.chip b{font-weight:400;font-size:var(--t-mini);color:var(--tinta3)}
.chip[aria-pressed="true"] b{color:var(--marca2)}
.conta{flex-shrink:0;font-size:var(--t-mini);color:var(--tinta3)}

.rodape-logo{height:26px;width:auto;opacity:.75}

/* ---------- grade ------------------------------------------------------ */
.grade{
  max-width:1180px;margin:0 auto;padding:var(--e4) var(--e3) var(--e5);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));
  gap:var(--e3);
}

.cartao{
  background:var(--carta);border:1px solid var(--linha);border-radius:var(--r-g);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .16s ease;
}
.cartao:hover{border-color:var(--tinta3)}
.cartao-img{
  position:relative;width:100%;aspect-ratio:1;background:#fff;
  border-bottom:1px solid var(--linha);cursor:pointer;
  display:grid;place-items:center;overflow:hidden;
}
.cartao-img img{width:100%;height:100%;object-fit:contain;padding:var(--e3)}
/* sem foto: mesma altura do card com foto, senao a linha da grade desalinha.
   o que muda e o fundo, mais claro, para continuar lendo como "falta foto" */
.cartao-img.vazia{background:#f7f5f0;gap:var(--e1);align-content:center}
.sem-foto{font-size:var(--t-m);font-weight:800;color:#c9c4b6;letter-spacing:-.02em}
.sem-foto-cat{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#c9c4b6}
.selo-fora{
  position:absolute;top:var(--e2);left:var(--e2);
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-p);
  font-size:11px;padding:3px 7px;color:var(--alerta);
}

.cartao-corpo{padding:var(--e3);display:flex;flex-direction:column;flex:1;gap:var(--e1)}
.cartao-marca{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--tinta3)}
.cartao-nome{
  font-size:var(--t-p);font-weight:800;line-height:1.3;letter-spacing:-.01em;
  cursor:pointer;
}
.cartao-nome:hover{text-decoration:underline;text-underline-offset:2px}

/* o preco e a maior coisa do cartao - a ideia da pagina */
.cartao-preco{
  margin-top:auto;padding-top:var(--e3);
  font-size:var(--t-g);font-weight:800;line-height:1;letter-spacing:-.03em;
  color:var(--real);
}
.cartao-orig{font-size:var(--t-mini);color:var(--tinta3);margin-top:5px}

.btn-add{
  margin-top:var(--e3);width:100%;background:var(--tinta);color:#fff;
  border-radius:var(--r-p);padding:11px;font-size:var(--t-mini);font-weight:800;
  letter-spacing:.02em;transition:opacity .15s;
}
.btn-add:hover{opacity:.85}
.btn-add[disabled]{background:var(--papel);color:var(--tinta3);cursor:not-allowed;border:1px solid var(--linha)}

.vazio{max-width:1180px;margin:0 auto;padding:0 var(--e3) var(--e5);color:var(--tinta2);font-size:var(--t-p)}

/* ---------- rodape ----------------------------------------------------- */
.rodape{border-top:1px solid var(--linha);background:var(--carta)}
.rodape-in{max-width:1180px;margin:0 auto;padding:var(--e4) var(--e3)}
.rodape .marca{font-size:var(--t-p)}
.rodape-end{font-size:var(--t-mini);color:var(--tinta2);margin-top:var(--e2)}
.rodape-nota{font-size:var(--t-mini);color:var(--tinta3);margin-top:var(--e3);max-width:62ch;line-height:1.6}

/* ---------- botao flutuante (so no celular) ---------------------------- */
.flutua{
  position:fixed;left:var(--e3);right:var(--e3);bottom:var(--e3);z-index:35;
  display:none;align-items:center;justify-content:space-between;gap:var(--e3);
  background:var(--tinta);color:#fff;border-radius:var(--r-g);
  padding:14px var(--e3);font-size:var(--t-p);
  box-shadow:0 8px 28px rgba(20,22,26,.28);
}
.flutua strong{font-weight:800}

/* ---------- veu, gaveta, ficha ---------------------------------------- */
.veu{position:fixed;inset:0;background:rgba(20,22,26,.62);z-index:40}

.gaveta,.ficha{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:45;
  background:var(--papel);display:flex;flex-direction:column;
  border-left:1px solid var(--linha);
}
.gaveta-topo{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--e3);border-bottom:1px solid var(--linha);
}
.gaveta-topo h2{font-size:var(--t-m);font-weight:800;letter-spacing:-.02em}
.gaveta-topo button svg,.ficha-x svg{width:20px;height:20px;fill:none;stroke:var(--tinta);stroke-width:1.8;stroke-linecap:round}

.gaveta-itens{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--e2) var(--e3)}
.gaveta-vazia{color:var(--tinta2);font-size:var(--t-p);padding:var(--e4) 0}

.linha-item{display:flex;gap:var(--e3);padding:var(--e3) 0;border-bottom:1px solid var(--linha)}
.linha-item:last-child{border-bottom:none}
.linha-foto{
  width:52px;height:52px;flex-shrink:0;background:var(--carta);
  border:1px solid var(--linha);border-radius:var(--r-p);
  display:grid;place-items:center;overflow:hidden;
}
.linha-foto img{width:100%;height:100%;object-fit:contain;padding:4px}
.linha-foto span{font-size:var(--t-p);font-weight:800;color:#dcd8cd}
.linha-info{flex:1;min-width:0}
.linha-nome{font-size:var(--t-mini);font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.linha-preco{font-size:var(--t-mini);color:var(--real);font-weight:800;margin-top:3px}
.qtd{display:flex;align-items:center;gap:var(--e2);margin-top:var(--e2);flex-wrap:wrap}
.qtd button:not(.tirar){
  flex-shrink:0;
  width:26px;height:26px;border:1px solid var(--linha);background:var(--carta);
  border-radius:var(--r-p);font-weight:800;font-size:var(--t-p);line-height:1;
}
.qtd button:not(.tirar):hover{border-color:var(--tinta)}
.qtd span{font-size:var(--t-mini);font-weight:800;min-width:16px;text-align:center}
.qtd .tirar{
  margin-left:auto;flex-shrink:0;padding:0;
  font-size:11px;color:var(--tinta3);border-bottom:1px solid var(--linha);
}
.tirar:hover{color:var(--alerta);border-color:var(--alerta)}

.gaveta-pe{padding:var(--e3);border-top:1px solid var(--linha);background:var(--carta)}
.soma{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--e3)}
.soma span{font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.1em;color:var(--tinta2)}
.soma strong{font-size:var(--t-g);font-weight:800;letter-spacing:-.03em;color:var(--real)}
.btn-zap{
  width:100%;display:flex;align-items:center;justify-content:center;gap:var(--e2);
  background:var(--tinta);color:#fff;border-radius:var(--r-p);
  padding:14px;font-size:var(--t-p);font-weight:800;
}
.btn-zap svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.btn-zap:hover{opacity:.88}
.btn-zap[disabled]{background:var(--papel);color:var(--tinta3);border:1px solid var(--linha);cursor:not-allowed}
.gaveta-nota{font-size:11px;color:var(--tinta3);margin-top:var(--e2);text-align:center}

/* ficha do produto -- painel de duas colunas, nao gaveta.
   A foto ganha metade da largura porque caixa de peptideo e o que
   distingue um frasco do outro. O preco continua o maior tipo da tela. */
.ficha{
  top:50%;right:auto;bottom:auto;left:50%;transform:translate(-50%,-50%);
  width:min(1040px,94vw);max-height:92vh;
  background:var(--carta);
  border:1px solid var(--linha);border-radius:var(--r-g);overflow:hidden;
}
.ficha-x{
  position:absolute;top:var(--e3);right:var(--e4);z-index:3;
  width:32px;height:32px;border-radius:50%;background:var(--carta);
  border:1px solid var(--linha);display:grid;place-items:center;
}
.ficha-x:hover{border-color:var(--tinta)}
.ficha-in{overflow-y:auto;padding:0}

.ficha-grade{display:grid;grid-template-columns:46% 1fr;align-items:stretch}

.ficha-foto{
  background:var(--carta);border-right:1px solid var(--linha);
  min-height:min(520px,60vh);display:grid;place-items:center;place-content:center;overflow:hidden;
}
.ficha-foto img{width:100%;height:100%;max-height:520px;object-fit:contain;padding:var(--e4)}
.ficha-foto.vazia{background:var(--papel)}
.ficha-foto .sem-foto{font-size:var(--t-hero);font-weight:800;color:#dcd8cd;line-height:1}
.ficha-foto .sem-foto-cat{
  display:block;font-size:var(--t-mini);text-transform:uppercase;
  letter-spacing:.1em;color:var(--tinta3);margin-top:var(--e2);text-align:center;
}

.ficha-lado{padding:var(--e5) var(--e4) var(--e4)}

.ficha-trilha{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap}
.ficha-trilha button{
  font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.1em;
  color:var(--marca);border-bottom:1px solid transparent;
}
.ficha-trilha button:hover{border-color:var(--marca)}
.ficha-marca{
  font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.1em;
  color:var(--tinta3);padding-left:var(--e2);border-left:1px solid var(--linha);
}

.ficha-nome{font-size:var(--t-g);font-weight:800;line-height:1.15;letter-spacing:-.03em;margin-top:var(--e2)}
.ficha-preco{font-size:var(--t-hero);font-weight:800;color:var(--real);letter-spacing:-.04em;line-height:1;margin-top:var(--e3)}
.ficha-orig{font-size:var(--t-mini);color:var(--tinta3);margin-top:var(--e2)}

.selo-estoque{
  display:inline-block;margin-top:var(--e3);
  font-size:var(--t-mini);font-weight:800;color:var(--real);
}
.selo-estoque::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--real);margin-right:var(--e2);vertical-align:middle}
.selo-estoque.fora{color:var(--alerta)}
.selo-estoque.fora::before{background:var(--alerta)}

.ficha-compra{display:flex;align-items:stretch;gap:var(--e2);margin-top:var(--e3)}
.passo{display:flex;align-items:center;border:1px solid var(--linha);border-radius:var(--r-p);background:var(--carta)}
.passo button{width:38px;font-size:var(--t-m);font-weight:800;color:var(--tinta2);line-height:1}
.passo button:hover{color:var(--tinta)}
.passo strong{min-width:24px;text-align:center;font-size:var(--t-p);font-weight:800}
.ficha-compra .btn-add{flex:1;margin-top:0}

.ficha-desc{font-size:var(--t-p);color:var(--tinta2);line-height:1.65;margin-top:var(--e4);max-width:62ch}

.ficha-spec{margin-top:var(--e4);border-top:1px solid var(--linha)}
.ficha-spec h3{font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.1em;color:var(--tinta3);margin:var(--e3) 0 var(--e2)}
.ficha-spec li{list-style:none;font-size:var(--t-p);padding:var(--e2) 0;border-bottom:1px solid var(--linha)}
.ficha-spec li:last-child{border-bottom:none}

.ficha-como{margin-top:var(--e3);border-top:1px solid var(--linha);padding-top:var(--e3)}
.ficha-como li{list-style:none;font-size:11px;color:var(--tinta3);line-height:1.6}

/* relacionados: quem abriu um frasco de 330 quer ver os vizinhos de preco */
.ficha-irmaos{border-top:1px solid var(--linha);background:var(--papel);padding:var(--e4)}
.ficha-irmaos h3{font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.1em;color:var(--tinta3);margin-bottom:var(--e3)}
.mini-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e3)}
.mini{text-align:left;display:flex;flex-direction:column;gap:6px}
.mini-img{
  aspect-ratio:1/1;background:var(--carta);border:1px solid var(--linha);
  border-radius:var(--r-p);display:grid;place-items:center;overflow:hidden;
}
.mini:hover .mini-img{border-color:var(--tinta)}
.mini-img img{width:100%;height:100%;object-fit:contain;padding:var(--e2)}
.mini-nome{font-size:11px;font-weight:800;line-height:1.3}
.mini-preco{font-size:var(--t-mini);font-weight:800;color:var(--real)}

@media (max-width:880px){
  .ficha{
    top:0;left:0;right:0;bottom:0;transform:none;
    width:100%;max-height:100%;border-radius:0;border:none;
  }
  .ficha-grade{grid-template-columns:1fr}
  .ficha-foto{
    border-right:none;border-bottom:1px solid var(--linha);
    min-height:0;aspect-ratio:4/3;width:100%;
  }
  .ficha-lado{padding:var(--e4) var(--e3) var(--e3)}
  .mini-grade{grid-template-columns:repeat(2,1fr)}
}

/* ---------- responsivo ------------------------------------------------- */
@media(max-width:900px){
  :root{--t-g:24px}
  .marca img{height:26px}
}
@media(max-width:620px){
  .topo-in{flex-wrap:wrap;gap:var(--e2) var(--e3)}
  /* a categoria ativa ja mostra a propria contagem; o contador so apertava */
  .conta{display:none}
  .chips{gap:var(--e3)}
  .chip{padding:12px 0;font-size:var(--t-mini)}
  .faixa-zap{display:none}
  .busca{order:3;flex-basis:100%;max-width:none}
  .btn-carrinho{display:none}
  .grade{grid-template-columns:repeat(2,1fr);gap:var(--e2)}
  .cartao-corpo{padding:var(--e2) 10px 10px}
  .flutua{display:flex}
  main{padding-bottom:84px}
  .cambio-in{height:auto;padding:var(--e2) var(--e3);flex-wrap:wrap;gap:var(--e2)}
}

/* ---------- lojas parceiras -------------------------------------------- */
.parc-capa{max-width:1180px;margin:0 auto;padding:var(--e4) var(--e3) var(--e3)}
.parc-capa h1{font-size:var(--t-g);font-weight:800;letter-spacing:-.025em}
.parc-capa p{margin-top:var(--e2);max-width:60ch;color:var(--tinta2);font-size:var(--t-p);line-height:1.6}

.parc-grupo{max-width:1180px;margin:0 auto;padding:0 var(--e3) var(--e4)}
.parc-titulo{
  font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.12em;
  color:var(--tinta2);padding:var(--e3) 0 var(--e2);
  border-bottom:1px solid var(--linha);margin-bottom:var(--e3);
}
.parc-titulo span{color:var(--tinta3);letter-spacing:.04em}

.parc-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--e2)}
.parc{
  background:var(--carta);border:1px solid var(--linha);border-radius:var(--r-g);
  padding:var(--e3);display:flex;align-items:center;gap:var(--e3);
  transition:border-color .16s ease;
}
.parc:hover{border-color:var(--tinta3)}
.parc-ini{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;
  background:var(--marca);color:#fff;font-weight:800;font-size:var(--t-m);
  display:grid;place-items:center;letter-spacing:-.02em;
}
.parc-corpo{flex:1;min-width:0}
.parc-nome{font-size:var(--t-p);font-weight:800;letter-spacing:-.01em}
.parc-vend{font-size:var(--t-mini);color:var(--tinta2);margin-top:2px}
.parc-vend strong{font-weight:800;color:var(--tinta)}
.parc-tel{font-size:var(--t-mini);color:var(--tinta3);margin-top:2px}
.parc-zap{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  background:var(--real);color:#fff;border-radius:var(--r-p);
  padding:9px 13px;font-size:var(--t-mini);font-weight:800;
}
.parc-zap svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.parc-zap:hover{filter:brightness(1.12)}

.faixa-zap a{border-bottom:1px solid #2a6d92}
.faixa-zap a:hover{color:#fff;border-color:#fff}

@media(max-width:620px){
  .parc-grade{grid-template-columns:1fr}
  .parc-capa{padding-top:var(--e3)}
}