/* Catálogo público (index.html).
   As cores da loja chegam por JavaScript (aplicarTema em catalogo.js) nas variáveis abaixo;
   os valores daqui são o padrão (o preto e dourado da Essential Perfumes), usados até a
   configuração da loja carregar. Outra loja, outras cores: nada aqui depende do dourado. */
:root {
  color-scheme: light;
  --primaria: #0b0b0b;
  --primaria-escura: #090909;
  --sobre-primaria: #ffffff;   /* texto em cima da cor primária (branco ou escuro, o que contrastar mais) */
  --primaria-legivel: #0b0b0b; /* primária escurecida até dar para ler sobre branco (links) */
  --secundaria: #c9a55a;       /* destaque (dourado): filetes, selos, botão Gerar arte */
  --secundaria-rgb: 201 165 90; /* a mesma, para brilhos com transparência */
  --sobre-secundaria: #1c1b22;
  /* Destaque como texto ou contorno, ajustado para dar leitura em cada fundo. */
  --destaque-topo: #c9a55a;    /* sobre a primária: slogan, filtro escolhido */
  --destaque-rodape: #c9a55a;  /* sobre o rodapé escuro */
  --destaque-texto: #846d3b;   /* sobre branco: marca na janela do produto */
  --destaque-foco: #9d8046;    /* contorno de foco e de campo ativo (contraste 3 sobre o fundo) */
  --destaque-claro: #f7f2e8;   /* fundo claro tingido com o destaque */

  --fundo: #f7f5f0;            /* off-white quente; se mudar, mude FUNDO_PAGINA em catalogo.js */
  --superficie: #ffffff;
  --texto: #1a1916;
  --texto-suave: #6b665c;
  --borda: #e6e1d6;
  --whats: #0f7d40;            /* verde escuro: texto branco com contraste acima de 4,5 */
  --whats-escuro: #0b6532;

  --raio: 14px;
  --raio-pequeno: 10px;
  --sombra: 0 1px 2px rgb(40 32 16 / 4%), 0 4px 14px rgb(40 32 16 / 4%);
  --sombra-forte: 0 18px 60px rgb(15 12 8 / 30%);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Cinzel combina com o nome escrito no logo; Georgia segura enquanto ela não chega. */
  --fonte-titulo: "Cinzel", Georgia, "Times New Roman", serif;
  --lateral: 12px;
  /* Laterais que desviam do entalhe do iPhone deitado (a página usa viewport-fit=cover). */
  --lateral-esq: max(var(--lateral), env(safe-area-inset-left));
  --lateral-dir: max(var(--lateral), env(safe-area-inset-right));
  --largura: 1200px;
  --altura-logo: 84px;         /* no celular; cresce nas telas maiores */
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh; /* no celular, a altura com a barra do navegador à vista */
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Com a janela do produto aberta, a página de trás não rola. */
html.modal-aberto, html.modal-aberto body { overflow: hidden; }

img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
svg { flex: none; }

:focus-visible { outline: 3px solid var(--destaque-foco); outline-offset: 2px; }

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

.pular {
  position: absolute;
  left: 8px;
  top: -80px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--texto);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.pular:focus { top: 8px; }

/* ---------- Topo ---------- */

/* Fundo na cor primária com um brilho leve do destaque atrás do logo; embaixo, um filete
   (linha fina com um losango no meio), o mesmo desenho que fecha o logo da marca. */
.topo {
  position: relative;
  z-index: 21; /* o losango passa um pouco da borda: fica por cima da barra de busca */
  background: linear-gradient(180deg, var(--primaria) 0%, var(--primaria-escura) 100%);
  background:
    radial-gradient(ellipse 60% 85% at 50% 0%, rgb(var(--secundaria-rgb) / 14%), transparent 72%),
    linear-gradient(180deg, var(--primaria) 0%, var(--primaria-escura) 100%);
  color: var(--sobre-primaria);
}
.topo::before, .rodape::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--secundaria) 18%, var(--secundaria) 82%, transparent);
}
.topo::after, .rodape::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: var(--secundaria);
  transform: rotate(45deg);
}
.topo::before { bottom: 0; }
.topo::after { bottom: -4px; }
.topo :focus-visible { outline-color: var(--destaque-topo); }

.topo-interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) var(--lateral-dir) 18px var(--lateral-esq);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Até a configuração chegar: espaço do topo com logo guardado e nada à vista. */
.topo.carregando .topo-interno { min-height: calc(var(--altura-logo) + 55px); }
.topo.carregando .loja-id, .topo.carregando .topo-whats { visibility: hidden; }

.loja-id {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.loja-textos { min-width: 0; }

.nome-loja {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(1.4rem, 5.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}

/* Letras pequenas e espaçadas, como o nome no logo. A margem negativa tira o espaço que o
   letter-spacing deixa depois da última letra (senão o texto centralizado fica torto). */
.slogan {
  margin: 6px -.2em 0 0;
  color: var(--destaque-topo);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.5;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Com logo: ele no centro, grande, sem caixa (é dourado com fundo transparente). No celular
   o logo fica menor (--altura-logo) para os produtos aparecerem mais cedo. */
.topo.com-logo .topo-interno {
  --topo-alto: max(12px, env(safe-area-inset-top));
  position: relative;
  justify-content: center;
  padding-top: var(--topo-alto);
  padding-bottom: 16px;
}
.topo.com-logo .loja-id {
  flex: none;
  max-width: 100%;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
/* Sobra para o botão do WhatsApp nos dois lados do logo, sem encostar nele. O botão fica na
   altura do logo, então o slogan embaixo pode usar a largura toda (cabe numa linha só). */
.topo.com-logo.com-whats .logo { max-width: calc(100% - 112px); }
.topo.com-logo .topo-whats {
  position: absolute;
  right: var(--lateral-dir);
  top: calc(var(--topo-alto) + var(--altura-logo) / 2);
  transform: translateY(-50%);
}

.logo {
  width: auto;
  height: var(--altura-logo);
  max-width: 100%;
  object-fit: contain;
}

.topo-whats {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--destaque-topo);
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background .15s;
}
.topo-whats svg { width: 22px; height: 22px; }
.topo-whats:hover { background: rgb(var(--secundaria-rgb) / 16%); }

@media (min-width: 640px) {
  :root { --altura-logo: 110px; }
  .topo.carregando .topo-interno { min-height: calc(var(--altura-logo) + 62px); }
  .topo.com-logo .topo-interno { --topo-alto: max(14px, env(safe-area-inset-top)); padding-bottom: 20px; }
}

@media (min-width: 900px) {
  :root { --altura-logo: 132px; }
  .slogan { font-size: .76rem; }
}

/* Celular deitado: com tão pouca altura, o logo encolhe para a lista aparecer. */
@media (max-height: 500px) {
  :root { --altura-logo: 72px; }
}

/* ---------- Barra de busca (fica presa no alto ao rolar) ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(247 245 240 / 94%); /* o --fundo, quase opaco */
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s, border-color .2s;
}
.barra.grudada {
  border-bottom-color: var(--borda);
  box-shadow: 0 6px 18px rgb(40 32 16 / 7%);
}

.barra-interna {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 10px var(--lateral-dir) 10px var(--lateral-esq);
  display: flex;
  align-items: center;
  gap: 8px;
}

.busca {
  position: relative;
  flex: 1;
  min-width: 0;
}

.busca .lupa {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--texto-suave);
  pointer-events: none;
}

.busca input {
  width: 100%;
  height: 48px;
  padding: 0 46px;
  border: 1.5px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie);
  font-size: 16px; /* 16px ou mais evita o zoom automático do iPhone ao tocar no campo */
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.busca input::placeholder { color: #8c867a; }
.busca input:focus {
  border-color: var(--destaque-foco);
  box-shadow: 0 0 0 4px rgb(var(--secundaria-rgb) / 22%);
}
.busca input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.limpar-busca {
  position: absolute;
  right: 2px;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto-suave);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.limpar-busca svg { width: 18px; height: 18px; }
.limpar-busca:hover { background: var(--fundo); color: var(--texto); }

.ir-filtros {
  flex: none;
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
}
.ir-filtros svg { width: 20px; height: 20px; }

.selo {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--primaria);
  color: var(--destaque-topo);
  font-size: .75rem;
  line-height: 20px;
  text-align: center;
}

/* ---------- Filtros ---------- */

.filtros {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 2px var(--lateral-dir) 0 var(--lateral-esq);
  display: grid;
  gap: 8px;
}

/* Gênero: as quatro opções numa peça só, dividindo a largura (cabem inteiras até em 320px).
   Com a fonte do aparelho muito grande, a peça rola de lado em vez de cortar. */
.generos {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1.5px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie);
  overflow-x: auto;
  scrollbar-width: none;
}
.generos::-webkit-scrollbar { display: none; }

.chip {
  flex: 1 0 auto;
  height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
/* Contorno de foco por dentro: a peça rola de lado e cortaria o de fora. */
.chip:focus-visible { outline-offset: -3px; }
.chip:hover { background: var(--fundo); }
/* Escolhido: na cor primária com letras e borda no destaque (preto e dourado, como o topo). */
.chip[aria-pressed="true"] {
  background: var(--primaria);
  box-shadow: inset 0 0 0 1.5px var(--destaque-topo);
  color: var(--destaque-topo);
}
/* Escolhido e com foco: o contorno dourado se confundiria com a borda dourada dele. Branco, um
   pouco para dentro (o contorno cresce para fora a partir do afastamento: sobra um fio preto
   entre ele e a borda), contrasta com o preto e com o dourado. */
.chip[aria-pressed="true"]:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }

/* "Todos os tipos" é o texto mais comprido da segunda linha: um pouco mais de espaço para
   ele caber inteiro até em 320px. */
.selecoes {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "marca marca" "tipo ordem";
  gap: 8px;
}
.selecao-tipo { grid-area: tipo; }
.selecao-marca { grid-area: marca; }
.selecao-ordem { grid-area: ordem; }

.selecao select {
  width: 100%;
  height: 44px;
  padding: 0 30px 0 12px;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23656273' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center / 18px;
  font-size: 16px; /* idem: evita o zoom do iPhone */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.selecao select:hover { border-color: #d3ccbd; }
.selecao select.ativo {
  border-color: var(--destaque-foco);
  background-color: var(--destaque-claro);
  font-weight: 600;
}

@media (min-width: 640px) {
  :root { --lateral: 20px; }
  /* Com espaço sobrando, a peça do gênero fica do tamanho das opções, à esquerda. */
  .generos { justify-self: start; }
  .chip { padding: 0 16px; }
  .selecoes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas: "tipo marca ordem";
  }
}

@media (min-width: 1000px) {
  .filtros {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
  }
  .selecoes {
    grid-template-columns: 190px 260px 170px;
    justify-content: end;
  }
}

/* ---------- Lista de produtos ---------- */

.conteudo {
  flex: 1;
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 12px var(--lateral-dir) 36px var(--lateral-esq);
}

.resultado-topo {
  min-height: 28px;
  margin: 0 2px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.resumo {
  font-size: .92rem;
  color: var(--texto-suave);
}
.resumo strong { color: var(--texto); }

/* Área de toque de 44px; as margens negativas devolvem a altura da linha do resumo. */
.link-botao {
  flex: none;
  min-height: 44px;
  margin: -8px -6px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--primaria-legivel);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 640px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 900px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .grade { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
@media (hover: hover) {
  .card:not(.esqueleto):hover {
    transform: translateY(-3px);
    border-color: rgb(var(--secundaria-rgb) / 60%);
    box-shadow: 0 14px 32px rgb(40 32 16 / 11%);
  }
}

.card-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.card-link:focus-visible { outline-offset: -3px; border-radius: var(--raio); }

/* Foto e marcador ficam por cima, em posição absoluta: a altura não depende de a
   proporção quadrada já ter sido calculada. */
.card-foto {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-bottom: 1px solid #f1ede5;
  overflow: hidden;
}
.card-foto > img, .card-foto > .sem-foto {
  position: absolute;
  top: 7%;
  left: 7%;
  width: 86%;
  height: 86%;
}
.card-foto > img { object-fit: contain; }

.selo-tipo {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--secundaria);
  color: var(--sobre-secundaria);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.card-corpo {
  padding: 10px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-marca {
  min-height: 1.3em;
  overflow: hidden;
  color: var(--texto-suave);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-nome {
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.etiquetas {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  min-height: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.etiquetas li {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--destaque-claro);
  color: var(--texto);
  font-size: .72rem;
  font-weight: 700;
  line-height: 18px;
}

/* Preço de cada fornecedor (o site é só dos vendedores): o mais barato em verde, o esgotado
   apagado. */
.card-custos {
  list-style: none;
  margin: 4px 0 0;
  padding: 6px 0 0;
  border-top: 1px dashed var(--borda);
  display: grid;
  gap: 2px;
  font-size: .76rem;
}
.card-custos:empty { display: none; }
.card-custos li, .custos-lista li { display: flex; align-items: baseline; gap: 6px; }
.custo-loja { min-width: 2.4em; color: var(--texto-suave); font-weight: 800; letter-spacing: .04em; }
.custo-preco { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-custos .custo-preco { margin-left: auto; }
li.melhor .custo-preco { color: var(--whats); font-weight: 800; }
li.fora { color: var(--texto-suave); }

.card-rodape {
  margin-top: auto;
  padding: 8px 10px 10px;
  display: grid;
  gap: 8px;
}
@media (min-width: 640px) { .card-rodape { padding: 8px 12px 12px; } }

.card-preco {
  color: var(--texto);
  font-size: clamp(1.1rem, 4.6vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* Sem foto ainda: frasco desenhado no lugar, nas cores da loja. */
.sem-foto {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 38%, var(--destaque-claro) 0%, #fff 72%);
  color: var(--destaque-foco);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  text-align: center;
}
.sem-foto svg { width: 44%; height: auto; opacity: .5; }
.sem-foto span { color: var(--texto-suave); font-size: .72rem; font-weight: 600; }

/* Cards de espera enquanto o catálogo carrega. */
.esqueleto .card-foto { background: #efebe3; border: 0; }
.esq-linhas { padding: 12px; display: grid; gap: 8px; }
.esq-linhas i { height: 12px; border-radius: 6px; background: #efebe3; }
.esq-linhas i.curta { width: 55%; height: 18px; }
.esqueleto .card-foto, .esq-linhas i { animation: piscar 1.2s ease-in-out infinite alternate; }
@keyframes piscar { to { opacity: .45; } }

/* ---------- Botões ---------- */

.botao {
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.botao:active { transform: scale(.98); }
.botao svg { width: 20px; height: 20px; }

.botao-whats { background: var(--whats); color: #fff; }
.botao-whats:hover { background: var(--whats-escuro); }

.botao-primario { background: var(--primaria); color: var(--destaque-topo); }
.botao-primario:hover { background: var(--primaria-escura); }

.botao-contorno { background: var(--superficie); border-color: var(--borda); color: var(--texto); }
.botao-contorno:hover { border-color: var(--destaque-foco); }

/* Gerar arte: no destaque, com um brilho por cima que lembra metal. */
.botao-arte {
  background: var(--secundaria) linear-gradient(180deg, rgb(255 255 255 / 22%), rgb(255 255 255 / 0%) 60%);
  border-color: rgb(0 0 0 / 8%);
  color: var(--sobre-secundaria);
}
.botao-arte:hover { filter: brightness(.93); }

.botao-grande { min-height: 54px; font-size: 1.05rem; }

/* "Enviar para o cliente" (texto pedido pelo dono): numa linha quando cabe; senão em duas,
   "Enviar para" / "o cliente", junto do ícone e alinhadas por ele, nunca uma palavra solta.
   O botão é o contêiner, então a regra vale para o card estreito e para a barra da janela;
   em "em", a medida acompanha o tamanho da letra de cada botão.
   Se nem "Enviar para" cabe (aparelho de 280px, letra do navegador aumentada), o rótulo passa a
   quebrar onde der em vez de cortar e empurrar o ícone para fora do botão. */
.botao-envio { container-type: inline-size; }
.rotulo-envio > span { white-space: nowrap; }
@container (width < calc(10em + 28px)) {
  .rotulo-envio { width: min-content; text-align: left; }
}
@container (width < calc(5.3em + 26px)) {
  .rotulo-envio { width: auto; min-width: 0; overflow-wrap: anywhere; }
  .rotulo-envio > span { white-space: normal; }
}

.card-whats {
  width: 100%;
  min-height: 46px;
  padding: 4px 8px;
  gap: 7px;
  font-size: .875rem;
  line-height: 1.15;
}
.card-whats svg { width: 19px; height: 19px; }

/* ---------- Mais, vazio, erro ---------- */

.mais {
  padding: 24px 0 4px;
  display: flex;
  justify-content: center;
}

.vazio {
  max-width: 520px;
  margin: 8px auto;
  padding: 40px 20px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  text-align: center;
}
.vazio-icone { width: 64px; height: 64px; margin: 0 auto 10px; display: block; color: var(--destaque-foco); opacity: .8; }
.vazio h2 { font-family: var(--fonte-titulo); font-size: 1.2rem; font-weight: 600; letter-spacing: .03em; }
.vazio p { margin-top: 6px; color: var(--texto-suave); }
.vazio-acoes {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ---------- Senha (site dos vendedores) ---------- */

/* Enquanto pede a senha, a lista e os filtros saem: ficam o topo, o formulário e o rodapé. */
.travado .pular,
.travado .barra,
.travado .filtros,
.travado .resultado-topo,
.travado .grade,
.travado .mais { display: none; }

.trava {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trava-campo { width: 100%; max-width: 280px; margin-top: 18px; }
.trava-campo input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  color: var(--texto);
  font-size: 1.25rem; /* 16px ou mais evita o zoom automático do iPhone ao tocar no campo */
  letter-spacing: .25em;
  text-align: center;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.trava-campo input::placeholder { color: #8c867a; font-size: 1rem; letter-spacing: normal; }
.trava-campo input:focus {
  border-color: var(--destaque-foco);
  box-shadow: 0 0 0 4px rgb(var(--secundaria-rgb) / 22%);
}
.trava .trava-erro { margin-top: 10px; color: #b3261e; font-weight: 600; }
.trava .botao { width: 100%; max-width: 280px; margin-top: 14px; }
.trava .botao:disabled { opacity: .6; cursor: progress; }

/* ---------- Rodapé ---------- */

/* Fundo escuro fixo (o FUNDO_RODAPE de catalogo.js), com o mesmo filete do topo em cima. */
.rodape {
  position: relative;
  margin-top: 24px;
  background: #121212;
  color: #ece8df;
}
.rodape::before { top: 0; }
.rodape::after { top: -4px; }
.rodape :focus-visible { outline-color: var(--destaque-rodape); }

.rodape-interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 28px var(--lateral-dir) calc(28px + env(safe-area-inset-bottom)) var(--lateral-esq);
  display: grid;
  gap: 10px;
}

.rodape-nome {
  color: var(--destaque-rodape);
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .06em;
}

.rodape-contatos {
  list-style: none;
  margin: -4px 0 -2px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}
/* Linhas de 44px: o link inteiro é a área de toque. */
.rodape-contatos li, .rodape-contatos a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rodape-contatos a {
  color: inherit;
  text-decoration: none;
}
.rodape-contatos a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape-contatos svg { width: 20px; height: 20px; opacity: .85; }

.rodape-aviso { color: #a9a396; font-size: .84rem; }

/* ---------- Janela do produto ---------- */

.modal {
  width: 100%;
  max-width: 100%;
  max-height: 94vh;
  max-height: 94dvh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-forte);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Foco pelo teclado não para atrás da barra do preço grudada (embaixo; a altura dela vem de
     catalogo.js, pois muda com a largura, a letra e a barra de gestos) nem atrás do X (no alto). */
  scroll-padding-top: 56px;
  scroll-padding-bottom: calc(var(--altura-compra, 84px) + 12px);
}
.modal::backdrop {
  background: rgb(12 10 6 / 62%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal[open] { animation: subir .24s ease-out; }
@keyframes subir { from { transform: translateY(32px); opacity: 0; } }

/* Faixa de altura zero e presa no alto: o botão de fechar continua visível ao rolar. */
.modal-fechar-area {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 0;
  display: flex;
  justify-content: flex-end;
}
.modal-fechar {
  width: 44px;
  height: 44px;
  margin: 10px 10px 0 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 2px 12px rgb(0 0 0 / 16%);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.modal-fechar svg { width: 22px; height: 22px; }

/* No celular a foto fica num terço da tela: nome, fornecedores, preço e o botão de enviar
   aparecem logo ao abrir, sem precisar rolar. */
.modal-foto {
  --folga-foto: 16px;
  position: relative;
  height: min(72vw, 32vh);
  height: min(72vw, 32svh);
  background: #fff;
  border-bottom: 1px solid #f1ede5;
}
.modal-foto > img, .modal-foto > .sem-foto {
  position: absolute;
  top: var(--folga-foto);
  left: var(--folga-foto);
  width: calc(100% - 2 * var(--folga-foto));
  height: calc(100% - 2 * var(--folga-foto));
}
.modal-foto > img { object-fit: contain; }

.modal-info {
  padding: 16px 20px calc(22px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-marca {
  color: var(--destaque-texto);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Cinzel só tem maiúsculas (as minúsculas viram versaletes): corpo um pouco menor que o de
   uma serifa comum, para nomes longos caberem no celular. */
.modal-nome {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}

/* Filete: linha fina com um losango no meio, como embaixo do nome no logo. */
.filete {
  width: 132px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--secundaria);
}
.filete::before, .filete::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.filete i { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }

.detalhes {
  margin: 2px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.detalhes div {
  padding: 6px 10px;
  border-radius: var(--raio-pequeno);
  background: var(--fundo);
}
.detalhes dt { color: var(--texto-suave); font-size: .74rem; font-weight: 600; }
.detalhes dd { margin: 1px 0 0; font-size: .92rem; font-weight: 700; }

.custos {
  padding: 10px 10px 4px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--fundo);
}
.custos-titulo {
  margin-bottom: 2px;
  color: var(--texto-suave);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Uma linha de 40px por fornecedor: o "Abrir" de cada um é fácil de acertar com o dedo. */
.custos-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.custos-lista li { min-height: 40px; flex-wrap: wrap; align-items: center; column-gap: 6px; font-size: .98rem; }
.custos-lista li + li { border-top: 1px dashed var(--borda); }
.custos-lista .custo-loja { min-width: 2.6em; }
.custos-lista li.fora .custo-preco { text-decoration: line-through; }
.custo-selo {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--borda);
  color: var(--texto);
  font-size: .7rem;
  font-weight: 700;
}
li.melhor .custo-selo { background: #e2f2e8; color: var(--whats); }
.custo-abrir {
  align-self: stretch;
  min-height: 40px;
  margin: 0 -10px 0 auto;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  color: var(--primaria-legivel);
  font-size: .84rem;
  font-weight: 700;
}

/* Preço de venda e o botão de enviar. Grudam no pé da janela enquanto ainda há conteúdo
   embaixo. A folga da barra de gestos do iPhone fica sempre no padding: a altura da barra não
   muda ao grudar ou soltar (senão o conteúdo pularia na rolagem) e o fundo dela cobre a faixa.
   Grudada (classe posta em catalogo.js) a barra só ganha borda e sombra. Se o botão não cabe ao
   lado do preço (aparelho estreito, letra grande), ele desce para uma linha própria. */
.modal-compra {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 2px -20px 0;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  background: var(--superficie);
  border-top: 1px solid transparent;
  transition: box-shadow .2s, border-color .2s;
}
.modal-compra.grudada {
  border-top-color: var(--borda);
  box-shadow: 0 -8px 22px rgb(40 32 16 / 9%);
}

/* min-content: a observação quebra nas duas partes, embaixo do preço. */
.modal-valor { flex: none; width: min-content; }
.modal-preco {
  color: var(--texto);
  font-size: clamp(1.4rem, 6.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  white-space: nowrap;
}
.modal-obs { margin-top: 3px; color: var(--texto-suave); font-size: .74rem; line-height: 1.3; }
.modal-obs span { white-space: nowrap; }

/* A base é o mínimo para "Enviar para" inteiro, o ícone e a folga (o botão não tem largura
   própria, ver .botao-envio): menos que isso e ele vai para a linha de baixo, com a largura toda. */
.modal-compra .botao-envio { flex: 1 1 calc(5.3em + 49px); min-width: 0; padding: 6px 12px; line-height: 1.15; }
.modal-compra .botao-envio svg { width: 22px; height: 22px; }

/* Com a janela aberta o aviso mora na barra (avisar em catalogo.js) e aparece logo acima dela. */
.modal-compra > .aviso { position: absolute; bottom: calc(100% + 10px); }

.modal-acoes { display: grid; gap: 10px; }
/* Colunas em "em": com a letra do navegador aumentada elas ficam largas e os botões passam para
   uma por linha, em vez de "Compartilhar" vazar do botão. */
.modal-acoes-sec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.1em), 1fr));
  gap: 8px;
}
/* Menos folga dos lados: "Copiar link" e "Compartilhar" cabem numa linha até em 320px. */
.modal-acoes-sec .botao { padding: 0 10px; }

.copiar-manual { display: grid; gap: 6px; font-size: .86rem; color: var(--texto-suave); }
.copiar-manual input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--destaque-foco);
  border-radius: var(--raio-pequeno);
  background: var(--destaque-claro);
  color: var(--texto);
  font-size: 16px;
}

@media (min-width: 760px) {
  .modal {
    width: calc(100% - 48px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-width: 900px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    margin: auto;
    border-radius: 22px;
  }
  .modal-caixa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .modal-fechar-area { grid-column: 1 / -1; }
  .modal-foto {
    --folga-foto: 24px;
    height: auto;
    min-height: 420px;
    border-bottom: 0;
    border-right: 1px solid #f1ede5;
  }
  /* À direita sobram 28px além dos 30: é onde o X de fechar flutua, e nada do texto passa por
     baixo dele. A barra do preço vai até a borda da janela e ocupa essa faixa (não tem X ali). */
  .modal-info { padding: 34px 58px 30px 30px; justify-content: center; }
  .modal-compra { margin: 2px -58px 0 -30px; padding: 12px 30px; }
  .modal-preco { font-size: 1.9rem; }
}

/* Celular deitado (ou janela baixa): a foto fica parada à esquerda, da altura da janela,
   enquanto o lado do preço rola com a barra de enviar grudada embaixo. */
@media (min-width: 760px) and (max-height: 620px) {
  .modal-foto {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 0;
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
  }
  .modal-info { padding-top: 22px; }
}

/* ---------- Aviso rápido ---------- */

.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 60;
  /* max-content: com left 50% a caixa encolheria para a metade da tela e quebraria à toa. */
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 12px;
  background: #151515;
  color: #fff;
  box-shadow: 0 8px 28px rgb(0 0 0 / 25%);
  font-size: .92rem;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity .2s, transform .2s;
}
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}