/* ==========================================================================
   COMPONENTES — peças reutilizáveis da loja
   ========================================================================== */

/* --------------------------------------------------------------------------
   BOTÕES
   Canto reto, caixa alta, tracking largo. O vinho aparece no hover
   do botão primário — é o único lugar em que a cor entra sozinha.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--altura-botao);
  padding-inline: var(--e7);
  border-radius: var(--raio);
  font-size: var(--fs-rotulo);
  font-weight: 500;
  letter-spacing: var(--ls-botao);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--t-rapida) ease-out,
              color var(--t-rapida) ease-out,
              border-color var(--t-rapida) ease-out;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-primario { background: var(--preto); color: var(--branco); }
.btn-primario:hover { background: var(--vinho); }

.btn-contorno {
  border: 1px solid var(--preto);
  color: var(--preto);
  background: transparent;
}
.btn-contorno:hover { background: var(--preto); color: var(--branco); }

.btn-claro { background: var(--branco); color: var(--preto); }
.btn-claro:hover { background: var(--vinho); color: var(--branco); }

/* link de apoio — o CTA terciário das referências */
.link-cta {
  display: inline-block;
  font-size: var(--fs-rotulo);
  font-weight: 500;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  padding-bottom: var(--e1);
  border-bottom: 1px solid var(--preto);
  transition: color var(--t-rapida) ease-out,
              border-color var(--t-rapida) ease-out;
}
.link-cta:hover { color: var(--vinho); border-bottom-color: var(--vinho); }
.sobre-escuro .link-cta { border-bottom-color: var(--branco); }
.sobre-escuro .link-cta:hover { color: var(--branco); border-bottom-color: rgba(255,255,255,.4); }

/* --------------------------------------------------------------------------
   SLOT DA LOGO
   Container flexível e centralizado. A logo é injetada aqui —
   trocar o arquivo em publico/img/ não exige mexer no CSS.
   -------------------------------------------------------------------------- */
.logo-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--logo-altura, 46px);
  transition: height var(--t-media) var(--curva);
}
.logo-slot img,
.logo-slot svg {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* A logo do rodapé vive a 104px (D35). Vira classe, e não estilo em linha,
   porque a Content-Security-Policy do servidor não permite 'unsafe-inline'
   — e afrouxar a política por causa de um número seria o pior negócio
   possível. Ver src/middlewares/cabecalhos.js. */
.logo-rodape { --logo-altura: 104px; }

/* A logo no alto da página Sobre. Maior que a do rodapé porque ali ela é o
   assunto, e não a assinatura: é a marca se apresentando. Centralizada
   junto com o resto do cabeçalho de seção, sem moldura e sem sombra. */
.logo-sobre {
  --logo-altura: 128px;
  display: flex;
  margin: 0 auto var(--e5);
}
@media (max-width: 599px) { .logo-sobre { --logo-altura: 96px; } }

/* --------------------------------------------------------------------------
   CAMPO DE IMAGEM
   Reserva a proporção exata da foto que virá pelo painel administrativo,
   para o layout não deslocar quando a imagem for publicada.
   -------------------------------------------------------------------------- */
.midia {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--off);
  overflow: hidden;
}
.midia > img { width: 100%; height: 100%; object-fit: cover; }
.midia[data-vazio]::after {
  content: attr(data-vazio);
  font-size: var(--fs-rotulo);
  font-weight: 500;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--cinza-texto);
  opacity: .65;
  text-align: center;
  padding: var(--e4);
}
.midia-contorno { box-shadow: inset 0 0 0 1px var(--linha); }
.midia-escura { background: var(--preto); }
.midia-escura[data-vazio]::after { color: var(--branco); opacity: .4; }

.r-1-1  { aspect-ratio: 1 / 1; }
.r-4-5  { aspect-ratio: 4 / 5; }
.r-3-4  { aspect-ratio: 3 / 4; }
.r-4-3  { aspect-ratio: 4 / 3; }
.r-16-9 { aspect-ratio: 16 / 9; }

/* --------------------------------------------------------------------------
   CARD DE PRODUTO
   Sem borda, sem sombra, sem moldura. É a foto mais o texto.
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.card-fig {
  display: block;
  position: relative;
  overflow: hidden;
}
.card-fig .midia { transition: transform var(--t-lenta) var(--curva); }
.card:hover .card-fig .midia { transform: scale(1.03); }

.card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  text-align: center;
}
.card-cat {
  font-size: var(--fs-rotulo);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--cinza-texto);
}
.card-nome {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  line-height: 1.4;
}
.card-preco {
  font-size: var(--fs-peq);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.card-preco s { color: var(--cinza-texto); margin-right: var(--e2); }

/* ação de compra: sempre presente no toque, revelada no hover no desktop */
.card-acao { margin-top: var(--e2); }
/* O padding lateral de 48px da seção 6 do design.md existe para dar corpo a
   um botão que se dimensiona pelo texto. Este ocupa a largura inteira do
   card, então o padding não muda nada visualmente — mas define a largura
   MÍNIMA da coluna, e era ele que estourava a grade em 320px (P21). */
.card-acao .btn { width: 100%; min-height: 44px; font-size: var(--fs-rotulo); padding-inline: var(--e3); }

@media (hover: hover) and (min-width: 1024px) {
  .card-acao {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--t-rapida) ease-out, transform var(--t-rapida) ease-out;
  }
  .card:hover .card-acao,
  .card:focus-within .card-acao { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   TILE DE CATEGORIA
   Quadrado, rótulo abaixo da imagem. Sem texto sobre foto.
   -------------------------------------------------------------------------- */
.tile { display: flex; flex-direction: column; gap: var(--e4); text-align: center; }
.tile-fig { overflow: hidden; }
.tile-fig .midia { transition: transform var(--t-lenta) var(--curva); }
.tile:hover .tile-fig .midia { transform: scale(1.04); }
.tile-nome {
  font-size: var(--fs-rotulo);
  font-weight: 500;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  transition: color var(--t-rapida) ease-out;
}
.tile:hover .tile-nome { color: var(--vinho); }

/* ==========================================================================
   TERRITÓRIO 1 — CABEÇALHO
   Navega e opera a loja. Nada de institucional aqui.

   POR QUE FIXO, E NÃO STICKY (P15)
   Com `sticky`, encolher o cabeçalho encolhe o fluxo do documento: no
   instante da compressão o conteúdo abaixo sobe, e arrastar a tela perto
   do limiar fazia a página oscilar. Com `fixed` o cabeçalho sai do fluxo
   e o espaçador abaixo mantém a altura de repouso — o corpo não se move
   mais, independentemente do estado do topo.
   ========================================================================== */
.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--branco);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-media) ease-out;
}
.topo.rolado { border-bottom-color: var(--linha); }

/* Altura de repouso do cabeçalho. O JS mede e sobrescreve --topo-espaco;
   o valor abaixo cobre o intervalo entre o parse do CSS e o script. */
.topo-espaco { height: var(--topo-espaco, 210px); }

/* --------------------------------------------------------------------------
   FAIXA DE MARCA (D31)
   Primeira linha do cabeçalho. Frases da marca, estáticas nesta fase.
   O ciclo entre elas entra na Fase 2 — a lista já está preparada.

   Em telas estreitas a faixa rola dentro de si em vez de quebrar em
   três linhas de preto, que comeriam a dobra do celular. Mesma técnica
   já usada em .nav-principal.
   -------------------------------------------------------------------------- */
.faixa-marca {
  background: var(--preto);
  color: var(--branco);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.faixa-marca::-webkit-scrollbar { display: none; }

.faixa-marca ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  min-height: 34px;
  padding-inline: var(--gutter);
  width: max-content;
  min-width: 100%;
  margin-inline: auto;
}
.faixa-marca li {
  flex: none;
  font-size: var(--fs-rotulo);
  font-weight: 500;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
}
/* separador entre frases — filete, não ícone nem símbolo colorido */
.faixa-marca li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: .7em;
  margin-right: clamp(1rem, 3vw, 3rem);
  background: rgba(255, 255, 255, .35);
  vertical-align: middle;
}

/* --- linha 1: busca · logo · favoritos, conta, sacola --- */
.topo-linha {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--topo-altura);
  transition: height var(--t-media) var(--curva);
}
.topo.rolado .topo-linha { height: var(--topo-altura-rolado); }
.topo.rolado .logo-slot { --logo-altura: 34px; }

.topo-esq { justify-self: start; display: flex; align-items: center; }
.topo-dir { justify-self: end;   display: flex; align-items: center; }

.icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  position: relative;
  transition: color var(--t-rapida) ease-out;
}
.icone:hover { color: var(--vinho); }
.icone svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.2; }

/* Controle pendente — o favoritos da Fase 1.
   Existe, é focável, e explica a si mesmo pelo nome acessível.
   Nunca usar o atributo disabled: ele tira o elemento do teclado.

   Tem hover, mas não o dos outros: sobe de 60% para preto pleno, sem passar
   pelo vinho. O vinho continua reservado ao que responde ao clique — se este
   ícone ficasse vinho, prometeria uma ação que ainda não existe. */
.icone-pendente {
  opacity: .6;              /* mantém 4.5:1 sobre branco */
  cursor: default;
  transition: opacity var(--t-rapida) ease-out;
}
.icone-pendente:hover,
.icone-pendente:focus-visible { opacity: 1; color: inherit; }

.sacola-contador {
  position: absolute;
  top: 6px; right: 4px;
  min-width: 16px; height: 16px;
  padding-inline: 3px;
  border-radius: 50%;
  background: var(--vinho);
  color: var(--branco);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- linha 2: menu de cinco itens, visível em TODAS as larguras ---
   Não existe menu-sanduíche no projeto. No celular a fonte reduz;
   a estrutura não muda. O overflow é rede de segurança: se um rótulo
   crescer no futuro, o menu rola dentro de si em vez de quebrar a página. */
.nav-principal {
  --nav-respiro: clamp(.375rem, 1.6vw, 4rem);

  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--nav-respiro);

  /* A caixa do menu tem exatamente a altura do alvo de toque. O respiro
     que antes era `padding-bottom: 24px` passou para dentro dela: o
     espaço abaixo do rótulo continua existindo, mas agora aceita o dedo
     em vez de ser vazio inerte. Ver o bloco ÁREA DE TOQUE abaixo. */
  min-height: 44px;
  padding-bottom: 0;

  overflow-x: auto;
  scrollbar-width: none;
}
.nav-principal::-webkit-scrollbar { display: none; }

.nav-principal a {
  position: relative;
  flex: none;
  white-space: nowrap;
  font-size: clamp(.5rem, 2.5vw, var(--fs-rotulo));
  font-weight: 500;
  letter-spacing: clamp(.04em, .3vw, var(--ls-rotulo));
  text-transform: uppercase;
  padding-bottom: var(--e1);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-rapida) ease-out, color var(--t-rapida) ease-out;
}

/* --- ÁREA DE TOQUE (P17) -------------------------------------------------
   O rótulo tem 23px de altura; o mínimo do projeto é 44px. Em vez de
   engordar o menu — o que cresceria o cabeçalho inteiro —, um pseudo-
   elemento transparente estende a área que aceita o toque. Ele não ocupa
   espaço no fluxo, então nada se move e nada muda de aparência.

   Cresce PARA BAIXO, e não centrado no texto, por dois motivos:

   1. O espaço sob o rótulo já era vazio. Vira área útil sem tirar nada
      de ninguém.
   2. `overflow-x: auto` força `overflow-y: auto` na mesma caixa — o menu
      precisa rolar na horizontal em tela estreita. O que passasse da
      borda seria recortado e ainda criaria barra de rolagem vertical.
      Foi o que aconteceu na primeira tentativa: o alvo estourava a caixa
      por 1px e o menu ganhava rolagem vertical. Por isso a caixa recebeu
      `min-height: 44px` — ela tem agora a altura exata do alvo.

   Na horizontal a área avança metade do respiro para cada lado: os alvos
   vizinhos encostam, mas nunca se sobrepõem. Sobreposição seria pior que
   alvo pequeno — o dedo acertaria o item errado em vez de nenhum.
   ------------------------------------------------------------------------- */
.nav-principal a::after {
  content: "";
  position: absolute;
  top: 0;
  height: 44px;
  left: calc(var(--nav-respiro) / -2);
  right: calc(var(--nav-respiro) / -2);
}
.nav-principal a:hover { color: var(--vinho); border-bottom-color: var(--vinho); }
.nav-principal a[aria-current="page"] { border-bottom-color: var(--preto); }

/* A BARRA DE SERVIÇOS foi removida na revisão 4 (D33). Frete, parcelamento
   e produção própria passam a ser assunto do rodapé e das páginas de
   Prazos e envios — o corpo da Home ficou só com produto. */

/* ==========================================================================
   TERRITÓRIO 3 — RODAPÉ
   Institucional, políticas, contato, redes e newsletter.
   Como não há menu no celular para o institucional, este é o ÚNICO
   caminho até políticas e contato. Não é área secundária.
   ========================================================================== */
.rodape { background: var(--off); padding-block: var(--e9) var(--e6); }

/* a newsletter abre o rodapé */
.rodape-news {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e5);
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--e9);
  padding-bottom: var(--e9);
  border-bottom: 1px solid var(--linha-forte);
}
.news-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  width: 100%;
  margin-top: var(--e2);
}
.news-campo { flex: 1 1 240px; text-align: left; }
.news-campo input {
  width: 100%;
  height: var(--altura-botao);
  padding-inline: var(--e4);
  background: var(--branco);
  color: inherit;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  transition: border-color var(--t-rapida) ease-out;
}
.news-campo input::placeholder { color: var(--cinza-texto); }
.news-campo input:hover,
.news-campo input:focus { border-color: var(--preto); }
.news-form .btn { flex: 0 0 auto; }
.news-nota { font-size: var(--fs-peq); color: var(--cinza-texto); }

.rodape-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e7);
  margin-bottom: var(--e9);
}
.rodape h2 {
  font-family: var(--ff-texto);
  font-size: var(--fs-rotulo);
  font-weight: 500;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  margin-bottom: var(--e5);
}
.rodape li { margin-bottom: var(--e3); }
.rodape li a,
.rodape-contato a {
  font-size: var(--fs-peq);
  color: var(--cinza-texto);
  transition: color var(--t-rapida) ease-out;
}
.rodape li a:hover,
.rodape-contato a:hover { color: var(--vinho); }

/* --------------------------------------------------------------------------
   COLUNA DE CONTATO E HORÁRIOS (D36)
   Rótulo em caixa alta, dado abaixo. Enquanto o dado real não chega,
   cada linha carrega o marcador de pendência — nada é inventado.
   -------------------------------------------------------------------------- */
.rodape-contato dt {
  font-size: var(--fs-rotulo);
  font-weight: 500;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--cinza-texto);
}
.rodape-contato dd {
  font-size: var(--fs-peq);
  margin-bottom: var(--e4);
}
.rodape-contato dd:last-child { margin-bottom: 0; }

/* Marcador de pendência em linha — tracejado, como manda a seção 5
   do design.md: o tracejado é o único caso em que a borda não é sólida,
   e sinaliza justamente que aquilo não é definitivo. */
.pend {
  display: inline-block;
  border-bottom: 1px dashed var(--vinho);
  color: var(--vinho);
  font-size: var(--fs-peq);
  line-height: 1.5;
}

.redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e5);
  margin-top: var(--e5);
}
.rede {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  font-size: var(--fs-peq);
  color: var(--cinza-texto);
  transition: color var(--t-rapida) ease-out;
}
.rede:hover { color: var(--vinho); }
/* Ícone monocromático: herda a cor do texto, nunca traz cor de marca.
   O rótulo ao lado é obrigatório — ícone sozinho não informa. */
.rede svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

/* --------------------------------------------------------------------------
   COMPRA SEGURA (D37)
   Declaração do que protege a compra, não selo comprado de terceiro.
   Cadeado desenhado em traço, dentro da paleta.
   -------------------------------------------------------------------------- */
.rodape-seguro {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  max-width: 560px;
  margin: 0 auto var(--e7);
  padding: var(--e5);
  border: 1px solid var(--linha-forte);
}
.seguro-marca {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--linha-forte);
}
.seguro-marca svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--preto);
  stroke-width: 1.2;
}
.seguro-texto { display: flex; flex-direction: column; gap: var(--e2); }

/* Aviso de modelo — sai quando o conteúdo real entrar.
   Vive no rodapé desde a revisão 4: o topo passou a ser da marca (D31). */
.aviso-modelo {
  border: 1px dashed var(--linha-forte);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e6);
  text-align: center;
  color: var(--cinza-texto);
  font-size: var(--fs-rotulo);
  font-weight: 500;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
}

.rodape-fim {
  border-top: 1px solid var(--linha-forte);
  padding-top: var(--e6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e5);
  text-align: center;
}
.rodape-fim .peq { color: var(--cinza-texto); }

/* ==========================================================================
   CATÁLOGO — página de Categoria e página de Produto
   Mesmos tokens, mesma composição centralizada. Nada de valor solto.
   ========================================================================== */

/* --- CATEGORIA ------------------------------------------------------------ */
.categoria-cabeca { padding-bottom: 0; }
.categoria-cabeca .cab-secao { margin-bottom: 0; }
.categoria-cabeca .texto { max-width: 52ch; }

/* contagem à esquerda, ordenação à direita; empilha no celular */
.barra-resultados {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e4);
  padding-bottom: var(--e7);
  margin-bottom: var(--e7);
  border-bottom: 1px solid var(--linha);
  text-align: center;
}

.ordenacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
}
.ordenacao select {
  height: 44px;
  padding-inline: var(--e4);
  background: var(--branco);
  color: inherit;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  font-size: var(--fs-peq);
  transition: border-color var(--t-rapida) ease-out;
}
.ordenacao select:hover,
.ordenacao select:focus { border-color: var(--preto); }
.ordenacao .btn { min-height: 44px; padding-inline: var(--e5); }

.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e5);
  margin-top: var(--e9);
  padding-top: var(--e7);
  border-top: 1px solid var(--linha);
}

.estado-vazio { max-width: 46ch; margin-inline: auto; text-align: center; align-items: center; }

/* --- PRODUTO -------------------------------------------------------------- */
.migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e7);
  font-size: var(--fs-peq);
  color: var(--cinza-texto);
}
.migalhas a { transition: color var(--t-rapida) ease-out; }
.migalhas a:hover { color: var(--vinho); }

.produto-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e7);
  align-items: start;
}

.produto-galeria { display: grid; gap: var(--e4); }

/* A página de produto é a única do site alinhada à esquerda: é leitura de
   ficha técnica, e ficha técnica centralizada não se lê. */
.produto-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e4);
  text-align: left;
}
.produto-info .texto { max-width: 52ch; }

.produto-preco {
  font-size: var(--fs-corpo-g);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  margin-top: var(--e2);
}
.produto-preco s { color: var(--cinza-texto); margin-right: var(--e2); }

.produto-compra {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--e4);
  width: 100%;
  max-width: 380px;
  margin-block: var(--e5);
  padding-block: var(--e6);
  border-block: 1px solid var(--linha);
}
.campo { display: flex; flex-direction: column; gap: var(--e2); }
.campo select,
.campo input {
  height: 44px;
  padding-inline: var(--e4);
  background: var(--branco);
  color: inherit;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  transition: border-color var(--t-rapida) ease-out;
}
.campo select:hover, .campo select:focus,
.campo input:hover, .campo input:focus { border-color: var(--preto); }
.campo-quantidade input { max-width: 120px; font-variant-numeric: tabular-nums; }

.produto-estoque { color: var(--cinza-texto); }
.produto-compra .btn { width: 100%; }

.produto-bloco {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding-top: var(--e5);
  width: 100%;
}
.produto-bloco + .produto-bloco { border-top: 1px solid var(--linha); }

@media (min-width: 640px) {
  .barra-resultados { flex-direction: row; justify-content: space-between; text-align: left; }
  .paginacao { justify-content: space-between; }
}

@media (min-width: 1024px) {
  .produto-grade { grid-template-columns: 1fr 1fr; gap: var(--e9); }
  .produto-info { padding-top: var(--e5); }
}

/* ==========================================================================
   COMPRA — sacola, checkout e acompanhamento
   Mesmos tokens, mesma composição. A página de compra é a única do corpo
   alinhada à esquerda, pela mesma razão da página de produto: formulário
   e ficha não se leem centralizados.
   ========================================================================== */

/* Aviso em linha: mudança de estado que a pessoa precisa notar sem susto */
.aviso-linha {
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e5);
  border-left: 3px solid var(--preto);
  background: var(--off);
  font-size: var(--fs-peq);
}
.aviso-erro { border-left-color: var(--vinho); color: var(--vinho); }

/* --- SACOLA --------------------------------------------------------------- */
.sacola-lista { display: flex; flex-direction: column; gap: var(--e6); }
.sacola-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--e4) var(--e5);
  padding-bottom: var(--e6);
  border-bottom: 1px solid var(--linha);
  align-items: start;
}
.sacola-fig { display: block; overflow: hidden; }
.sacola-info { display: flex; flex-direction: column; gap: var(--e2); text-align: left; align-items: flex-start; }
.sacola-info .card-nome { font-size: var(--fs-h3); }
.sacola-acoes {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e4); justify-content: space-between;
}
.sacola-qtd { display: flex; align-items: center; gap: var(--e3); }
.sacola-qtd input {
  width: 84px; min-height: 44px;
  padding-inline: var(--e3);
  text-align: center;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--branco);
  transition: border-color var(--t-rapida) ease-out;
}
.sacola-qtd input:hover, .sacola-qtd input:focus { border-color: var(--preto); }
.sacola-qtd .btn { min-height: 44px; padding-inline: var(--e4); }
.sacola-subtotal { font-variant-numeric: tabular-nums; font-size: var(--fs-corpo-g); }

.sacola-fecho {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--e4);
  margin-top: var(--e7);
  padding-top: var(--e6);
  border-top: 1px solid var(--linha-forte);
  max-width: 420px;
}
.sacola-totais { width: 100%; display: flex; flex-direction: column; gap: var(--e3); }
.sacola-totais > div { display: flex; justify-content: space-between; gap: var(--e4); }
.sacola-totais dt { font-size: var(--fs-rotulo); font-weight: 500; letter-spacing: var(--ls-rotulo); text-transform: uppercase; }
.sacola-totais dd { font-variant-numeric: tabular-nums; }

/* --- CHECKOUT ------------------------------------------------------------- */
.checkout-grade { display: grid; grid-template-columns: 1fr; gap: var(--e8); align-items: start; }

.checkout-form { display: flex; flex-direction: column; gap: var(--e7); text-align: left; }
.checkout-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e5); }
.checkout-form legend { padding: 0; margin-bottom: var(--e2); }

.campo-loja { display: flex; flex-direction: column; gap: var(--e2); text-align: left; }
.campo-loja > label {
  font-size: var(--fs-rotulo); font-weight: 500;
  letter-spacing: var(--ls-rotulo); text-transform: uppercase;
}
.campo-loja input, .campo-loja select {
  width: 100%; min-height: 48px;
  padding-inline: var(--e4);
  background: var(--branco); color: inherit;
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
  font-family: var(--ff-texto); font-size: var(--fs-corpo);
  transition: border-color var(--t-rapida) ease-out;
}
.campo-loja input:hover, .campo-loja select:hover,
.campo-loja input:focus, .campo-loja select:focus { border-color: var(--preto); }
.campo-ajuda-loja { font-size: var(--fs-peq); color: var(--cinza-texto); }
.campo-obrigatorio { color: var(--vinho); }
.campo-duplo { display: grid; grid-template-columns: 1fr; gap: var(--e5); }
.campo-estreito { max-width: 100%; }

.checkout-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e5); }

.checkout-resumo {
  display: flex; flex-direction: column; gap: var(--e5);
  padding: var(--e6);
  border: 1px solid var(--linha);
  background: var(--off);
  text-align: left;
}
.resumo-itens { display: flex; flex-direction: column; gap: var(--e4); }
.resumo-itens li { display: flex; justify-content: space-between; gap: var(--e4); font-size: var(--fs-peq); }
.resumo-nome { flex: 1 1 auto; }
.resumo-valor { flex: none; font-variant-numeric: tabular-nums; }

.resumo-totais {
  display: flex; flex-direction: column; gap: var(--e3);
  padding-top: var(--e5); border-top: 1px solid var(--linha-forte);
}
.resumo-totais > div { display: flex; justify-content: space-between; gap: var(--e4); font-size: var(--fs-peq); }
.resumo-totais dt { font-size: var(--fs-rotulo); font-weight: 500; letter-spacing: var(--ls-rotulo); text-transform: uppercase; }
.resumo-totais dd { font-variant-numeric: tabular-nums; }
.resumo-total { padding-top: var(--e3); border-top: 1px solid var(--linha-forte); }
.resumo-total dd { font-size: var(--fs-corpo-g); }

.checkout-seguro {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding-top: var(--e5); border-top: 1px solid var(--linha-forte);
}

/* --- PEDIDO E ACOMPANHAMENTO ---------------------------------------------- */
.pedido-caixa {
  display: flex; flex-direction: column; gap: var(--e5);
  padding: var(--e6);
  border: 1px solid var(--linha);
  text-align: left;
  max-width: 620px;
  margin-inline: auto;
}
.pedido-caixa h2 { margin-top: var(--e2); }

.form-codigo {
  display: flex; flex-direction: column; gap: var(--e4);
  max-width: 380px; margin-inline: auto;
}
.form-codigo input { text-transform: uppercase; letter-spacing: .08em; }

@media (min-width: 640px) {
  .sacola-item { grid-template-columns: 120px 1fr auto; }
  .sacola-acoes {
    grid-column: auto; flex-direction: column; align-items: flex-end;
    justify-content: flex-start; gap: var(--e3);
  }
  .campo-duplo { grid-template-columns: 3fr 1fr; }
  .campo-duplo:has(select) { grid-template-columns: 2fr 2fr 1fr; }
}

@media (min-width: 1024px) {
  .checkout-grade { grid-template-columns: 1.4fr 1fr; gap: var(--e9); }
  .checkout-resumo { position: sticky; top: calc(var(--topo-espaco, 200px) + var(--e5)); }
}

/* --------------------------------------------------------------------------
   BUSCA
   -------------------------------------------------------------------------- */
.form-busca {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  max-width: 520px;
  margin: 0 auto var(--e7);
}
.form-busca .campo-loja { flex: 1 1 240px; }
/* O X que o navegador desenha no type="search" não pertence à paleta e
   muda de forma em cada navegador. Fora. */
.form-busca input[type="search"]::-webkit-search-decoration,
.form-busca input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.busca-vazia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e5);
  padding: var(--e8) var(--e5);
  border: 1px dashed var(--linha-forte);
  text-align: center;
}
.busca-vazia .texto { max-width: 46ch; }
.busca-categorias { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e3); }

/* --------------------------------------------------------------------------
   FAVORITOS

   O coração do card fica sobre a imagem, no alto à direita. É o único
   elemento que se sobrepõe à foto no projeto inteiro — e ganha essa
   licença porque precisa estar junto do produto que marca.
   -------------------------------------------------------------------------- */
.card { position: relative; }

.card-favorito { position: absolute; top: 0; right: 0; z-index: 2; }

.btn-coracao {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--preto);
  transition: color var(--t-rapida) ease-out, opacity var(--t-rapida) ease-out;
}
.btn-coracao svg {
  width: 21px; height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  /* O traço branco por baixo garante o coração legível sobre foto escura,
     sem precisar de sombra — que a seção 5 do design.md proíbe. */
  paint-order: stroke fill;
}
.btn-coracao:hover { color: var(--vinho); }

/* MARCADO: preenchido, não colorido de outra cor. A diferença entre
   guardado e não guardado é de FORMA — contorno contra sólido —, e não
   só de matiz. Cor nunca é o único portador de informação. */
.btn-coracao.marcado svg { fill: currentColor; }
.btn-coracao.marcado { color: var(--vinho); }

.produto-favorito { margin-top: var(--e2); }
.link-coracao {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  font-size: var(--fs-peq);
  color: var(--cinza-texto);
  transition: color var(--t-rapida) ease-out;
}
.link-coracao svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.2;
}
.link-coracao:hover { color: var(--vinho); }
.link-coracao.marcado { color: var(--vinho); }
.link-coracao.marcado svg { fill: currentColor; }

.favoritos-nota { max-width: 58ch; margin: var(--e7) auto 0; text-align: center; }

/* Marca de campo opcional. Existe porque a maioria dos campos do checkout
   é obrigatória: dizer qual NÃO é economiza a leitura de todos. */
.campo-opcional {
  font-size: var(--fs-peq);
  color: var(--cinza-texto);
  letter-spacing: 0;
  text-transform: none;
}

/* Aviso de favorito: linha discreta abaixo do cabeçalho, no lugar de
   um balão flutuante. Balão exigiria sombra, que a seção 5 proíbe. */
.aviso-favorito {
  padding: var(--e3) var(--gutter);
  background: var(--off);
  border-bottom: 1px solid var(--linha);
  font-size: var(--fs-peq);
  color: var(--preto);
  text-align: center;
}

/* O coração é AÇÃO SECUNDÁRIA REVELADA NO HOVER — a mesma regra do botão
   de sacola, e a direção que a seção 0 do design.md tirou do esse.png. No
   toque fica sempre visível, porque não existe hover.

   A exceção é o coração JÁ MARCADO: esconder o estado até alguém passar o
   mouse tornaria a informação invisível. Estado se mostra; ação se revela. */
@media (hover: hover) and (min-width: 1024px) {
  .card-favorito {
    opacity: 0;
    transition: opacity var(--t-rapida) ease-out;
  }
  .card:hover .card-favorito,
  .card:focus-within .card-favorito,
  .card-favorito:has(.marcado) { opacity: 1; }
}

/* --------------------------------------------------------------------------
   DOCUMENTO INSTITUCIONAL

   Texto corrido dentro da largura de leitura da seção 3 do design.md.
   Política se lê de cima a baixo, então o que importa aqui é ritmo de
   parágrafo e hierarquia de subtítulo — não composição.
   -------------------------------------------------------------------------- */
.doc {
  max-width: var(--container-txt);
  margin-inline: auto;
  margin-top: var(--e8);
}

.doc-bloco + .doc-bloco { margin-top: var(--e8); }

.doc-bloco h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  line-height: 1.4;
  margin-bottom: var(--e3);
  /* Sem caixa alta: a seção 3 reserva caixa alta a rótulo, botão e título
     de seção. Subtítulo de documento é nenhum dos três. */
  text-transform: none;
  letter-spacing: 0;
}

.doc-bloco p {
  font-size: var(--fs-corpo);
  line-height: 1.7;
  color: var(--preto);
}
.doc-bloco p + p,
.doc-bloco ul + p,
.doc-bloco p + ul { margin-top: var(--e4); }

.doc-bloco ul { list-style: none; }
.doc-bloco li {
  position: relative;
  padding-left: var(--e4);
  font-size: var(--fs-corpo);
  line-height: 1.7;
}
.doc-bloco li + li { margin-top: var(--e2); }
/* Filete curto no lugar do marcador redondo: é o mesmo traço de 1px que
   separa tudo no projeto, e não introduz uma forma nova. */
.doc-bloco li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 8px;
  height: 1px;
  background: var(--preto);
}

/* O marcador de pendência: tracejado em vinho, o único uso autorizado de
   borda tracejada (seção 5 do design.md). */
/* A regra é `.doc-bloco .doc-pendente`, e não só `.doc-pendente`, porque
   `.doc-bloco p` acima já pinta todo parágrafo de preto e venceria por
   especificidade — o marcador sairia sem a cor que o identifica. */
.doc-bloco .doc-pendente {
  margin-top: var(--e4);
  padding: var(--e3) var(--e4);
  border: 1px dashed var(--vinho);
  color: var(--vinho);
  font-size: var(--fs-peq);
  line-height: 1.6;
}
.doc-bloco .doc-pendente strong {
  font-weight: 500;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  font-size: var(--fs-rotulo);
}

.doc-data { margin-top: var(--e9); padding-top: var(--e4); border-top: 1px solid var(--linha); }