/* Design tokens — a única fonte de verdade de cor, espaço, raio e sombra.
   Nenhum valor cru fora daqui (item 84). Se precisar de um número novo,
   ele nasce aqui com nome, não no meio de um componente. */

:root {
  /* ---------------------------------------------------------------- cor
     Base neutra. As pastéis são apoio — nunca preenchem a tela (item 4). */

  --c-fundo:            #FAF9F6;   /* off-white quente */
  --c-fundo-2:          #F5F0EA;   /* bege suave, seções alternadas */
  --c-superficie:       #FFFFFF;   /* cards */

  --c-rosa:             #EADDDD;
  --c-salvia:           #E1E8E0;
  --c-azul:             #E3E8EA;
  --c-areia:            #ECE4DA;

  --c-texto:            #33302E;   /* nunca preto absoluto */
  --c-texto-2:          #74706D;
  --c-texto-3:          #9A9693;

  --c-borda:            rgba(60, 50, 45, 0.08);
  --c-borda-forte:      rgba(60, 50, 45, 0.16);

  --c-acento:           #7A6A5F;   /* marrom acinzentado — links e realce neutro */
  --c-acento-suave:     #EFE9E3;
  --c-erro:             #A15C4E;   /* tijolo dessaturado: não se confunde com a marca */
  --c-sucesso:          #5F7A63;

  /* ---------------------------------------------------------------- marca
     O vermelho do logo. Entra em pouca coisa e sempre pelo mesmo motivo:
     afeto e identidade — coração, favorito, aba ativa, foco.

     NUNCA em preço, botão de compra, banner ou selo de oferta. O item 1 do
     briefing proíbe vermelho promocional, e é justamente o vermelho vibrante
     que faz uma vitrine curada parecer marketplace de liquidação. Usado assim,
     ele identifica a marca; usado no CTA, ele denuncia a venda. */

  --c-marca:            #E42B35;
  --c-marca-escura:     #B81E27;   /* texto sobre claro: 6,3:1, passa em AA */
  --c-marca-lavada:     #FBEBEC;   /* fundo de tag e destaque */

  /* ---------------------------------------------------------------- sombra
     Quase imperceptíveis. Se der para "ver a sombra", está errada. */

  --sombra-1: 0 1px 2px rgba(40, 30, 20, 0.04);
  --sombra-2: 0 8px 30px rgba(40, 30, 20, 0.05);
  --sombra-3: 0 16px 40px rgba(40, 30, 20, 0.08);

  /* ---------------------------------------------------------------- espaço
     Escala fechada (item 85). Não existe margin: 37px. */

  --e-1:  4px;
  --e-2:  8px;
  --e-3:  12px;
  --e-4:  16px;
  --e-5:  24px;
  --e-6:  32px;
  --e-7:  48px;
  --e-8:  64px;
  --e-9:  80px;
  --e-10: 96px;

  /* ---------------------------------------------------------------- raio */

  --r-chip:   999px;
  --r-input:  14px;
  --r-botao:  14px;
  --r-card:   20px;
  --r-bloco:  24px;

  /* ---------------------------------------------------------------- tipo */

  --fonte: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
           Roboto, 'Helvetica Neue', Arial, sans-serif;

  --t-xs:   0.75rem;    /* 12 */
  --t-sm:   0.8125rem;  /* 13 */
  --t-base: 0.9375rem;  /* 15 */
  --t-md:   1.0625rem;  /* 17 */
  --t-lg:   1.375rem;   /* 22 */
  --t-xl:   1.5rem;     /* 24 */
  /* No celular o título grande fica em 28px de propósito: a 36px o hero comia
     a tela inteira e o primeiro produto nascia abaixo da dobra — exatamente o
     que o briefing pede para evitar (item 9). Cresce no desktop, abaixo. */
  --t-2xl:  1.75rem;    /* 28 */

  --p-regular: 400;
  --p-medio:   500;
  --p-semi:    600;
  --p-bold:    700;

  --lh-apertado: 1.25;
  --lh-normal:   1.5;
  --lh-solto:    1.65;

  /* ---------------------------------------------------------------- layout */

  --largura:      1360px;
  --gutter:       20px;
  --header-h:     64px;   /* comporta a logo de 42px com respiro */
  --bottomnav-h:  60px;

  /* ---------------------------------------------------------------- movimento
     150–300ms (item 62). Nada além disso. */

  --tr-rapida:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-media:   220ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-lenta:   300ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter:   32px;
    --header-h: 72px;
    --t-2xl:    2.75rem;
    --t-xl:     2rem;
    --t-lg:     1.5rem;
  }
}

/* Respeita quem pediu menos movimento (item 66). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Reset enxuto + tipografia + layout de página. */

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

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-base);
  font-weight: var(--p-regular);
  line-height: var(--lh-normal);
  color: var(--c-texto);
  background: var(--c-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Nenhuma tela pode rolar na horizontal (item 67). */
  overflow-x: hidden;
}

/* O `[hidden] { display: none }` do navegador tem especificidade zero, então
   qualquer regra de classe com `display` o ignora — e o elemento "escondido"
   continua na tela. Aconteceu no painel: a navegação aparecia por cima da
   tela de login. Esta é a única exceção a `!important` no projeto. */
[hidden] { display: none !important; }

img, picture, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--lh-apertado);
  font-weight: var(--p-semi);      /* heading grande continua delicado (item 5) */
  letter-spacing: -0.015em;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

p { margin: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------------------------------------------------------------- foco
   Visível de verdade para quem navega no teclado (item 66), invisível
   para quem usa o mouse. Usa o vermelho da marca porque é o contraste mais
   forte da paleta — foco tem que saltar. Não se confunde com erro: o erro
   é um tijolo dessaturado, não este vermelho. */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--c-marca);
  outline-offset: 3px;
  border-radius: var(--e-1);
}

/* ---------------------------------------------------------------- utilidades */

.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.pular-para-conteudo {
  position: absolute;
  left: var(--e-4);
  top: -100px;
  z-index: 200;
  padding: var(--e-3) var(--e-4);
  background: var(--c-texto);
  color: var(--c-fundo);
  border-radius: var(--r-botao);
  transition: top var(--tr-rapida);
}
.pular-para-conteudo:focus { top: var(--e-4); }

.texto-2 { color: var(--c-texto-2); }

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* título nunca ocupa 5 linhas (item 88) */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------- página */

.pagina {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.conteudo { flex: 1; }

/* Respiro final: no mobile a bottom nav flutua sobre o conteúdo. */
@media (max-width: 767px) {
  .conteudo {
    padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + var(--e-4));
  }
}

/* Duas seções seguidas somam padding de baixo + de cima. A 48px cada, isso
   abria um vão de quase 100px no celular e a página parecia partida em
   pedaços soltos. 28px soma 56px, que respira sem separar. */
.secao { padding-block: var(--e-6) var(--e-5); }

@media (min-width: 768px) {
  .secao { padding-block: var(--e-8) var(--e-7); }
}

.secao--calma { background: var(--c-fundo-2); }

/* Design system: botões, chips, badges, inputs, cards, skeletons, estados.
   Cada componente existe uma vez só — variação é modificador, não cópia. */

/* ================================================================ botão */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 44px;                /* área de toque confortável (item 66) */
  padding: 0 var(--e-5);
  border: 1px solid transparent;
  border-radius: var(--r-botao);
  font-size: var(--t-base);
  font-weight: var(--p-semi);
  text-align: center;
  transition: background var(--tr-rapida), border-color var(--tr-rapida),
              transform var(--tr-rapida), opacity var(--tr-rapida);
}

.btn:active { transform: scale(0.985); }

.btn[disabled], .btn[aria-disabled='true'] {
  opacity: 0.45;
  pointer-events: none;
}

.btn--primario {
  background: var(--c-texto);
  color: var(--c-fundo);
}
.btn--primario:hover { background: #46423F; }

.btn--suave {
  background: var(--c-acento-suave);
  color: var(--c-texto);
}
.btn--suave:hover { background: #E7E0D8; }

.btn--contorno {
  background: transparent;
  border-color: var(--c-borda-forte);
  color: var(--c-texto);
}
.btn--contorno:hover { background: var(--c-fundo-2); }

.btn--bloco { width: 100%; }
.btn--pequeno { min-height: 36px; padding: 0 var(--e-4); font-size: var(--t-sm); }

/* Botão só de ícone. O `padding: 0 24px` do .btn engolia o ícone quando a
   largura era fixa em 52px — sobravam 4px para desenhar. */
.btn--quadrado {
  flex: none;
  width: 48px;
  min-width: 48px;
  padding: 0;
}
.btn--quadrado svg { width: 20px; height: 20px; }

/* Ícone de link externo: avisa que sai do site (item 94). */
.btn .externo { width: 14px; height: 14px; opacity: 0.6; flex: none; }

/* ================================================================ botão-ícone */

.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--c-texto);
  transition: background var(--tr-rapida);
}
.btn-icone:hover { background: var(--c-acento-suave); }
.btn-icone svg { width: 20px; height: 20px; }

/* ================================================================ chip */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  height: 38px;
  padding: 0 var(--e-4);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-chip);
  background: var(--c-superficie);
  color: var(--c-texto-2);
  font-size: var(--t-sm);
  font-weight: var(--p-medio);
  white-space: nowrap;
  transition: background var(--tr-rapida), color var(--tr-rapida),
              border-color var(--tr-rapida);
}

.chip:hover { border-color: var(--c-borda-forte); color: var(--c-texto); }

.chip[aria-current='true'], .chip--ativo {
  background: var(--c-texto);
  border-color: var(--c-texto);
  color: var(--c-fundo);
}

/* Trilho de chips com rolagem horizontal suave e sem barra à vista (item 125). */
.chips-trilho {
  display: flex;
  gap: var(--e-2);
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: var(--e-1);
  /* Sangra até a borda da tela no mobile, mas o primeiro chip alinha ao texto. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}
.chips-trilho::-webkit-scrollbar { display: none; }
.chips-trilho > * { scroll-snap-align: start; flex: none; }

/* ================================================================ badge */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 3px var(--e-2);
  border-radius: var(--e-2);
  background: var(--c-fundo-2);
  color: var(--c-texto-2);
  font-size: var(--t-xs);
  font-weight: var(--p-medio);
  letter-spacing: 0.01em;
}

/* O marketplace é informação, não protagonista (item 89). */
.badge--marketplace { background: transparent; padding-inline: 0; color: var(--c-texto-3); }
.badge--marketplace .ponto {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cor-marketplace, var(--c-texto-3));
  flex: none;
}

.badge--destaque { background: var(--c-marca-lavada); color: var(--c-marca-escura); }

/* ================================================================ input */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.campo label {
  font-size: var(--t-sm);
  font-weight: var(--p-medio);
  color: var(--c-texto-2);
}

.input, .textarea, .select {
  width: 100%;
  min-height: 46px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--c-borda-forte);
  border-radius: var(--r-input);
  background: var(--c-superficie);
  font-size: var(--t-base);
  transition: border-color var(--tr-rapida), box-shadow var(--tr-rapida);
}

.input::placeholder, .textarea::placeholder { color: var(--c-texto-3); }

.input:focus, .textarea:focus, .select:focus {
  border-color: var(--c-marca);
  box-shadow: 0 0 0 3px rgba(228, 43, 53, 0.12);
}

.textarea { min-height: 110px; resize: vertical; line-height: var(--lh-normal); }

.campo__erro { font-size: var(--t-sm); color: var(--c-erro); }

/* ================================================================ busca */

.busca {
  position: relative;
  display: flex;
  align-items: center;
}

.busca svg {
  position: absolute;
  left: var(--e-4);
  width: 18px; height: 18px;
  color: var(--c-texto-3);
  pointer-events: none;
}

.busca .input { padding-left: 46px; border-radius: var(--r-chip); }

/* ================================================================ card de produto */

.grade {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* mobile: 2 colunas (item 87) */
}

@media (min-width: 640px)  { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); } }
@media (min-width: 1024px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .grade { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  transition: transform var(--tr-media);
}

.card__midia {
  position: relative;
  aspect-ratio: 4 / 5;                 /* proporção consistente (item 14) */
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--c-fundo-2);        /* placeholder: zero layout shift */
}

.card__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tr-lenta), opacity var(--tr-media);
}

/* Produto recortado em fundo branco fica melhor inteiro que cortado. */
.card__midia img[data-ajuste='contain'] { object-fit: contain; padding: var(--e-4); }

.card__midia img[data-carregando] { opacity: 0; }

@media (hover: hover) {
  .card:hover { transform: translateY(-2px); }
  .card:hover .card__midia img { transform: scale(1.02); }   /* item 63 */
}

.card__corpo { display: flex; flex-direction: column; gap: var(--e-1); }

.card__titulo {
  font-size: var(--t-base);
  font-weight: var(--p-medio);
  line-height: 1.35;
}

.card__preco {
  font-size: var(--t-base);
  font-weight: var(--p-semi);          /* nunca maior que o nome (item 90) */
}

.card__antes {
  margin-left: var(--e-2);
  font-size: var(--t-sm);
  font-weight: var(--p-regular);
  color: var(--c-texto-3);
  text-decoration: line-through;
}

/* O card inteiro é clicável, sem aninhar links (item 13). */
.card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
}

/* ================================================================ favorito */

.favorito {
  position: absolute;
  top: var(--e-2);
  right: var(--e-2);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: none;
  border-radius: var(--r-chip);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  color: var(--c-texto-2);
  transition: transform var(--tr-rapida), color var(--tr-rapida);
}

.favorito svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.favorito:active { transform: scale(0.88); }

/* Estado "salvo" pelo atributo, não pela classe: o coração aparece no card e
   também na página do produto, e os dois precisam reagir igual. */
[data-favoritar][aria-pressed='true'] { color: var(--c-marca); }
[data-favoritar][aria-pressed='true'] svg { fill: currentColor; stroke: currentColor; }


/* ================================================================ card de categoria */

.grade-categorias {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px)  { .grade-categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); } }
@media (min-width: 1024px) { .grade-categorias { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card-categoria {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 116px;
  padding: var(--e-4);
  border-radius: var(--r-bloco);
  background: var(--cor, var(--c-fundo-2));
  font-weight: var(--p-semi);
  transition: transform var(--tr-media);
}
.card-categoria:hover { transform: translateY(-2px); }
.card-categoria small { display: block; font-weight: var(--p-regular); color: var(--c-texto-2); }

/* ================================================================ cabeçalho de seção */

.secao-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
}

.secao-cabeca h2 { font-size: var(--t-lg); }
.secao-cabeca p  { margin-top: var(--e-1); color: var(--c-texto-2); font-size: var(--t-sm); }

.secao-cabeca a {
  flex: none;
  font-size: var(--t-sm);
  font-weight: var(--p-medio);
  color: var(--c-texto-2);
}
.secao-cabeca a:hover { color: var(--c-texto); }

/* ================================================================ skeleton */

.skeleton {
  border-radius: var(--r-card);
  background: linear-gradient(90deg, var(--c-fundo-2) 25%, #EFEAE4 37%, var(--c-fundo-2) 63%);
  background-size: 400% 100%;
  animation: brilho 1.6s ease infinite;
}

@keyframes brilho { to { background-position: -135% 0; } }

.skeleton--midia { aspect-ratio: 4 / 5; }
.skeleton--linha { height: 12px; border-radius: var(--e-1); }
.skeleton--linha.curta { width: 55%; }

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

.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-8) var(--e-4);
  text-align: center;
}

.vazio h3 { font-size: var(--t-md); font-weight: var(--p-semi); }
.vazio p  { max-width: 42ch; color: var(--c-texto-2); }

/* ================================================================ aviso */

.aviso {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-input);
  background: var(--c-fundo-2);
  color: var(--c-texto-2);
  font-size: var(--t-sm);
}

.aviso--erro { background: #F6E9E6; color: #7E4438; }

/* ================================================================ breadcrumb */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  color: var(--c-texto-3);
}
.breadcrumb a:hover { color: var(--c-texto); }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: var(--e-2); opacity: 0.5; }
.breadcrumb li { display: inline-flex; align-items: center; }

/* ================================================================ entrada suave */

.aparece { animation: aparece var(--tr-lenta) both; }

@keyframes aparece {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================ avaliação

   A estrela é um caractere com recorte por gradiente: preenche `--parte` da
   largura. Uma nota 4,6 mostra meia estrela de verdade, sem precisar de três
   SVGs diferentes nem de biblioteca de ícones. */

.avaliacao {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--t-sm);
  color: var(--c-texto-2);
}

.estrelas { display: inline-flex; gap: 1px; }

.estrela {
  width: 13px;
  height: 13px;
  background: linear-gradient(90deg, #E8A33D var(--parte, 0%), var(--c-borda-forte) var(--parte, 0%));
  -webkit-mask: var(--mascara-estrela) center / contain no-repeat;
  mask: var(--mascara-estrela) center / contain no-repeat;
}

:root {
  --mascara-estrela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.1 6.3 6.9.9-5 4.9 1.2 6.9L12 17.8 5.8 21l1.2-6.9-5-4.9 6.9-.9Z'/%3E%3C/svg%3E");
}

.avaliacao__nota  { font-weight: var(--p-semi); color: var(--c-texto); }
.avaliacao__total { color: var(--c-texto-3); font-size: var(--t-xs); }

.avaliacao--compacta { font-size: var(--t-xs); gap: 3px; }
.avaliacao--compacta .estrela { width: 11px; height: 11px; }

/* Selo de desconto: âncora do "de/por" em número, discreto. Fundo lavado da
   marca, nunca o vermelho cheio — item 1 proíbe vermelho promocional. */
.card__desconto {
  margin-left: var(--e-2);
  padding: 1px 6px;
  border-radius: var(--e-2);
  background: var(--c-marca-lavada);
  color: var(--c-marca-escura);
  font-size: var(--t-xs);
  font-weight: var(--p-semi);
  white-space: nowrap;
}

/* ================================================================ ícone de categoria */

.card-categoria__icone {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: auto;
  border-radius: var(--r-input);
  background: rgba(255, 255, 255, 0.55);
  color: var(--c-texto);
}
.card-categoria__icone svg { width: 19px; height: 19px; }
.card-categoria__nome { margin-top: var(--e-3); }

/* No trilho de chips o ícone entra menor, antes do nome. */
.chip__icone { display: inline-flex; width: 16px; height: 16px; }
.chip__icone svg { width: 100%; height: 100%; }

/* ================================================================ marketplace no produto

   Aqui o logo aparece de verdade (item do Leandro): dentro do produto, onde a
   pessoa decide. No card ele saiu para dar lugar à avaliação. */

.vendido-por {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-chip);
  font-size: var(--t-sm);
  color: var(--c-texto-2);
}
.vendido-por img { height: 18px; width: auto; }

/* Sem arquivo de logo, o nome aparece na cor da própria loja com um ponto —
   fica deliberado, não parece imagem que faltou carregar. */
.vendido-por strong { color: var(--c-texto); font-weight: var(--p-semi); }
.vendido-por .ponto { flex: none; }

/* Header, bottom nav, drawer, hero, página de produto, rodapé. */

/* ================================================================ header */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 246, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-borda);
}

.header__linha {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  height: var(--header-h);
}

.marca {
  display: inline-flex;
  align-items: center;
  font-size: var(--t-md);
  font-weight: var(--p-bold);
  letter-spacing: -0.03em;
}

/* A logo é larga (~3:1) e empilha duas linhas de texto ("Achadinhos" sobre
   "Mamães"), então cada linha fica com metade da altura total. A 30px o nome
   ficava ilegível — daí 42px, que é o que faz as duas linhas lerem no celular.
   Fixa a altura e deixa a largura seguir, para trocar o arquivo sem tocar no CSS. */
.marca img {
  height: 42px;
  width: auto;
}

@media (min-width: 768px) {
  .marca img { height: 48px; }
}

.rodape .marca img { height: 46px; }

.header__nav {
  display: none;
  align-items: center;
  gap: var(--e-5);
  font-size: var(--t-base);
  color: var(--c-texto-2);
}
.header__nav a:hover { color: var(--c-texto); }

.header__busca { display: none; flex: 1; max-width: 420px; margin-left: auto; }
.header__acoes { display: flex; align-items: center; gap: var(--e-1); margin-left: auto; }

/* A marca encolhe antes de empurrar os ícones: com o nome longo em tela de
   320px, `flex: none` estourava a linha. */
.marca { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca img { flex: none; }

.header__acoes .so-desktop { display: none; }

@media (min-width: 900px) {
  /* A logo é um lockup, não uma palavra: encostada no menu ela vira ruído.
     Um respiro a mais aqui separa marca de navegação. */
  .header__nav   { display: flex; margin-left: var(--e-3); }
  .header__busca { display: block; }
  .header__acoes { margin-left: 0; }
  .header__acoes .so-mobile  { display: none; }
  .header__acoes .so-desktop { display: inline-flex; }
}

/* ================================================================ bottom nav (item 68) */

.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(250, 249, 246, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--c-borda);
  padding-bottom: env(safe-area-inset-bottom, 0px);   /* item 128 */
}

.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--bottomnav-h);
  font-size: 10.5px;
  font-weight: var(--p-medio);
  color: var(--c-texto-3);
  transition: color var(--tr-rapida);
}

/* Aba ativa na cor da marca: é o toque de identidade que aparece
   em toda navegação, sem pintar nada além de um ícone e uma palavra. */
.bottom-nav a[aria-current='page'] { color: var(--c-marca); }
.bottom-nav svg { width: 21px; height: 21px; }

@media (min-width: 900px) { .bottom-nav { display: none; } }

/* ================================================================ drawer / bottom sheet */

.sobreposicao {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(40, 33, 28, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr-media);
}
.sobreposicao[data-aberto] { opacity: 1; pointer-events: auto; }

.folha {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding: var(--e-3) var(--gutter) calc(var(--e-5) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--r-bloco) var(--r-bloco) 0 0;
  background: var(--c-fundo);
  transform: translateY(101%);
  transition: transform var(--tr-lenta);
}
.folha[data-aberto] { transform: none; }

.folha__pega {
  width: 38px; height: 4px;
  margin: 0 auto var(--e-4);
  border-radius: var(--r-chip);
  background: var(--c-borda-forte);
  flex: none;
}

.folha__corpo { overflow-y: auto; }

/* No desktop a mesma folha vira painel lateral — um componente, dois formatos. */
@media (min-width: 900px) {
  .folha {
    top: 0; left: auto;
    width: min(420px, 100%);
    max-height: none;
    border-radius: var(--r-bloco) 0 0 var(--r-bloco);
    transform: translateX(101%);
  }
  .folha[data-aberto] { transform: none; }
  .folha__pega { display: none; }
}

/* ================================================================ busca em tela cheia (mobile) */

.busca-tela {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  flex-direction: column;
  background: var(--c-fundo);
}
.busca-tela[data-aberto] { display: flex; }

.busca-tela__topo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--gutter);
  padding-top: calc(var(--e-3) + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--c-borda);
}
.busca-tela__topo .busca { flex: 1; }

.busca-tela__corpo { flex: 1; overflow-y: auto; padding: var(--e-5) var(--gutter); }

.sugestao {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-3) 0;
  border: none;
  border-bottom: 1px solid var(--c-borda);
  background: none;
  text-align: left;
}
.sugestao img { width: 44px; height: 55px; object-fit: cover; border-radius: var(--e-2); flex: none; background: var(--c-fundo-2); }
.sugestao span { font-size: var(--t-base); }
.sugestao small { display: block; color: var(--c-texto-3); font-size: var(--t-xs); }

/* ================================================================ hero (item 9) */

.hero {
  padding-block: var(--e-6) var(--e-5);
}

.hero h1 {
  max-width: 22ch;
  font-weight: var(--p-semi);
}

.hero p {
  max-width: 52ch;
  margin-top: var(--e-3);
  color: var(--c-texto-2);
  font-size: var(--t-md);
  line-height: var(--lh-solto);
}

@media (min-width: 768px) {
  .hero { padding-block: var(--e-8) var(--e-6); }
  .hero h1 { max-width: 18ch; }
}

/* ================================================================ página de produto */

.produto {
  display: grid;
  gap: var(--e-5);
  padding-block: var(--e-5) var(--e-8);
}

.produto__galeria { display: flex; flex-direction: column; gap: var(--e-3); }

.produto__figura {
  /* `relative` porque o coração de favoritar fica sobreposto aqui. */
  position: relative;
  /* 1:1 em vez de 4:5. A foto de marketplace é quadrada; forçar retrato
     criava faixa vazia em cima e embaixo e empurrava o preço para longe. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-bloco);
  background: var(--c-fundo-2);
}
.produto__figura img { width: 100%; height: 100%; object-fit: cover; }
.produto__figura img[data-ajuste='contain'] { object-fit: contain; padding: var(--e-5); }

.produto__miniaturas { display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; }
.produto__miniaturas::-webkit-scrollbar { display: none; }
.produto__miniaturas button {
  flex: none;
  width: 60px; height: 75px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--c-borda);
  border-radius: var(--e-3);
  background: var(--c-fundo-2);
}
.produto__miniaturas button[aria-current='true'] { border-color: var(--c-texto); }
.produto__miniaturas img { width: 100%; height: 100%; object-fit: cover; }

.produto__info { display: flex; flex-direction: column; gap: var(--e-4); }
.produto__info h1 { font-size: var(--t-xl); }

.produto__preco {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  font-size: var(--t-lg);
  font-weight: var(--p-semi);
}
.produto__preco s { font-size: var(--t-base); font-weight: var(--p-regular); color: var(--c-texto-3); }

.produto__acoes { display: flex; gap: var(--e-2); }
/* `:not(.btn--quadrado)` porque esta regra tem especificidade maior que o
   `flex: none` do modificador — sem isso o botão de ícone cresce e espreme
   o CTA em duas linhas. */
.produto__acoes .btn:not(.btn--quadrado) { flex: 1; }

@media (min-width: 900px) {
  .produto {
    /* A foto ganha mais largura que o texto: é ela que vende o produto.
       Antes era 5fr/6fr e a imagem ficava espremida. */
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--e-7);
    align-items: start;
  }
  .produto__galeria { position: sticky; top: calc(var(--header-h) + var(--e-5)); }
}

/* CTA fixo no mobile: a decisão de clicar acontece rolando (item 137).

   Ele senta ACIMA da barra inferior, não sobre ela. Em `bottom: 0` os dois
   ocupam o mesmo lugar e o CTA (z-index maior) engolia a navegação inteira —
   a pessoa ficava sem como sair da página. */
.cta-fixo {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  padding: var(--e-3) var(--gutter);
  background: rgba(250, 249, 246, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-borda);
  transform: translateY(120%);
  transition: transform var(--tr-media);
}
.cta-fixo[data-visivel] { transform: none; }
@media (min-width: 900px) { .cta-fixo { display: none; } }

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

.rodape {
  margin-top: var(--e-9);
  padding-block: var(--e-7) var(--e-6);
  border-top: 1px solid var(--c-borda);
  background: var(--c-fundo-2);
  font-size: var(--t-sm);
}

.rodape__grade {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .rodape__grade { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--e-7); }
}

.rodape h3 {
  margin-bottom: var(--e-3);
  font-size: var(--t-sm);
  font-weight: var(--p-semi);
}

.rodape li { margin-bottom: var(--e-2); }
.rodape a { color: var(--c-texto-2); }
.rodape a:hover { color: var(--c-texto); }

.rodape__disclosure {
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid var(--c-borda);
  max-width: 70ch;
  color: var(--c-texto-3);
  font-size: var(--t-xs);
  line-height: var(--lh-solto);
}