/* ============================================================
   Catálogo Cheiro de Menina
   ============================================================
   Distribuidora de cosmético popular: 74% dos produtos custam até
   R$15. O assunto é abundância e preço, não sofisticação discreta —
   então a linguagem aqui é a do ENCARTE de distribuidora: campo de
   cor chapado, preço grande, foto recortada. Chapado de propósito:
   zero gradiente, zero sombra difusa. A precisão vem do espaçamento
   e da tipografia, não de efeito.

   Estrutura segue Mercado Livre (banner, categorias, carrossel,
   grade densa) porque foi o que o cliente pediu. A identidade é
   nossa.
   ============================================================ */

:root {
  /* cor */
  --ameixa: #24061C;        /* tinta - batom escuro, não preto */
  --ameixa-70: #6B4A61;
  --choque: #D6006B;        /* laca - ação e preço.
     Era #FF0A6C, mais vibrante, mas branco em cima dava 3,81:1 e o botão
     Adicionar reprovava no minimo de 4,5:1. Este escurece o suficiente pra
     dar 5,16:1 sem sair do magenta. */
  --choque-fundo: #FFE3EE;
  --manga: #FFC220;         /* campo de oferta */
  --rosa-papel: #FFF0F4;    /* caixas de apoio: quadro de logotipo, campo,
     resposta do frete. Era tambem o fundo da pagina, ate a pagina ficar
     branca - o rosa continua util como apoio, so nao manda mais no fundo. */
  --pagina: #FFFFFF;        /* fundo da pagina */
  --sombra-card: 0 1px 2px rgba(36, 6, 28, .05), 0 4px 14px rgba(36, 6, 28, .07);
  --sombra-card-alta: 0 2px 4px rgba(36, 6, 28, .07), 0 10px 26px rgba(36, 6, 28, .11);
  --branco: #FFFFFF;
  --folha: #00875A;         /* estoque, WhatsApp */
  --risco: #F2D9E2;         /* divisor */

  /* medida */
  --raio-card: 18px;
  --gap: clamp(.55rem, 2.4vw, 1rem);
  --margem: clamp(.85rem, 4vw, 2.5rem);
  --largura: 1240px;

  /* tipo */
  --display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --corpo: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* No celular a grade tem 9px de respiro entre cards; sombra de 14px de borrao
   vazaria de um pro outro e o vao ficaria encardido. Menos borrao ali. */
@media (max-width: 699px) {
  :root {
    --sombra-card: 0 1px 2px rgba(36, 6, 28, .05), 0 2px 6px rgba(36, 6, 28, .06);
  }
}

* { box-sizing: border-box; }

/* REGRA DE SEGURANCA - deixe no topo.

   O `[hidden] { display: none }` do navegador tem especificidade zero, entao
   QUALQUER regra nossa com `display` o vence. Ja mordeu tres vezes:
   `.botao-mais { display: block }` deixava "Ver mais produtos" na tela mesmo
   sem mais produtos; `.contador-carrinho { display: grid }` mostrava um "0" no
   carrinho vazio; `.marcas-indice { display: flex }` reservava 17px de faixa
   invisivel. O `!important` aqui e proposital: `hidden` no HTML e uma
   afirmacao de que o elemento NAO existe pra quem ve, e nada de estilo deveria
   poder discordar disso. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pagina);
  color: var(--ameixa);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

button, input, select, textarea { font: inherit; color: inherit; }

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

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ameixa);
  color: var(--branco);
  padding: .7rem 1rem;
  z-index: 100;
}
.pular:focus { left: 0; }

/* ============================================================ topo */

.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--choque);
  padding: .55rem var(--margem) .7rem;
}

.topo-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--largura);
  margin: 0 auto .5rem;
}

/* Logotipo e unidade lado a lado, não empilhados. Empilhado, a linha da
   unidade esticava o contêiner e o logotipo ficava numa caixa maior que o
   próprio desenho — parecendo pequeno sem motivo. Lado a lado, cada um tem
   a largura que precisa e sobra espaço no cabeçalho, que estava vazio.
   `align-items: center` com `flex-wrap` faz a unidade cair para baixo
   sozinha em telas estreitas, em vez de espremer o logotipo. */
.marca {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: .1rem .7rem;
  text-decoration: none;
  color: var(--branco);
  font-family: var(--display);
  line-height: 1;
  min-width: 0;
}

.marca-escrita { display: flex; align-items: baseline; gap: .3rem; }

/* O logotipo entra no lugar do nome escrito. `contain` e altura fixa mantêm
   o cabeçalho na mesma altura seja qual for a proporção da arte enviada. */
/* Altura medida, não chutada: o logotipo tem três linhas, e a menor
   ("DISTRIBUIDORA") ocupa 10% da altura. A 52px, "CHEIRO DE MENINA" sai com
   13 e 17px — legível de sobra; a linha fina vira um traço, que é como
   letra miúda de logotipo se comporta mesmo. Deixá-la legível exigiria 68px,
   e aí o cabeçalho comeria um quinto da tela do celular. */
.marca-logo-topo {
  height: clamp(44px, 11vw, 58px);
  width: auto;
  max-width: min(52vw, 200px);
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}

/* A unidade é informação de negócio, não enfeite: a loja já se prepara para
   ter Pará além do Maranhão, e o cliente precisa saber de qual está vendo. */
/* Fica ao lado do logotipo, separada por um fio — assim lê como legenda e
   não disputa atenção com a marca. Sem corte de texto: agora tem espaço. */
.marca-unidade {
  font-family: var(--corpo);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .02em;
  opacity: .9;
  white-space: nowrap;
}

/* Abaixo de 560px a legenda vai para a linha de baixo, por decisão e não
   por acaso: cabendo ao lado, sobravam 7px até o carrinho, e bastaria um
   nome de unidade um pouco mais longo (ou o Pará entrando) para colidir.
   Na linha de baixo ela também dispensa o fio separador, que solto embaixo
   do logotipo viraria um risco sem função. */
.marca-unidade { flex: 1 0 100%; }

@media (min-width: 560px) {
  .marca-unidade {
    flex: 0 1 auto;
    padding-left: .7rem;
    border-left: 1px solid rgba(255, 255, 255, .35);
  }
}
.marca-unidade:empty { display: none; }
.marca-cheiro { font-weight: 800; font-size: 1.32rem; letter-spacing: -.03em; }
.marca-de {
  font-family: var(--corpo);
  font-weight: 500;
  font-size: .7rem;
  opacity: .8;
  text-transform: lowercase;
}
.marca-menina { font-weight: 800; font-size: 1.32rem; letter-spacing: -.03em; }

.carrinho-botao {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: var(--branco);
  cursor: pointer;
  flex-shrink: 0;
}
.carrinho-botao:hover { background: rgba(255, 255, 255, .28); }

.carrinho-contador {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--manga);
  color: var(--ameixa);
  font-family: var(--display);
  font-weight: 800;
  font-size: .74rem;
}

.busca-caixa {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--largura);
  margin: 0 auto;
  background: var(--branco);
  border-radius: 999px;
  padding: 0 .9rem;
}

.busca-lupa { color: var(--ameixa-70); flex-shrink: 0; }

.busca-caixa input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: .68rem .6rem;
  font-size: .95rem;
}
.busca-caixa input:focus { outline: none; }
.busca-caixa:focus-within { box-shadow: 0 0 0 3px var(--ameixa); }

.busca-limpar {
  border: none;
  background: none;
  color: var(--ameixa-70);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .2rem;
}

/* ============================================================ banners */

.banners {
  max-width: var(--largura);
  margin: var(--gap) auto 0;
  padding: 0 var(--margem);
}

.banners-trilho {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--raio-card);
}
.banners-trilho::-webkit-scrollbar { display: none; }

/* O TRILHO e o container das medidas em cqw, nao o banner: unidade de
   container nunca mede o proprio elemento, so um ancestral. Como o banner
   ocupa 100% do trilho, 1cqw aqui e 1% da largura do banner. */
.banners-trilho,
.marca-banners-trilho { container-type: inline-size; }

/* Banner estreito (celular): duas fotos em vez de tres e sem logotipo, senao
   o texto fica espremido numa coluna de 100px. */
@container (max-width: 560px) {
  /* `.banner .banner-logo`, e nao so `.banner-logo`: a regra do logotipo vem
     depois desta no arquivo e define `display: inline-flex` - com a mesma
     especificidade, a ultima vence e o logotipo continuava no celular. */
  .banner-pilha img:nth-child(3),
  .banner .banner-logo { display: none; }
}

/* Logotipo da marca no banner automatico: sobre plaqueta branca, porque
   arte de marca nao foi feita pra ficar sobre o rosa ou o amarelo. */
.banner-logo {
  display: inline-flex;
  align-items: center;
  height: 5.5cqw;
  padding: .9cqw 1.6cqw;
  margin-bottom: 1.6cqw;
  background: var(--branco);
  border-radius: 1.2cqw;
}
.banner-logo img { height: 100%; width: auto; max-width: 22cqw; object-fit: contain; }
.banner-logo-escuro { background: var(--ameixa); }

/* o banner da marca rola ate a grade; sem isso o titulo para embaixo do
   cabecalho grudado */
#marca-titulo-lista { scroll-margin-top: 9rem; }

.banner {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2cqw;
  /* PROPORCAO FIXA 12:5 (1200 x 500), na home e nas marcas, em qualquer
     tela. Antes a altura vinha do conteudo: 1160x250 no computador e
     345x223 no celular - nenhuma arte cabia nas duas sem corte, e um
     banner enviado esticava o carrossel inteiro. Com a caixa fixa, o
     tamanho que o painel recomenda e o tamanho que aparece. */
  aspect-ratio: 12 / 5;
  padding: 4cqw 5cqw;
  border: none;
  border-radius: var(--raio-card);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  font-family: var(--corpo);
}

/* Os quatro pedaços do banner são <span> (para caberem dentro do <button>
   sem HTML inválido), e span é inline por natureza — sem `display: block`
   eles saem todos grudados na mesma linha. */
.banner-eyebrow {
  display: block;
  font-size: clamp(.58rem, 1.25cqw, .85rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
  margin: 0 0 .3rem;
}

.banner-nome {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.05rem, 4.6cqw, 3.4rem);
  line-height: .96;
  letter-spacing: -.035em;
  margin: 0 0 .35em;
  max-width: 12ch;
}

.banner-preco { display: block; font-size: clamp(.7rem, 1.7cqw, 1.1rem); font-weight: 500; margin: 0 0 .7em; }
.banner-preco strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(.9rem, 2.6cqw, 1.8rem);
  letter-spacing: -.02em;
}

.banner-cta {
  display: inline-block;
  padding: .45em 1.05em;
  border-radius: 999px;
  font-size: clamp(.68rem, 1.45cqw, 1rem);
  font-weight: 700;
}

/* as fotos recortadas, empilhadas como num encarte */
.banner-pilha {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.banner-pilha img {
  /* medida em cqw = fracao da largura do banner: a pilha cresce e
     encolhe junto com a caixa, e cabe nela em qualquer tela */
  width: 22cqw;
  height: 22cqw;
  object-fit: cover;
  border-radius: clamp(8px, 1.4cqw, 16px);
  background: var(--branco);
  border: 3px solid var(--branco);
}
.banner-pilha img:nth-child(1) { transform: rotate(-7deg); z-index: 1; }
.banner-pilha img:nth-child(2) { transform: rotate(3deg) translateY(-6px); margin-left: -6cqw; z-index: 2; }
.banner-pilha img:nth-child(3) { transform: rotate(9deg); margin-left: -6cqw; z-index: 3; }

.banners-pontos {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: -.35rem;
}

/* O ponto tem 7px de visual, mas o alvo de toque precisa ser grande:
   `content-box` + padding dao ~39x23px de area clicavel sem engordar o
   desenho. Dedo em tela de celular nao acerta 7px. */
.ponto {
  box-sizing: content-box;
  width: 7px;
  height: 7px;
  padding: 16px 8px;
  border: none;
  border-radius: 999px;
  background: var(--risco);
  background-clip: content-box;
  cursor: pointer;
}
.ponto[aria-selected="true"] { background: var(--choque); background-clip: content-box; width: 20px; }

/* ============================================================ seções */

.secao {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(1.3rem, 4vw, 2.1rem) var(--margem) 0;
}

.secao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}

.secao-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.05rem, 4vw, 1.4rem);
  letter-spacing: -.028em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.secao-selo {
  background: var(--manga);
  color: var(--ameixa);
  font-family: var(--corpo);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .22rem .45rem;
}

.secao-link {
  border: none;
  background: none;
  color: var(--choque);
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
  padding: .6rem .3rem;
}
.secao-link:hover { text-decoration: underline; }

.vitrine-conta { color: var(--ameixa-70); font-size: .82rem; }

/* ---------------------------------------------------- carrossel */

.carrossel {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: .3rem;
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel .card { flex: 0 0 clamp(148px, 42vw, 196px); scroll-snap-align: start; }

/* ============================================================ card */

.grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border-radius: var(--raio-card);
  overflow: hidden;
  /* Com a pagina branca, card branco sem sombra desaparece no fundo. A sombra
     e tingida de ameixa em vez de preta: cinza puro sobre rosa/branco desta
     paleta puxa pro sujo. */
  box-shadow: var(--sombra-card);
  transition: box-shadow .18s ease, transform .18s ease;
}
@media (hover: hover) {
  .card:hover { box-shadow: var(--sombra-card-alta); transform: translateY(-2px); }
}

.card-foto {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  background: var(--branco);
  cursor: pointer;
}
.card-foto img { width: 100%; height: 100%; object-fit: cover; }

.card-sem-foto {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--choque-fundo);
  color: var(--choque);
  font-family: var(--display);
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* selos: raio ZERO, contra o raio grande do card. mistura deliberada */
.selo {
  position: absolute;
  top: 0;
  left: 0;
  padding: .24rem .5rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.selo-oferta { background: var(--manga); color: var(--ameixa); }
.selo-fim { background: var(--risco); color: var(--ameixa-70); }

.card-corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: .6rem .7rem .7rem;
  gap: .12rem;
}

.card-marca {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ameixa-70);
}

.card-nome {
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 .35rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-precos { margin-top: auto; }

.card-de {
  font-size: .72rem;
  color: var(--ameixa-70);
  text-decoration: line-through;
}

.card-por {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--ameixa);
}

.card-unidade {
  font-family: var(--corpo);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: 0;
  color: var(--folha);
  /* Sem nowrap DE PROPOSITO: no card de 168px do celular nao cabe ao lado do
     preco e estourava a borda. Assim ele fica ao lado quando ha espaco (tela
     grande) e desce uma linha quando nao ha. */
  display: inline-block;
}

.card-consulte { font-size: .8rem; font-weight: 600; color: var(--ameixa-70); }

.card-economia {
  display: inline-block;
  color: var(--folha);
  font-size: .7rem;
  font-weight: 700;
}

/* ---------------------------------------------------- ações */

.add {
  width: 100%;
  margin-top: .5rem;
  padding: .5rem;
  border: none;
  border-radius: 999px;
  background: var(--choque);
  color: var(--branco);
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
}
.add:hover { background: var(--ameixa); }
.add[disabled] { background: var(--risco); color: var(--ameixa-70); cursor: not-allowed; }

.contador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .5rem;
  border-radius: 999px;
  background: var(--choque-fundo);
  padding: 2px;
}
.contador button {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--branco);
  color: var(--choque);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.contador button:hover { background: var(--choque); color: var(--branco); }
.contador-valor {
  font-family: var(--display);
  font-weight: 800;
  font-size: .95rem;
  color: var(--ameixa);
}

/* ============================================================ filtros */

.filtros { margin-bottom: 1rem; }

.filtros-chips {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .5rem;
}
.filtros-chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: .4rem .8rem;
  border: 1.5px solid var(--risco);
  border-radius: 999px;
  background: var(--branco);
  color: var(--ameixa-70);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--choque); color: var(--choque); }
.chip.ativa { background: var(--ameixa); border-color: var(--ameixa); color: var(--branco); }

/* Três seletores: no celular não cabem lado a lado sem cortar o texto, então
   quebram em 2 + 1 (o terceiro ocupa a linha de baixo inteira). */
.filtros-linha { display: flex; flex-wrap: wrap; gap: .5rem; }

.filtros-linha select {
  flex: 1 1 8.5rem;
  min-width: 0;
  padding: .52rem .7rem;
  border: 1.5px solid var(--risco);
  border-radius: 10px;
  background: var(--branco);
  font-size: .84rem;
  font-weight: 500;
}

.filtros-limpar {
  margin-top: .6rem;
  border: none;
  background: none;
  color: var(--choque);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ============================================================ vazio */

.vazio { text-align: center; padding: 3rem 1rem; }
.vazio-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  margin: 0 0 .3rem;
}
.vazio-dica { color: var(--ameixa-70); font-size: .9rem; margin: 0 0 1.1rem; }

.botao-secundario {
  padding: .6rem 1.3rem;
  border: 2px solid var(--ameixa);
  border-radius: 999px;
  background: none;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
}
.botao-secundario:hover { background: var(--ameixa); color: var(--branco); }

.botao-mais {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 1.5rem auto 0;
  padding: .75rem;
  border: 2px solid var(--ameixa);
  border-radius: 999px;
  background: none;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
}
.botao-mais:hover { background: var(--ameixa); color: var(--branco); }

/* ============================================================ rodapé */

.rodape {
  margin-top: 3rem;
  padding: 2rem var(--margem) 6rem;
  background: var(--ameixa);
  color: var(--branco);
  text-align: center;
}
.rodape p { margin: .25rem 0; font-size: .8rem; opacity: .75; }
.rodape-marca {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.03em;
  opacity: 1 !important;
  margin-bottom: .5rem !important;
}
.rodape-data { font-size: .72rem; opacity: .5 !important; }
.rodape-credito { font-size: .78rem !important; opacity: .85 !important; margin-top: 1.1rem !important; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.18); }
.rodape-credito a { color: inherit; text-decoration: none; }
.rodape-credito a:hover { text-decoration: underline; }
.rodape-credito strong { font-weight: 800; letter-spacing: .01em; }

/* ============================================================ barra fixa */

.barra-pedido {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem var(--margem);
  background: var(--ameixa);
  color: var(--branco);
}
.barra-pedido[hidden] { display: none; }

.barra-pedido-info { display: flex; flex-direction: column; line-height: 1.15; }
.barra-pedido-itens { font-size: .72rem; opacity: .7; }
.barra-pedido-total {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.02em;
}

.botao-principal {
  padding: .6rem 1.4rem;
  border: none;
  border-radius: 999px;
  background: var(--choque);
  color: var(--branco);
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
}
.botao-principal:hover { background: var(--manga); color: var(--ameixa); }

/* ============================================================ sobreposições */

.fundo-escuro {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  background: rgba(36, 6, 28, .55);
}
.fundo-escuro[hidden] { display: none; }

.fechar {
  position: absolute;
  top: .55rem;
  right: .55rem;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--branco);
  color: var(--ameixa);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

/* ficha do produto */
.ficha {
  position: relative;
  width: calc(100% - 1.6rem);
  max-width: 420px;
  max-height: 92vh;
  margin: auto;
  overflow-y: auto;
  background: var(--branco);
  border-radius: var(--raio-card);
}

.ficha-foto { position: relative; aspect-ratio: 1; background: var(--choque-fundo); }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; }

.ficha-corpo { padding: 1rem 1.15rem 1.4rem; }

.ficha-categoria {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--choque);
  margin: 0 0 .25rem;
}

.ficha-nome {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.18rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .2rem;
}

.ficha-marca { font-size: .8rem; color: var(--ameixa-70); margin: 0 0 .7rem; }

.ficha-preco {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.ficha-preco .valor {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -.035em;
  line-height: 1;
}
.ficha-preco .antigo { font-size: .95rem; color: var(--ameixa-70); text-decoration: line-through; }

.ficha-descricao {
  font-size: .87rem;
  line-height: 1.5;
  white-space: pre-line;
  margin: 0 0 1rem;
}

.ficha-codigo {
  margin: .8rem 0 0;
  font-size: .72rem;
  color: var(--ameixa-70);
}

.ficha-acao .add, .ficha-acao .contador { margin-top: 0; }

/* gaveta do pedido */
.gaveta {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 430px;
  margin-left: auto;
  background: var(--rosa-papel);
}

.gaveta-topo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.15rem;
  background: var(--ameixa);
  color: var(--branco);
}

.gaveta-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  margin: 0;
}

.fechar-gaveta {
  position: static;
  background: rgba(255, 255, 255, .16);
  color: var(--branco);
}

.gaveta-itens { flex: 1; overflow-y: auto; padding: .8rem 1.15rem; }

/* TELA BAIXA: a gaveta inteira rola, nao so a lista.
   O rodape (total, minimo, nome, WhatsApp, vendedor, recado, botao) passa de
   500px e nao encolhe. Num celular com ~700px uteis sobrava pra lista uma
   faixa de 60px - a cliente via meio produto e achava que o pedido sumiu
   (06/10/2026). Aqui a lista ocupa o que precisa e o rodape vem embaixo dela;
   a faixa do titulo fica grudada no topo pra o X continuar a mao. Em tela
   alta continua como antes: rodape fixo e so a lista rolando. */
@media (max-height: 940px) {
  .gaveta { overflow-y: auto; overscroll-behavior: contain; }
  .gaveta-itens { flex: 1 0 auto; overflow: visible; }
  .gaveta-topo { position: sticky; top: 0; z-index: 6; }
}

.linha {
  display: flex;
  gap: .7rem;
  padding: .7rem;
  margin-bottom: .5rem;
  background: var(--branco);
  border-radius: 14px;
}

.linha-foto {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
  background: var(--choque-fundo);
}

.linha-info { flex: 1; min-width: 0; }
.linha-nome {
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 .1rem;
}
.linha-unitario { font-size: .72rem; color: var(--ameixa-70); margin: 0 0 .4rem; }

.linha-baixo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.linha-contador { display: flex; align-items: center; gap: .45rem; }
.linha-contador button {
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--risco);
  border-radius: 50%;
  background: var(--branco);
  color: var(--choque);
  font-family: var(--display);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.linha-contador button:hover { border-color: var(--choque); }
.linha-qtd { font-family: var(--display); font-weight: 800; font-size: .88rem; min-width: 16px; text-align: center; }

.linha-subtotal { font-family: var(--display); font-weight: 800; font-size: .95rem; letter-spacing: -.02em; }

.linha-tirar {
  border: none;
  background: none;
  color: var(--ameixa-70);
  font-size: .72rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.gaveta-vazia { text-align: center; padding: 3rem 1rem; color: var(--ameixa-70); }
.gaveta-vazia strong {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ameixa);
  margin-bottom: .3rem;
}

.gaveta-pe {
  padding: .9rem 1.15rem 1.15rem;
  background: var(--branco);
  border-top: 1px solid var(--risco);
}

.gaveta-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .8rem;
  font-size: .9rem;
}
.gaveta-total strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -.035em;
}

.rotulo {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ameixa-70);
  margin-bottom: .25rem;
}

.campo {
  width: 100%;
  padding: .58rem .75rem;
  margin-bottom: .65rem;
  border: 1.5px solid var(--risco);
  border-radius: 10px;
  background: var(--rosa-papel);
  font-size: .9rem;
  resize: vertical;
}

select.campo { cursor: pointer; resize: none; }
/* campo obrigatório que ficou em branco na hora de enviar */
.campo-erro { border-color: var(--choque); background: var(--choque-fundo); }

.botao-whats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .8rem;
  border: none;
  border-radius: 999px;
  background: var(--folha);
  color: var(--branco);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
}
.botao-whats:hover { filter: brightness(1.1); }
.botao-whats[disabled] { background: var(--risco); color: var(--ameixa-70); cursor: not-allowed; }

.botao-texto {
  width: 100%;
  margin-top: .45rem;
  padding: .45rem;
  border: none;
  background: none;
  color: var(--ameixa-70);
  font-size: .8rem;
  cursor: pointer;
  text-decoration: underline;
}

.aviso {
  margin: .8rem 0 0;
  padding: .6rem .75rem;
  border-radius: 10px;
  background: var(--manga);
  color: var(--ameixa);
  font-size: .78rem;
  line-height: 1.45;
}
.aviso code {
  font-family: ui-monospace, monospace;
  font-size: .74rem;
  background: rgba(36, 6, 28, .1);
  padding: 0 .2rem;
}

/* confirmação curta ao adicionar */
.aviso-flutuante {
  position: fixed;
  left: 50%;
  bottom: 5.2rem;
  z-index: 60;
  transform: translateX(-50%);
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: var(--ameixa);
  color: var(--branco);
  font-size: .84rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.aviso-flutuante[hidden] { display: none; }

/* ============================================================ telas grandes */

@media (min-width: 620px) {
  .grade { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .grade { grid-template-columns: repeat(4, 1fr); }
  .filtros { display: flex; align-items: flex-start; gap: 1rem; }
  .filtros-chips { flex: 1; padding-bottom: 0; }
  .filtros-linha { flex: 0 0 480px; flex-wrap: nowrap; }
  .filtros-limpar { margin-top: 0; }
}

@media (min-width: 1120px) {
  .grade { grid-template-columns: repeat(5, 1fr); }
}

/* respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .banner-pilha img { transform: none !important; margin-left: 4px !important; }
}

/* ============================================================ embalagens
   602 dos 1.479 produtos são vendidos de mais de um jeito (avulso, BOX,
   KIT, CAIXA MASTER). O card só AVISA que existe caixa; escolher é na
   ficha, senão cada card viraria um formulário. */

.card-embalagens {
  display: block;
  margin-top: .1rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--folha);
}

.opcoes {
  display: grid;
  gap: .4rem;
  margin-bottom: 1rem;
}

.opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .6rem .8rem;
  border: 1.5px solid var(--risco);
  border-radius: 12px;
  background: var(--branco);
  cursor: pointer;
  text-align: left;
}
.opcao:hover { border-color: var(--choque); }

.opcao.escolhida {
  border-color: var(--ameixa);
  background: var(--choque-fundo);
}

.opcao-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.opcao-rotulo { font-size: .84rem; font-weight: 600; }

/* quantas unidades vêm na caixa e quanto sai cada uma: é o que decide a
   compra de quem revende, então fica logo abaixo do nome da embalagem */
.opcao-detalhe {
  font-size: .72rem;
  font-weight: 500;
  color: var(--folha);
}

/* Cada embalagem pode ter promocao propria (o ERP cria uma unidade paralela:
   PROMOKIT, PROBOX). O preco cheio riscado ao lado mostra que o desconto e
   daquela embalagem, e nao da unidade. */
.opcao-antes {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  color: var(--ameixa-70);
  text-decoration: line-through;
}

.opcao-preco {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.linha-emb {
  display: inline-block;
  padding: 0 .3rem;
  border-radius: 4px;
  background: var(--choque-fundo);
  color: var(--ameixa);
  font-size: .68rem;
  font-weight: 700;
}

/* ============================================================ banner próprio
   O que o painel administrador cria: a arte manda, e o texto (se houver) fica
   sobre um véu escuro na base — sem o véu, título claro sobre foto clara
   some, e não dá pra controlar que imagem a loja vai subir. */

.banner-proprio {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
}

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

.banner-parado { cursor: default; }

.banner-proprio-texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: 1.6rem 1.2rem .9rem;
  text-align: left;
  color: var(--branco);
  background: linear-gradient(to top, rgba(36, 6, 28, .78), rgba(36, 6, 28, 0));
}

.banner-proprio-texto .banner-nome { margin: 0; max-width: none; }

.banner-proprio-linha {
  font-size: .84rem;
  font-weight: 600;
}

/* ============================================================ departamentos
   Menu com dois níveis, no formato do Beleza na Web: os departamentos numa
   faixa, e o submenu abrindo em painel largo. No computador abre no hover —
   CSS puro, sem JS. No celular, onde hover não existe, o mesmo bloco abre
   ao toque (a classe .aberto vem do JS) e vira lista empilhada. */

/* Agora vive fora do <header>, então precisa do próprio fundo para
   continuar lendo como parte da faixa da marca quando a página está no topo. */
.departamentos {
  background: var(--choque);
  padding: 0 var(--margem) .5rem;
  position: relative;
  z-index: 30;
}

.dep-lista {
  max-width: var(--largura);
  margin: 0 auto;
}

/* QUEBRA DE LINHA, NAO ROLAGEM LATERAL.

   ERRO QUE ISSO CORRIGE: era `overflow-x: auto`, e contêiner com overflow
   RECORTA o que sai dele - inclusive um menu posicionado por cima. No
   computador o painel de subcategorias abria e era cortado a zero (parecia que
   clicar nao fazia nada). No celular, onde o painel fica no fluxo, a faixa toda
   virava uma barra que a cliente tinha que arrastar pro lado pra achar as
   categorias depois de "Maquiagem".
   
   Sem overflow o painel aparece inteiro, e os departamentos que nao couberem
   descem uma linha - oito nomes cabem numa linha no computador e em tres no
   celular. */
.dep-lista {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  list-style: none;
  padding: 0 0 .1rem;
}

.dep { position: relative; flex: 0 0 auto; }

.dep-nome {
  border: none;
  background: none;
  color: var(--branco);
  font-family: var(--corpo);
  font-size: .84rem;
  font-weight: 600;
  padding: .45rem .7rem;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.dep-nome:hover { background: rgba(255, 255, 255, .18); }

.dep-painel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 45;
  min-width: 260px;
  max-width: min(94vw, 620px);
  margin-top: .35rem;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--branco);
  border-radius: 0 0 var(--raio-card) var(--raio-card);
  box-shadow: 0 18px 40px rgba(36, 6, 28, .18);
}

.dep:hover .dep-painel,
.dep.aberto .dep-painel { display: block; }

/* PONTE INVISIVEL sobre o vao.

   O painel abre 5,6px abaixo do botao (o `margin-top`), e nesse vao o mouse
   nao esta nem no botao nem no painel: `.dep:hover` fica falso e o menu fecha
   no meio do caminho pra baixo. Esta faixa transparente pertence ao painel e
   cobre o vao, entao o mouse nunca sai do elemento no percurso. */
.dep-painel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -.4rem;
  height: .4rem;
}

.dep-painel-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: .95rem;
  margin: 0 0 .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--risco);
}

.dep-painel-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 1.4rem;
}
@media (min-width: 900px) { .dep-painel-lista { columns: 3; } }

.dep-item {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: .3rem 0;
  font-size: .84rem;
  color: var(--ameixa);
  cursor: pointer;
  font-family: var(--corpo);
  break-inside: avoid;
}
.dep-item:hover { color: var(--choque); text-decoration: underline; }

/* no celular o painel ocupa a largura toda e empurra o conteúdo */
@media (max-width: 719px) {
  .dep-painel {
    position: static;
    box-shadow: none;
    border: 1px solid var(--risco);
    border-radius: 12px;
    max-width: none;
    margin-top: .4rem;
  }
  .dep:hover .dep-painel { display: none; }
  .dep.aberto .dep-painel { display: block; }
  /* o painel aberto toma a linha inteira; com `flex-wrap` isso agora empurra
     os departamentos seguintes pra baixo em vez de esconde-los na rolagem */
  .dep.aberto { flex: 1 0 100%; }
  .dep-painel-lista { columns: 2; }
}

/* ============================================================ marcas */

.secao-marcas { padding-top: clamp(1rem, 3vw, 1.6rem); }

.marcas-trilho {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: .3rem;
}
.marcas-trilho::-webkit-scrollbar { display: none; }

.marca-bloco {
  flex: 0 0 clamp(120px, 33vw, 150px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .5rem .55rem .65rem;
  border: 1px solid var(--risco);
  border-radius: var(--raio-card);
  background: var(--branco);
  cursor: pointer;
  text-align: left;
  font-family: var(--corpo);
  transition: border-color .18s ease;
}

/* SEM SOMBRA AQUI, so a borda de cabelo.

   ERRO QUE ISSO CORRIGE: o bloco de marca ganhou a mesma sombra do card de
   produto e apareceu uma faixa cinza atras da fileira inteira - parecia defeito
   de renderizacao, mas nao ha nenhum elemento cinza no DOM: e a soma dos
   borroes. O bloco e baixo (123px) e sao muitos lado a lado (30 no carrossel,
   73 na grade da pagina, esta com 10px de vao), entao os borroes se encontram e
   formam uma tira continua. O card de produto e alto e sao 5 por linha: ali as
   sombras ficam separadas e a sombra continua valendo.

   O levantar no hover saiu junto: dentro do carrossel, que rola na horizontal,
   o bloco subia 2px e o vizinho parecia tremer. */
@media (hover: hover) {
  .marca-bloco:hover { border-color: var(--choque); }
}

/* Com logotipo: `contain` para não cortar a arte da marca. Sem logotipo:
   o próprio nome vira o selo, centralizado no mesmo espaço — assim o
   carrossel fica alinhado tenha logo ou não. */
.marca-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: var(--rosa-papel);
  margin-bottom: .35rem;
  padding: .5rem;
}
.marca-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.marca-nome {
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ameixa);
  text-align: center;
}

/* Card sem logotipo nao ganha a linha do nome (o nome ja E a arte). Tentei
   fazer a caixa dele crescer pra preencher a altura da linha que falta, mas ai
   os quadros rosas de uma mesma fileira ficavam com alturas diferentes (95px
   com logo, 111px sem) - e o quadro tem fundo proprio, entao o desalinho
   aparece. Melhor manter TODO quadro na mesma altura e deixar a sobra como
   espaco branco embaixo, que le como respiro do card. */

.marca-logo-texto {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ameixa);
  text-align: center;
  padding: .5rem .4rem;
  hyphens: auto;
}


/* ============================================================ página de marca */

.pagina-marca {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(.8rem, 3vw, 1.5rem) var(--margem) 0;
}
.pagina-marca[hidden] { display: none; }

/* ---------- Todas as marcas (#marcas) ---------- */

.marcas-ordem {
  display: flex;
  gap: .4rem;
  margin: .8rem 0 .2rem;
}

.pagina-marcas {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(.8rem, 3vw, 1.5rem) var(--margem) 2rem;
}
.pagina-marcas[hidden] { display: none; }

.marcas-cabecalho { margin-bottom: 1rem; }

/* Atalho por letra. Fica grudado no topo ao rolar porque a lista tem 74
   marcas: sem isso, quem esta no P precisa voltar la em cima pra ir no V. */
.marcas-indice {
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .5rem 0;
  margin-bottom: .5rem;
  background: var(--pagina);
  border-bottom: 1px solid var(--risco);
}
.indice-letra {
  /* 36px: mesmo alvo de toque que se usou nos pontos dos banners, depois de
     eles terem ficado com 7px e serem impossiveis de acertar no dedo. */
  min-width: 36px;
  min-height: 36px;
  padding: .2rem .4rem;
  border: 1px solid var(--risco);
  border-radius: 8px;
  background: var(--branco);
  color: var(--ameixa);
  font-family: var(--display);
  font-weight: 800;
  font-size: .82rem;
  cursor: pointer;
}
.indice-letra:hover { border-color: var(--choque); color: var(--choque); }

.marcas-letra {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ameixa-70);
  margin: 1.2rem 0 .5rem;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--risco);
  /* desconta o cabecalho grudado MAIS o indice, senao o pulo por letra
     para com o titulo escondido atras deles. */
  scroll-margin-top: calc(var(--altura-cabecalho, 4rem) +
                          var(--altura-indice, 0px) + .5rem);
}

/* Grade em vez do trilho do carrossel: aqui a lista e pra ser percorrida
   inteira, entao os blocos quebram linha em vez de rolarem de lado. */
.marcas-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  /* Todas as fileiras com a mesma altura. Sem isso, fileira so de marcas sem
     logotipo ficava 16px mais baixa que a vizinha (nao tem a linha do nome), e
     a grade descia serrilhada. */
  grid-auto-rows: 1fr;
  gap: .6rem;
}
.marcas-grade .marca-bloco { flex: none; scroll-snap-align: none; }


/* Grudar o indice so vale onde ele ocupa uma linha. No celular sao 3 ou 4
   linhas de letra, e deixar isso fixo tiraria um sexto da tela de quem esta
   justamente tentando ver marcas. */
@media (min-width: 700px) {
  .marcas-indice {
    position: sticky;
    top: var(--altura-cabecalho, 0px);
  }
}






.marca-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 6vw, 2.3rem);
  letter-spacing: -.035em;
  line-height: 1;
  margin: 0 0 .2rem;
}
.marca-resumo { font-size: .86rem; color: var(--ameixa-70); margin: 0; }

.marca-corpo { display: block; }

.marca-lateral { margin-bottom: 1.2rem; }

.lateral-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: .9rem;
  margin: 0 0 .5rem;
}

.lateral-lista { list-style: none; margin: 0; padding: 0; }

.lateral-item {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: .42rem .5rem;
  border-radius: 8px;
  font-size: .85rem;
  color: var(--ameixa);
  cursor: pointer;
  font-family: var(--corpo);
}
.lateral-item span { color: var(--ameixa-70); font-size: .78rem; }
.lateral-item:hover { background: var(--choque-fundo); }
.lateral-item.ativo { background: var(--ameixa); color: var(--branco); font-weight: 700; }
.lateral-item.ativo span { color: rgba(255, 255, 255, .7); }

/* no computador a lateral vira coluna fixa, como na referência */
@media (min-width: 900px) {
  /* a lateral ocupa a coluna da esquerda nas duas linhas; a abertura
     (banner + nome) e a grade dividem a coluna da direita */
  .marca-corpo {
    display: grid;
    grid-template-columns: 232px 1fr;
    grid-template-areas: "lateral abertura" "lateral grade";
    gap: 0 1.8rem;
    align-items: start;
  }
  .marca-abertura { grid-area: abertura; }
  .marca-lateral { grid-area: lateral; }
  .marca-conteudo { grid-area: grade; }
  .marca-lateral {
    position: sticky;
    /* tem que ser MAIOR que a altura do cabeçalho fixo (148px no
       computador), senão a lateral desliza por baixo dele ao rolar */
    top: 162px;
    margin-bottom: 0;
    padding: 1rem;
    border: 1px solid var(--risco);
    border-radius: var(--raio-card);
    background: var(--branco);
  }
}

/* logotipo branco vazado: só é legível sobre a cor escura da identidade */
.marca-logo-escuro { background: var(--ameixa); }

/* ============================================================ setas
   Discretas de propósito: são navegação de apoio, não a ação principal da
   página — quem manda é o card do produto. Por isso 30px, contorno fino e
   sem sombra pesada.

   Nas prateleiras ficam no cabeçalho da seção, alinhadas com o "Ver todas":
   nunca cobrem produto e estão sempre no mesmo canto, então o olho aprende
   onde procurar. No banner ficam sobrepostas, porque ele não tem cabeçalho.

   No celular somem: quem está no toque desliza com o dedo. */

.setas { display: none; }
.setas[hidden] { display: none !important; }

.seta {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--risco);
  border-radius: 50%;
  background: var(--branco);
  color: var(--ameixa-70);
  cursor: pointer;
}
.seta:hover:not(:disabled) { border-color: var(--ameixa); color: var(--ameixa); }
.seta:disabled { opacity: .3; cursor: default; }
.seta[hidden] { display: none; }

/* ---- no cabeçalho da prateleira */

.setas-topo { gap: .3rem; }

@media (min-width: 720px) {
  .setas-topo { display: flex; align-items: center; }
  /* empurra as setas pra ponta direita, deixando o "Ver todas" ao lado */
  .secao-topo { gap: .6rem; }
  .secao-topo .secao-titulo { margin-right: auto; }
}

/* ---- sobreposta, só no banner */

.tem-setas { position: relative; }

.setas-sobre .seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, .92);
  border-color: transparent;
  color: var(--ameixa);
}
.setas-sobre .seta:hover { background: var(--branco); }
/* A seção `.banners` tem margem interna, e o banner começa depois dela.
   Sem somar essa margem, a seta cairia no vão rosa ao lado do banner em vez
   de sobre ele. */
.setas-sobre .seta-esq { left: calc(var(--margem) + 10px); }
.setas-sobre .seta-dir { right: calc(var(--margem) + 10px); }

@media (min-width: 720px) {
  .setas-sobre { display: block; }
}

/* ============================================================ página de marca
   No formato da referência: barra lateral à esquerda com o logotipo e as
   categorias; na coluna da direita, o banner da marca abrindo a página,
   depois o nome e só então a grade. */

.caminho {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 0 1rem;
  font-size: .82rem;
}

.caminho-link {
  border: none;
  background: none;
  padding: 0;
  color: var(--choque);
  font-family: var(--corpo);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.caminho-link:hover { text-decoration: underline; }
.caminho-sep { color: var(--ameixa-70); }
.caminho-atual { color: var(--ameixa-70); }

/* ---- banner da marca */

.marca-banners { position: relative; margin-bottom: 1.4rem; }
.marca-banners[hidden] { display: none; }

.marca-banners-trilho {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--raio-card);
}
.marca-banners-trilho::-webkit-scrollbar { display: none; }

.marca-banners-trilho .banner {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* aqui a seta é posicionada pelo próprio trilho, que já começa na borda
   do conteúdo — sem a margem extra que o banner da home precisa */
.marca-banners .setas-sobre .seta-esq { left: 10px; }
.marca-banners .setas-sobre .seta-dir { right: 10px; }

/* ---- cabeçalho do nome */

.marca-cabecalho {
  padding-bottom: .9rem;
  margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--risco);
}

.marca-titulo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.45rem, 5vw, 2.1rem);
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0 0 .2rem;
}

/* o risco na diagonal ao lado do nome, como na referência */
.marca-risco {
  display: inline-block;
  width: 14px;
  height: 20px;
  flex-shrink: 0;
  background: var(--choque);
  clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%);
}

.marca-resumo { font-size: .86rem; color: var(--ameixa-70); margin: 0; }

/* ---- logotipo na lateral */

.lateral-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 74px;
  margin-bottom: .9rem;
  padding: .6rem;
  border-radius: 12px;
  background: var(--rosa-papel);
}
.lateral-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lateral-logo-escuro { background: var(--ameixa); }

.lateral-marca {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  margin: 0 0 .9rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--risco);
}

/* ============================================================ entrega
   Fica logo acima do botão de enviar porque é a última dúvida antes de
   fechar o pedido. */

.frete { margin-bottom: .9rem; }
.frete[hidden] { display: none; }

.frete-linha { display: flex; gap: .5rem; margin-bottom: .5rem; }
.campo-cep { flex: 1; margin-bottom: 0; letter-spacing: .04em; }

.botao-cep {
  flex-shrink: 0;
  padding: 0 1rem;
  border: 1.5px solid var(--ameixa);
  border-radius: 10px;
  background: none;
  color: var(--ameixa);
  font-family: var(--corpo);
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
}
.botao-cep:hover { background: var(--ameixa); color: var(--branco); }

/* Pedido minimo. Rosa enquanto falta (e informacao, nao erro); verde quando
   bate, igual a resposta boa da entrega. Tocar em enviar abaixo do minimo
   chama a atencao pra caixa em vez de so mostrar um aviso que some. */
.minimo {
  margin: -.2rem 0 .85rem;
  padding: .6rem .8rem;
  border-radius: 10px;
  background: var(--rosa-papel);
  color: var(--ameixa);
  font-size: .8rem;
  line-height: 1.35;
}
.minimo[hidden] { display: none; }
.minimo-texto { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.minimo-texto strong { font-size: .9rem; }
.minimo-texto span { font-size: .74rem; color: var(--ameixa-70); }
.minimo-trilho { height: 6px; margin-top: .45rem; border-radius: 99px; background: var(--risco); overflow: hidden; }
.minimo-barra { height: 100%; border-radius: 99px; background: var(--choque); transition: width .25s ease; }
.minimo-ok { background: #E4F5EA; color: #14663C; font-weight: 600; }
.minimo-alerta { box-shadow: 0 0 0 2px var(--choque); animation: minimo-pulo .35s ease 2; }
@keyframes minimo-pulo { 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .minimo-alerta { animation: none; } }

.frete-resposta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .65rem .8rem;
  border-radius: 10px;
  background: var(--rosa-papel);
  font-size: .82rem;
  line-height: 1.4;
}
.frete-resposta[hidden] { display: none; }
.frete-resposta strong { font-size: .86rem; }

.frete-ok { background: #E4F5EA; color: #14663C; }
.frete-ok .frete-valor {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}
.frete-dica { font-size: .76rem; opacity: .85; }

.frete-opcao {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
}
.frete-opcao-nome { font-weight: 700; font-size: .82rem; }
.frete-opcao-nome small {
  display: block;
  font-weight: 400;
  font-size: .74rem;
  opacity: .8;
}
/* A segunda opcao e real, mas sem preco fechado - fica separada por um risco e
   com peso menor, pra ninguem confundir "consulte" com o valor de cima. */
.frete-outra {
  margin-top: .45rem;
  padding-top: .45rem;
  border-top: 1px solid rgba(20, 102, 60, .18);
}
.frete-outra .frete-opcao-valor { font-size: .78rem; font-weight: 600; opacity: .9; }

/* Verde igual ao da rota propria: nos dois casos a resposta e sim, entregamos -
   o que muda e so quem define o envio. Rosa de alerta aqui fazia parecer
   recusa. */
.frete-fora { background: #E4F5EA; color: #14663C; }
.frete-erro { background: #FBE4E4; color: #B3261E; }

.frete-aviso {
  margin: .5rem 0 0;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--ameixa-70);
}

/* somas antes do total */
.gaveta-somas {
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--risco);
}
.gaveta-linha-soma {
  display: flex;
  justify-content: space-between;
  font-size: .84rem;
  color: var(--ameixa-70);
  padding: .12rem 0;
}
.gaveta-linha-soma[hidden] { display: none; }

/* ============================================================ depoimentos */

.secao-depoimentos { padding-bottom: 1rem; }
.secao-depoimentos[hidden] { display: none; }

.carrossel-depoimentos .depoimento {
  flex: 0 0 clamp(260px, 78vw, 340px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin: 0;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--branco);
  border-radius: var(--raio-card);
}

.depoimento-texto {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ameixa);
}
/* aspas como marca d'água, no lugar de ícone de citação genérico */
.depoimento-texto::before {
  content: '"';
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: .6;
  color: var(--choque);
  margin-bottom: .3rem;
}

.depoimento-quem { display: flex; align-items: center; gap: .6rem; margin-top: auto; }

.depoimento-inicial {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--choque-fundo);
  color: var(--choque);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
}

.depoimento-nome { display: block; font-size: .85rem; font-weight: 700; }
.depoimento-cidade { display: block; font-size: .76rem; color: var(--ameixa-70); }


/* ---------------------------------------------------- link com marcas bloqueadas
   (/novocatalogo/catalogos - ver o comentario do AMOSTRA no app.js) */

/* Faixa logo abaixo do menu, fora do <main>: a busca esconde as secoes do main
   e o convite pra pedir acesso tem que continuar a vista.

   Escura de proposito. A primeira versao era rosa-clara e sumia entre o menu
   pink e o fundo branco - o usuario pediu mais destaque. Ameixa com a primeira
   frase em amarelo e a unica faixa escura do topo, entao o olho para nela. */
.faixa-amostra {
  background: var(--ameixa);
  padding: .9rem var(--margem);
}
.faixa-amostra-dentro {
  max-width: var(--largura);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.faixa-amostra-icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--choque);
  color: var(--branco);
}
.faixa-amostra-icone .icone-cadeado { width: 22px; height: 22px; }
.faixa-amostra p {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--branco);
}
.faixa-amostra p strong { display: block; color: var(--manga); font-size: 1.05rem; }
.faixa-amostra-botao {
  flex: 0 0 auto;
  padding: .75rem 1.4rem;
  border: none;
  border-radius: 999px;
  background: var(--folha);
  color: var(--branco);
  font: 800 .95rem var(--corpo);
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
}
.faixa-amostra-botao:hover { filter: brightness(1.12); }
@media (max-width: 560px) {
  .faixa-amostra { padding: .8rem var(--margem); }
  .faixa-amostra-dentro { flex-wrap: wrap; gap: .6rem .75rem; }
  .faixa-amostra-icone { width: 36px; height: 36px; }
  .faixa-amostra-icone .icone-cadeado { width: 18px; height: 18px; }
  .faixa-amostra p { flex: 1 1 calc(100% - 50px); font-size: .86rem; }
  .faixa-amostra p strong { font-size: .92rem; }
  .faixa-amostra-botao { flex: 1 1 100%; }
}

/* Marca bloqueada: a arte apagada e coberta por uma camada escura com o
   cadeado e "Bloqueado" no meio do quadro. Com o cadeado so no canto (primeira
   versao) ela passava por mais uma marca da lista. Continua clicavel - e o
   clique que leva pro WhatsApp. */
.marca-bloqueada { background: #FBF7F8; }
.marca-bloqueada .marca-logo { position: relative; }
.marca-bloqueada .marca-logo img { filter: grayscale(1); opacity: .5; }
.marca-bloqueada .marca-nome { color: var(--ameixa-70); }
.marca-cadeado {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  background: rgba(36, 6, 28, .62);
  color: var(--branco);
}
.marca-cadeado .icone-cadeado { width: 24px; height: 24px; }
.marca-cadeado-texto {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media (hover: hover) {
  .marca-bloqueada:hover .marca-cadeado { background: rgba(36, 6, 28, .75); }
}

/* janela de "pedir acesso" */
.acesso {
  position: relative;
  width: calc(100% - 1.6rem);
  max-width: 380px;
  margin: auto;
  padding: 1.6rem 1.3rem 1.3rem;
  background: var(--branco);
  border-radius: var(--raio-card);
  text-align: center;
}
.acesso-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  aspect-ratio: 16 / 10;
  margin: 0 auto .7rem;
  padding: .5rem;
  border-radius: 12px;
  background: var(--rosa-papel);
}
.acesso-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.acesso-cadeado {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ameixa);
  color: var(--branco);
  margin-bottom: .5rem;
}
.acesso-cadeado .icone-cadeado { width: 20px; height: 20px; }
.acesso-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  margin: 0 0 .45rem;
  color: var(--ameixa);
}
.acesso-texto {
  margin: 0 0 1.1rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ameixa-70);
}
.acesso .botao-whats { text-decoration: none; }


/* ---------------------------------------------------- escolha do vendedor

   Campo que abre a lista, com a foto pequena ao lado do nome: a cliente
   reconhece o rosto de quem a atende, e a lista fechada ocupa uma linha - a
   primeira versao era uma grade de retratos e comia meia tela do carrinho. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.vendedor-escolha { position: relative; }

.vendedor-gatilho {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.vendedor-gatilho-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vendedor-gatilho-vazio { color: var(--ameixa-70); }
.vendedor-seta {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--ameixa-70);
}
/* link do vendedor (/novocatalogo/elane): nome fixo, cadeado no lugar da seta */
.vendedor-travado { cursor: default; }
.vendedor-travado .icone-cadeado { flex: 0 0 auto; color: var(--ameixa-70); }

.vendedor-lista {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + .25rem);
  max-height: 16rem;
  overflow-y: auto;
  padding: .25rem;
  border: 1px solid var(--risco);
  border-radius: 12px;
  background: var(--branco);
  box-shadow: var(--sombra-card-alta);
}
.vendedor-lista[hidden] { display: none; }

.vendedor-op {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .35rem .45rem;
  border: none;
  border-radius: 9px;
  background: none;
  font-family: var(--corpo);
  font-size: .88rem;
  color: var(--ameixa);
  text-align: left;
  cursor: pointer;
}
.vendedor-op-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) {
  .vendedor-op:hover { background: var(--rosa-papel); }
}
.vendedor-op.ativo { background: var(--rosa-papel); font-weight: 700; }

.vendedor-foto {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--rosa-papel);
  color: var(--ameixa-70);
  font-size: .68rem;
  font-weight: 800;
}
.vendedor-foto img { width: 100%; height: 100%; object-fit: cover; }
.vendedor-op.ativo .vendedor-foto { box-shadow: 0 0 0 2px var(--choque); }