/* NOSSO.ELO — base compartilhada entre a home e o catalogo.
   Direcao: a loja da foto. Marmore preto e dourado no cromo, produto sobre
   papel claro, e o desconto em vermelho de etiqueta de vitrine — que e o que
   essa loja realmente vende.
   Serifa so em nome de produto e titulo de secao; o resto e sans de sistema.
   Sem webfont: o cliente abre isso no 4G e o site nao pode depender da rede
   de terceiros para desenhar a primeira tela. */

:root {
  /* Papel e tinta */
  --papel:    #f6f2ec;
  --carta:    #ffffff;
  --tinta:    #15110e;   /* preto quente do marmore, nao #000 */
  --tinta-2:  #6c6359;
  --linha:    #e2dcd3;

  /* Marca */
  --preto:    #15110e;
  --ouro:     #b8873a;   /* dourado legivel sobre claro */
  --ouro-luz: #fdd09e;   /* o dourado exato da logo, so sobre preto */

  /* Semantica */
  --oferta:   #b3271e;   /* etiqueta de desconto */
  --zap:      #1a9c5e;
  --aviso:    #8a6400;

  --serifa: Georgia, "Times New Roman", "Noto Serif", serif;
  --sans:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;


  /* Nomes antigos, ainda usados por css/admin.css (enviar-foto e validar).
     Ficam como apelido em vez de duplicar valor: trocar a paleta acima leva
     as duas telas de admin junto. */
  --fundo:    var(--papel);
  --marca:    var(--preto);
  --marca-f:  #2a221a;
  --suave:    var(--tinta-2);
  --destaque: var(--ouro);

  --raio:    12px;
  --raio-g:  20px;
  --largura: 1180px;
  --topo:    112px;  /* altura do cabecalho fixo, mobile */
}

@media (min-width: 760px) { :root { --topo: 76px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.5 var(--sans);
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

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

a { color: inherit; }

:where(a, button, input, select, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.envoltorio { max-width: var(--largura); margin: 0 auto; padding: 0 16px; }

/* ---------- Barra de utilidade ---------- */

.utilidade {
  background: var(--preto);
  color: #cfc6ba;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(253, 208, 158, .22);
}

.utilidade .envoltorio {
  display: flex; align-items: center; gap: 18px;
  height: 36px; overflow-x: auto; scrollbar-width: none;
}
.utilidade .envoltorio::-webkit-scrollbar { display: none; }

.utilidade span, .utilidade a {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; text-decoration: none;
}
.utilidade a:hover { color: var(--ouro-luz); }
.utilidade .separa { color: rgba(253, 208, 158, .3); }
.utilidade .direita { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.utilidade svg { width: 15px; height: 15px; flex: none; }

/* ---------- Cabecalho ---------- */

.cabecalho {
  position: sticky; top: 0; z-index: 40;
  background: var(--preto);
  border-bottom: 1px solid rgba(253, 208, 158, .22);
}

.cabecalho .envoltorio {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "logo acoes" "busca busca";
  align-items: center;
  gap: 10px 14px;
  padding-top: 10px; padding-bottom: 10px;
}

@media (min-width: 760px) {
  .cabecalho .envoltorio {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo busca acoes";
    gap: 24px;
  }
}

.logo { grid-area: logo; display: block; }
.logo img { width: 210px; }
@media (min-width: 560px) { .logo img { width: 240px; } }
@media (min-width: 760px) { .logo img { width: 268px; } }

/* Busca */
.busca-caixa {
  grid-area: busca;
  position: relative; display: flex; align-items: center;
}
.busca-caixa .lupa {
  position: absolute; left: 14px; width: 18px; height: 18px;
  color: var(--tinta-2); pointer-events: none;
}
.busca-caixa input {
  width: 100%; height: 42px;
  padding: 0 40px 0 40px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--carta); color: var(--tinta);
  font: 15px var(--sans);
  -webkit-appearance: none;
}
.busca-caixa input::-webkit-search-cancel-button { display: none; }
.busca-caixa input:focus { border-color: var(--ouro); outline: none; }
.limpar-busca {
  position: absolute; right: 8px;
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: none; color: var(--tinta-2); font-size: 20px; line-height: 1;
  cursor: pointer;
}

/* Acoes do cabecalho */
.acoes {
  grid-area: acoes;
  display: flex; align-items: center; gap: 4px; justify-self: end;
}
.acao {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 10px;
  border: 0; background: none; cursor: pointer;
  color: #e8e0d4; font: 11px var(--sans); text-decoration: none;
}
.acao:hover { color: var(--ouro-luz); }
.acao svg { width: 22px; height: 22px; }
.acao .selo {
  position: absolute; top: 2px; right: 4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--oferta); color: #fff;
  font: 600 11px/17px var(--sans); text-align: center;
}
.acao .selo[hidden] { display: none; }
.acao-rotulo { display: none; }
@media (min-width: 900px) { .acao-rotulo { display: block; } }

/* ---------- Titulos de secao ---------- */

.secao { padding: 36px 0; }
.secao-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.secao h2 {
  margin: 0;
  font: 400 24px/1.15 var(--serifa);
  letter-spacing: -.01em;
}
@media (min-width: 760px) { .secao h2 { font-size: 30px; } }
.secao-topo a {
  font-size: 14px; color: var(--ouro); text-decoration: none;
  white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: 1px;
}

/* ---------- Botoes ---------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px;
  border: 0; border-radius: 999px;
  font: 600 15px var(--sans); text-decoration: none; cursor: pointer;
}
.botao-escuro { background: var(--preto); color: var(--ouro-luz); }
.botao-escuro:hover { background: #241d17; }
.botao-zap { background: var(--zap); color: #fff; width: 100%; }
.botao-zap:hover { background: #168650; }
.botao-claro {
  background: var(--carta); color: var(--tinta);
  border: 1px solid var(--linha);
}
.botao-link {
  background: none; border: 0; padding: 0;
  color: var(--ouro); font: inherit; text-decoration: underline; cursor: pointer;
}

/* ---------- Cartao de produto ---------- */

.cartao {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}

/* A foto e um <button> para o teclado alcancar o detalhe. Um botao dimensiona
   pelo conteudo, entao o aspect-ratio sozinho nao segura: a imagem precisa
   sair do fluxo, senao ela impoe a altura natural dela ao cartao (um frasco
   alto virava um cartao de 650px e quebrava a grade). */
.cartao-foto {
  position: relative;
  aspect-ratio: 1;
  background: #fbf9f6;
  border: 0; padding: 0; margin: 0;
  cursor: pointer;
  display: block; width: 100%;
}
.cartao-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; padding: 10px;
}

/* O desconto e o argumento de venda da loja: etiqueta vermelha, canto
   superior esquerdo, sem transparencia e sem delicadeza. */
.etiqueta {
  position: absolute; top: 0; left: 0; z-index: 2;
  padding: 5px 9px 5px 8px;
  background: var(--oferta); color: #fff;
  font: 700 13px/1 var(--sans); letter-spacing: -.02em;
  border-bottom-right-radius: 10px;
}

.coracao {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  color: var(--tinta-2); cursor: pointer;
}
.coracao svg { width: 19px; height: 19px; }
.coracao[aria-pressed="true"] { color: var(--oferta); }
.coracao[aria-pressed="true"] svg { fill: currentColor; }

.cartao-corpo {
  display: flex; flex-direction: column; flex: 1;
  padding: 10px 12px 12px;
  gap: 2px;
}
.cartao-nome {
  margin: 0;
  font: 400 15px/1.25 var(--serifa);
  /* Nome longo nao pode empurrar o preco e desalinhar a grade. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cartao-meta { font-size: 12.5px; color: var(--tinta-2); }

.precos { margin-top: auto; padding-top: 8px; }
.preco-de {
  display: block; font-size: 12.5px; color: var(--tinta-2);
  text-decoration: line-through;
}
.preco-por { font: 700 19px/1.2 var(--sans); }

.cartao-rodape { display: flex; align-items: flex-end; gap: 8px; }
.somar {
  margin-left: auto; flex: none;
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--preto); color: var(--ouro-luz);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.somar:hover { background: #2a221a; }

.cartao.esgotado .cartao-foto img { opacity: .4; filter: grayscale(1); }
.faixa-esgotado {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 5px; text-align: center;
  background: rgba(21, 17, 14, .86); color: #fff;
  font: 600 11px/1 var(--sans); letter-spacing: .08em;
}

/* ---------- Trilho horizontal ---------- */

.trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 46%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* O respiro lateral tem que vir de padding, nao de margin: senao o ultimo
     cartao encosta na borda da tela quando o trilho chega ao fim. */
  padding: 2px 16px 10px;
  margin: 0 -16px;
  scrollbar-width: thin;
}
.trilho > * { scroll-snap-align: start; }
@media (min-width: 560px) { .trilho { grid-auto-columns: 30%; } }
@media (min-width: 900px) { .trilho { grid-auto-columns: 22%; } }
@media (min-width: 1100px) { .trilho { grid-auto-columns: 18%; } }

/* ---------- Rodape ---------- */

.rodape {
  margin-top: 48px;
  background: var(--preto); color: #bfb6a9;
  font-size: 14px;
}
.rodape .envoltorio {
  display: grid; gap: 28px;
  padding-top: 40px; padding-bottom: 32px;
}
@media (min-width: 760px) {
  .rodape .envoltorio { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
}
.rodape h3 {
  margin: 0 0 12px;
  font: 400 16px var(--serifa); color: var(--ouro-luz);
}
.rodape ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--ouro-luz); }
.rodape-logo img { width: 190px; margin-bottom: 14px; }
.rodape-fim {
  border-top: 1px solid rgba(253, 208, 158, .18);
  font-size: 12.5px; color: #8d857a;
}
.rodape-fim .envoltorio {
  display: block; padding-top: 16px; padding-bottom: 16px;
}

/* ---------- Botao flutuante do pedido ---------- */

.botao-pedido {
  position: fixed; z-index: 50;
  left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: auto; max-width: 420px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 20px;
  border: 0; border-radius: 999px;
  background: var(--zap); color: #fff;
  font: 600 15px var(--sans); cursor: pointer;
  box-shadow: 0 6px 20px rgba(21, 17, 14, .28);
}
.botao-pedido[hidden] { display: none; }
.botao-pedido svg { width: 20px; height: 20px; }
.botao-pedido .ponto { opacity: .6; }

body.tem-pedido { padding-bottom: 86px; }

/* ---------- Dialogos ---------- */

dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: 86vh;
  padding: 20px;
  border: 0; border-radius: var(--raio-g);
  background: var(--carta); color: var(--tinta);
}
dialog::backdrop { background: rgba(21, 17, 14, .55); }
dialog h2 { margin: 0 0 14px; font: 400 21px var(--serifa); }

.fechar-x {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: #f1ece5; color: var(--tinta);
  font-size: 20px; line-height: 1; cursor: pointer;
}

/* Pedido */
#lista-pedido { margin: 0 0 14px; padding: 0; list-style: none; }
#lista-pedido li {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--linha);
  font-size: 14px;
}
#lista-pedido input {
  width: 54px; height: 36px; padding: 0 6px;
  border: 1px solid var(--linha); border-radius: 8px;
  font: 15px var(--sans); text-align: center;
}
#lista-pedido .valor { font-weight: 600; white-space: nowrap; }
#lista-pedido .tirar {
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: #f1ece5;
  font-size: 17px; line-height: 1; cursor: pointer; color: var(--tinta-2);
}
.total-final {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 14px; font-size: 15px;
}
.total-final strong { font-size: 22px; }
.aviso-longo {
  margin: 0 0 12px; padding: 10px 12px;
  border-radius: 10px; background: #fdf5e3; color: var(--aviso);
  font-size: 13.5px;
}
.enviar-partes { display: grid; gap: 8px; }
.pos-envio { margin: 12px 0 0; font-size: 13.5px; color: var(--tinta-2); text-align: center; }
#fechar-pedido { width: 100%; margin-top: 10px; }

/* Detalhe do produto */
.detalhe-foto {
  position: relative;
  aspect-ratio: 1; max-height: 42vh; margin: 0 auto 14px;
  background: #fbf9f6; border-radius: var(--raio);
}
.detalhe-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; padding: 12px;
}
.detalhe-marca { margin: 0 0 10px; font-size: 14px; color: var(--tinta-2); }
.detalhe-descricao { margin: 12px 0 16px; font-size: 14.5px; line-height: 1.6; color: #3c352e; }
.detalhe-esgotado {
  margin: 0 0 8px; font: 600 12px var(--sans); letter-spacing: .08em; color: var(--oferta);
}
#detalhe-produto .precos { margin-top: 0; }

/* ---------- Avisos e toast ---------- */

.avisos {
  margin: 0; padding: 12px 16px;
  background: #fdf5e3; color: var(--aviso);
  font-size: 13.5px;
}
.avisos p { margin: 0 0 4px; }
.avisos p:last-child { margin: 0; }

.toast {
  position: fixed; z-index: 60;
  left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  padding: 11px 18px; border-radius: 999px;
  background: var(--preto); color: #fff; font-size: 14px;
  box-shadow: 0 6px 18px rgba(21, 17, 14, .3);
}
.toast[hidden] { display: none; }

/* ---------- Estados vazios ---------- */

.vazio {
  padding: 48px 16px; text-align: center; color: var(--tinta-2);
}
.vazio p { margin: 0 0 16px; }