/* ==========================================================================
   Simone Celular: estilos da loja
   Organização: tokens, base, componentes (botões, painéis, campos),
   cabeçalho, rodapé e depois cada página.
   ========================================================================== */

:root {
  /* Marca */
  --amarelo: #fdd10a;
  --amarelo-forte: #f0c200;
  --amarelo-suave: #fff7d1;
  --amarelo-borda: #f3dc76;
  --amarelo-texto: #6f5600;

  /* Neutros (levemente quentes, para combinar com o amarelo) */
  --tinta: #151515;
  --texto: #1f1f1f;
  --texto-2: #4d4d4b;
  --texto-3: #737370;
  --linha: #e8e8e4;
  --linha-2: #d5d5d0;
  --branco: #ffffff;
  /* Páginas e seções têm fundo branco; a superfície é só o tom sutil de hover, ícones e fotos vazias. */
  --fundo-pagina: #ffffff;
  --superficie: #f5f5f2;
  --superficie-2: #edede8;

  /* Estados */
  --verde: #137a3a;
  --verde-suave: #e6f4ea;
  --verde-borda: #bfe3cb;
  --vermelho: #b3261e;
  --vermelho-suave: #fdecea;
  --vermelho-borda: #f4c7c3;
  --azul: #1b5fae;
  --azul-suave: #e6effb;
  --laranja: #8a5a00;
  --laranja-suave: #fff1d6;
  --whatsapp: #15803d;

  /* Forma */
  --raio-p: 8px;
  --raio: 12px;
  --raio-g: 16px;
  --sombra-1: 0 1px 2px rgba(21, 21, 21, 0.05);
  --sombra-2: 0 2px 6px rgba(21, 21, 21, 0.04), 0 10px 28px rgba(21, 21, 21, 0.08);
  --sombra-3: 0 16px 48px rgba(21, 21, 21, 0.18);
  --foco: 0 0 0 3px rgba(253, 209, 10, 0.45);

  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fonte-titulos: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --altura-cabecalho: 60px;
}

@media (min-width: 960px) {
  :root {
    --altura-cabecalho: 76px;
  }
}

/* ---------- Base ---------- */

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

* {
  touch-action: manipulation;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--altura-cabecalho) + 16px);
}

body {
  font-family: var(--fonte);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--texto);
  background-color: var(--fundo-pagina);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main {
  flex: 1 0 auto;
}

@media (min-width: 960px) {
  body {
    font-size: 0.9375rem;
  }
}

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

ul,
ol {
  list-style: none;
}

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

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

button {
  border: none;
  background: none;
  cursor: pointer;
}

h1,
h2,
h3 {
  font-family: var(--fonte-titulos);
  color: var(--tinta);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Preços também usam a fonte dos títulos, para ficarem em destaque. */
.produto-card-preco-atual,
.produto-preco-atual,
.carrinho-item-subtotal,
.resumo-total {
  font-family: var(--fonte-titulos);
}

h1 {
  font-weight: 700;
}

h2,
h3 {
  font-weight: 600;
}

small {
  font-size: 0.85em;
}

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.material-icons {
  font-family: 'Material Icons Round';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  flex-shrink: 0;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.icone-marca {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

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

.sem-quebra {
  white-space: nowrap;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 960px) {
  .container {
    padding-inline: 24px;
  }
}

@media (min-width: 1200px) {
  .container {
    padding-inline: 32px;
  }
}

.pular-conteudo {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 3000;
  padding: 10px 16px;
  border-radius: var(--raio-p);
  background-color: var(--tinta);
  color: var(--branco);
  font-weight: 600;
}

.pular-conteudo:focus {
  top: 12px;
}

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

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

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.botao:active:not(:disabled) {
  transform: translateY(1px);
}

.botao:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.botao .material-icons {
  font-size: 20px;
}

.botao .icone-marca {
  font-size: 19px;
}

.botao-principal {
  background-color: var(--amarelo);
  color: var(--tinta);
}

.botao-principal:hover:not(:disabled) {
  background-color: var(--amarelo-forte);
}

.botao-secundario {
  background-color: var(--branco);
  color: var(--tinta);
  box-shadow: inset 0 0 0 1.5px var(--linha-2);
}

.botao-secundario:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1.5px var(--tinta);
}

.botao-whatsapp {
  background-color: var(--whatsapp);
  color: var(--branco);
}

.botao-whatsapp:hover {
  background-color: #116a32;
}

.botao-grande {
  min-height: 50px;
  padding: 0 24px;
  border-radius: var(--raio);
  font-size: 0.9375rem;
}

.botao-pequeno {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.8125rem;
}

.botao-pequeno .material-icons {
  font-size: 18px;
}

.botao-bloco {
  display: flex;
  width: 100%;
}

.botao-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--tinta);
  transition: background-color 0.15s ease;
}

.botao-icone:hover {
  background-color: var(--superficie);
}

.botao-icone .material-icons {
  font-size: 24px;
}

.link-sutil {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--linha-2);
  white-space: nowrap;
}

.link-sutil:hover {
  text-decoration-color: var(--tinta);
}

.link-voltar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--texto-2);
}

.link-voltar .material-icons {
  font-size: 18px;
}

.link-voltar:hover {
  color: var(--tinta);
}

/* ---------- Painéis, alertas e estados vazios ---------- */

.painel {
  background-color: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 16px;
}

@media (min-width: 640px) {
  .painel {
    padding: 20px;
  }
}

.painel-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.painel-topo h2 {
  font-size: 1.0625rem;
}

.painel-topo-contagem {
  font-weight: 400;
  color: var(--texto-3);
  font-size: 0.875rem;
}

.alerta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: var(--raio);
  border: 1px solid transparent;
  font-size: 0.875rem;
  line-height: 1.45;
}

.alerta .material-icons {
  font-size: 20px;
}

.alerta-erro {
  background-color: var(--vermelho-suave);
  border-color: var(--vermelho-borda);
  color: #7f1a15;
}

.alerta-sucesso {
  background-color: var(--verde-suave);
  border-color: var(--verde-borda);
  color: #0e5a2a;
}

.nota {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--texto-3);
}

.nota .material-icons {
  font-size: 18px;
}

.nota-centro {
  justify-content: center;
  text-align: center;
}

.estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 20px;
  text-align: center;
}

.estado-vazio h1,
.estado-vazio h2 {
  font-size: 1.125rem;
  font-weight: 600;
  max-width: 420px;
}

.estado-vazio p {
  max-width: 380px;
  color: var(--texto-3);
}

.estado-vazio .botao {
  margin-top: 12px;
}

.estado-vazio-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  border-radius: 50%;
  background-color: var(--superficie-2);
  color: var(--texto-3);
}

.painel .estado-vazio-icone {
  background-color: var(--superficie);
}

.estado-vazio-icone .material-icons {
  font-size: 30px;
}

.estado-vazio-pagina {
  max-width: 560px;
  margin: 24px auto;
  padding: 56px 24px;
}

.pagina-titulo {
  margin-bottom: 20px;
}

.pagina-titulo h1 {
  font-size: 1.375rem;
}

.pagina-titulo p {
  margin-top: 4px;
  color: var(--texto-3);
}

.pagina-titulo-com-acao {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

@media (min-width: 960px) {
  .pagina-titulo {
    margin-bottom: 28px;
  }

  .pagina-titulo h1 {
    font-size: 1.625rem;
  }
}

.conteudo-pagina,
.conta-pagina {
  padding-top: 20px;
  padding-bottom: 48px;
}

@media (min-width: 960px) {
  .conteudo-pagina,
  .conta-pagina {
    padding-top: 32px;
    padding-bottom: 64px;
  }
}

/* ---------- Campos de formulário ---------- */

.campo {
  margin-bottom: 14px;
  min-width: 0;
}

.campo label,
.campo legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta);
}

.campo label small {
  font-weight: 400;
  color: var(--texto-3);
}

.campo input,
.campo textarea,
.campo select {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--linha-2);
  border-radius: 10px;
  background-color: var(--branco);
  font-size: 0.9375rem;
  color: var(--tinta);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo textarea {
  height: auto;
  min-height: 128px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.5;
}

.campo input:hover,
.campo textarea:hover {
  border-color: #bdbdb7;
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  border-color: var(--tinta);
  box-shadow: var(--foco);
}

.campo input[readonly] {
  background-color: var(--superficie);
  border-color: var(--linha);
  color: var(--texto-3);
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: #a3a39e;
}

.campo-dica {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--texto-3);
}

.campos-linha {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 12px;
}

@media (min-width: 640px) {
  .campos-linha {
    grid-template-columns: 1fr 1fr;
  }
}

.formulario .botao-bloco,
.formulario > .botao {
  margin-top: 6px;
}

.seletor-segmentado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: var(--raio);
  background-color: var(--superficie-2);
}

.seletor-segmentado label {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.seletor-segmentado input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seletor-segmentado label > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texto-2);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.seletor-segmentado label > span .material-icons {
  font-size: 18px;
}

.seletor-segmentado input:checked + span {
  background-color: var(--branco);
  color: var(--tinta);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(21, 21, 21, 0.12);
}

.seletor-segmentado input:focus-visible + span {
  outline: 2px solid var(--tinta);
  outline-offset: 1px;
}

/* ==========================================================================
   Cabeçalho
   ========================================================================== */

.faixa-topo {
  background-color: var(--tinta);
  color: #f2f2ee;
  font-size: 0.75rem;
}

.faixa-topo-conteudo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 34px;
}

.faixa-topo-mensagem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  text-align: center;
}

.faixa-topo-mensagem .material-icons {
  font-size: 17px;
  color: var(--amarelo);
}

.faixa-topo-link {
  display: none;
  align-items: center;
  gap: 6px;
  color: #d9d9d4;
}

.faixa-topo-link .icone-marca {
  font-size: 14px;
  color: #4ade80;
}

.faixa-topo-link:hover {
  color: var(--branco);
}

@media (min-width: 960px) {
  .faixa-topo-conteudo {
    justify-content: space-between;
  }

  .faixa-topo-link {
    display: inline-flex;
  }
}

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--branco);
  border-bottom: 1px solid var(--linha);
}

.cabecalho-container {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--altura-cabecalho);
}

.botao-menu,
.botao-voltar {
  margin-left: -8px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-imagem {
  display: none;
  width: auto;
  height: 42px;
}

.logo-marca {
  width: auto;
  height: 34px;
}

/* Busca do cabeçalho */
.cabecalho-busca {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 3px;
  border: 1.5px solid var(--linha-2);
  border-radius: var(--raio);
  background-color: var(--branco);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cabecalho-busca:focus-within {
  border-color: var(--tinta);
  box-shadow: var(--foco);
}

.cabecalho-busca input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 8px 0 10px;
  border: none;
  background: none;
  outline: none;
  font-size: 0.9375rem;
  color: var(--tinta);
}

.cabecalho-busca input::placeholder {
  color: #8d8d88;
}

.cabecalho-busca input::-webkit-search-cancel-button,
.cabecalho-busca input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.busca-botao-buscar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 100%;
  border-radius: 9px;
  background-color: var(--amarelo);
  color: var(--tinta);
  transition: background-color 0.15s ease;
}

.busca-botao-buscar:hover {
  background-color: var(--amarelo-forte);
}

.busca-botao-buscar .material-icons {
  font-size: 22px;
}

.busca-sugestoes {
  position: absolute;
  top: calc(100% + 8px);
  left: -1.5px;
  right: -1.5px;
  z-index: 1100;
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background-color: var(--branco);
  box-shadow: var(--sombra-3);
}

/* Celular: o campo é estreito, então as sugestões ocupam a largura toda abaixo do cabeçalho. */
@media (max-width: 959px) {
  .cabecalho-container {
    position: relative;
  }

  .cabecalho-busca {
    position: static;
  }

  .busca-sugestoes {
    top: calc(100% - 4px);
    left: 8px;
    right: 8px;
  }
}

.busca-sugestao-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: var(--raio-p);
  color: var(--texto);
}

.busca-sugestao-item.ativo,
.busca-sugestao-item:hover {
  background-color: var(--superficie);
}

.busca-sugestao-icone {
  font-size: 18px;
  color: #a3a39e;
}

.busca-sugestao-texto {
  min-width: 0;
  overflow: hidden;
  font-size: 0.875rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.busca-sugestao-texto strong {
  font-weight: 700;
  color: var(--tinta);
}

.busca-sugestao-todos {
  display: block;
  margin-top: 4px;
  padding: 10px;
  border-top: 1px solid var(--linha);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: var(--tinta);
}

.busca-sugestao-todos:hover,
.busca-sugestao-todos.ativo {
  background-color: var(--amarelo-suave);
  border-radius: var(--raio-p);
}

/* Conta e carrinho */
.cabecalho-conta {
  display: none;
}

.botao-carrinho {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  margin-right: -6px;
  border-radius: 10px;
  color: var(--tinta);
}

.botao-carrinho .material-icons {
  font-size: 25px;
}

.carrinho-texto {
  display: none;
}

.contador-carrinho {
  position: absolute;
  top: 3px;
  right: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background-color: var(--tinta);
  color: var(--branco);
  font-size: 0.6875rem;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--branco);
}

@media (min-width: 960px) {
  .cabecalho-container {
    gap: 20px;
  }

  .botao-menu,
  .botao-voltar {
    display: none;
  }

  .logo-imagem {
    display: block;
  }

  .logo-marca {
    display: none;
  }

  .cabecalho-busca {
    height: 48px;
    max-width: 640px;
    margin-inline: auto;
  }

  .busca-botao-buscar {
    width: 48px;
  }

  .cabecalho-conta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 10px;
    color: var(--tinta);
    transition: background-color 0.15s ease;
  }

  .cabecalho-conta:hover,
  .cabecalho-conta.ativo {
    background-color: var(--superficie);
  }

  .cabecalho-conta .material-icons {
    font-size: 28px;
  }

  .cabecalho-conta-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }

  .cabecalho-conta-texto small {
    max-width: 150px;
    overflow: hidden;
    font-size: 0.75rem;
    color: var(--texto-3);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .cabecalho-conta-texto strong {
    font-size: 0.875rem;
    font-weight: 600;
  }

  .botao-carrinho {
    width: auto;
    height: 48px;
    margin-right: 0;
    gap: 8px;
    padding: 0 18px;
    border-radius: var(--raio);
    background-color: var(--tinta);
    color: var(--branco);
    transition: background-color 0.15s ease;
  }

  .botao-carrinho:hover {
    background-color: #2d2d2b;
  }

  .botao-carrinho .material-icons {
    font-size: 22px;
  }

  .carrinho-texto {
    display: inline;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .botao-carrinho .contador-carrinho {
    position: static;
    background-color: var(--amarelo);
    color: var(--tinta);
    box-shadow: none;
  }
}

/* Barra de navegação (computador) */
.barra-navegacao {
  display: none;
}

@media (min-width: 960px) {
  .barra-navegacao {
    display: block;
    position: relative;
    z-index: 990;
    background-color: var(--branco);
    border-bottom: 1px solid var(--linha);
  }

  .barra-navegacao-conteudo {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
  }

  .menu-categorias {
    position: relative;
    padding-right: 12px;
    margin-right: 4px;
    border-right: 1px solid var(--linha);
  }

  .menu-categorias-botao {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px 0 8px;
    margin-left: -8px;
    border-radius: var(--raio-p);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tinta);
  }

  .menu-categorias-botao:hover,
  .menu-categorias-botao[aria-expanded='true'] {
    background-color: var(--superficie);
  }

  .menu-categorias-seta {
    transition: transform 0.2s ease;
  }

  .menu-categorias-botao[aria-expanded='true'] .menu-categorias-seta {
    transform: rotate(180deg);
  }

  .menu-categorias-painel {
    position: absolute;
    top: calc(100% + 8px);
    left: -8px;
    z-index: 1050;
    width: min(760px, calc(100vw - 48px));
    padding: 12px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    background-color: var(--branco);
    box-shadow: var(--sombra-3);
  }

  .menu-categorias-lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .menu-categorias-lista a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--texto);
  }

  .menu-categorias-lista a:hover,
  .menu-categorias-lista a.ativo {
    background-color: var(--superficie);
  }

  .menu-categorias-lista a.ativo {
    font-weight: 600;
  }

  .menu-categorias-todos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding: 12px 10px 4px;
    border-top: 1px solid var(--linha);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tinta);
  }

  .menu-categorias-todos .material-icons {
    font-size: 18px;
  }

  .menu-categorias-todos:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .barra-navegacao-links {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .barra-navegacao-links::-webkit-scrollbar {
    display: none;
  }

  .barra-navegacao-links a {
    display: block;
    padding: 7px 12px;
    border-radius: var(--raio-p);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--texto-2);
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .barra-navegacao-links a:hover {
    background-color: var(--superficie);
    color: var(--tinta);
  }

  .barra-navegacao-links a.ativo {
    background-color: var(--amarelo-suave);
    color: var(--tinta);
    font-weight: 600;
  }
}

.menu-categorias-imagem {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--superficie);
  color: var(--texto-3);
}

.menu-categorias-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Menu lateral (celular) */
.menu-lateral {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  width: 320px;
  max-width: 86vw;
  height: 100%;
  background-color: var(--branco);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}

.menu-lateral.aberto {
  transform: translateX(0);
  visibility: visible;
  box-shadow: var(--sombra-3);
  transition: transform 0.28s ease;
}

.menu-lateral-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px 12px 16px;
  border-bottom: 1px solid var(--linha);
}

.menu-lateral-logo-imagem {
  width: auto;
  height: 36px;
}

.menu-lateral-corpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
}

.menu-lateral-conta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: var(--raio);
  background-color: var(--superficie);
}

.menu-lateral-conta > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.menu-lateral-conta strong {
  font-size: 0.9375rem;
  color: var(--tinta);
}

.menu-lateral-conta small {
  font-size: 0.78rem;
  color: var(--texto-3);
}

.menu-lateral-conta > .material-icons {
  color: var(--texto-3);
}

.menu-lateral-conta-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--amarelo);
  color: var(--tinta);
}

.menu-lateral-lista a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--texto);
}

.menu-lateral-lista a .material-icons {
  font-size: 22px;
  color: var(--texto-3);
}

.menu-lateral-lista a:hover {
  background-color: var(--superficie);
}

.menu-lateral-lista a.ativo {
  background-color: var(--amarelo-suave);
  font-weight: 600;
}

.menu-lateral-lista a.ativo .material-icons {
  color: var(--tinta);
}

.menu-lateral-titulo {
  margin: 16px 12px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.menu-lateral-categorias a {
  font-size: 0.875rem;
}

.menu-lateral-categorias .menu-categorias-imagem {
  width: 34px;
  height: 34px;
}

.menu-lateral-rodape {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha);
}

.menu-lateral-rodape .botao {
  width: 100%;
}

.menu-lateral-fundo,
.filtro-painel-fundo {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background-color: rgba(21, 21, 21, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
}

.menu-lateral-fundo.visivel,
.filtro-painel-fundo.visivel {
  opacity: 1;
  visibility: visible;
}

/* Cabeçalho enxuto do carrinho e checkout */
.cabecalho-checkout .cabecalho-container {
  justify-content: space-between;
}

.cabecalho-checkout .logo-imagem {
  display: block;
  height: 36px;
}

.cabecalho-checkout-seguro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--texto-2);
}

.cabecalho-checkout-seguro .material-icons {
  font-size: 18px;
  color: var(--verde);
}

@media (min-width: 960px) {
  .cabecalho-checkout .logo-imagem {
    height: 42px;
  }
}

/* Aviso rápido (carrinho etc.) */
.aviso-flutuante {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 2000;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: var(--raio);
  background-color: var(--tinta);
  color: var(--branco);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  box-shadow: var(--sombra-3);
  transform: translateX(-50%);
  animation: aviso-entrar 0.25s ease;
}

@keyframes aviso-entrar {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ==========================================================================
   Rodapé
   ========================================================================== */

.rodape {
  margin-top: 56px;
  background-color: var(--branco);
  border-top: 1px solid var(--linha);
  color: var(--texto-2);
}

.rodape-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px;
  padding-top: 40px;
  padding-bottom: 32px;
}

.rodape-marca,
.rodape-coluna:last-child {
  grid-column: 1 / -1;
}

.rodape-logo {
  width: auto;
  height: 40px;
}

.rodape-marca p {
  max-width: 320px;
  margin: 12px 0 16px;
  font-size: 0.875rem;
}

.rodape-redes {
  display: flex;
  gap: 8px;
}

.rodape-redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--linha);
  border-radius: 50%;
  color: var(--tinta);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rodape-redes a:hover {
  background-color: var(--amarelo);
  border-color: var(--amarelo);
}

.rodape-redes .icone-marca {
  font-size: 18px;
}

.rodape-coluna h2 {
  margin-bottom: 14px;
  font-size: 0.875rem;
  font-weight: 700;
}

.rodape-coluna ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.875rem;
}

.rodape-coluna a:hover {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rodape-coluna address {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.875rem;
  font-style: normal;
}

.rodape-coluna .rodape-horarios {
  gap: 2px;
  margin-top: 12px;
  font-size: 0.8125rem;
}

.rodape-horarios span {
  font-weight: 600;
  color: var(--tinta);
}

.rodape-coluna .rodape-link-destaque {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta);
}

.rodape-link-destaque .material-icons {
  font-size: 18px;
}

.rodape-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding-top: 18px;
  padding-bottom: 18px;
  border-top: 1px solid var(--linha);
  font-size: 0.78rem;
  color: var(--texto-3);
}

.rodape-pagamento {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rodape-pagamento .material-icons {
  font-size: 16px;
  color: var(--verde);
}

.rodape-simples {
  margin-top: 40px;
}

.rodape-simples .rodape-base {
  border-top: none;
}

@media (min-width: 720px) {
  .rodape-grid {
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  }

  .rodape-marca,
  .rodape-coluna:last-child {
    grid-column: auto;
  }
}

@media (min-width: 960px) {
  .rodape {
    margin-top: 72px;
  }

  .rodape-grid {
    padding-top: 48px;
    padding-bottom: 40px;
  }
}

/* ==========================================================================
   Página inicial
   ========================================================================== */

.vitrine {
  margin-top: 12px;
}

.vitrine img {
  width: 100%;
  height: auto;
  aspect-ratio: 1060 / 1484;
  object-fit: cover;
  border-radius: var(--raio);
  background-color: var(--amarelo);
}

@media (min-width: 640px) {
  .vitrine img {
    aspect-ratio: 2170 / 725;
    border-radius: var(--raio-g);
  }
}

@media (min-width: 960px) {
  .vitrine {
    margin-top: 20px;
  }

  .vitrine img {
    border-radius: 20px;
  }
}

.beneficios {
  margin-top: 12px;
}

.beneficios-lista {
  display: flex;
  gap: 10px;
  margin-inline: -16px;
  padding-inline: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}

.beneficios-lista::-webkit-scrollbar {
  display: none;
}

.beneficios-lista li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.beneficio {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background-color: var(--branco);
}

a.beneficio:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.beneficio-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--tinta);
}

.beneficio-icone .material-icons {
  font-size: 21px;
}

.beneficio-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.beneficio-texto strong {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
}

.beneficio-texto span {
  font-size: 0.78rem;
  color: var(--texto-3);
  white-space: nowrap;
}

@media (min-width: 960px) {
  .beneficios {
    margin-top: 16px;
  }

  .beneficios-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
    gap: 0;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    background-color: var(--branco);
  }

  .beneficios-lista li {
    width: auto;
  }

  .beneficios-lista li + li .beneficio {
    border-left: 1px solid var(--linha);
    border-radius: 0;
  }

  .beneficio {
    padding: 16px 18px;
    border: none;
    background: none;
  }

  .beneficio-texto strong,
  .beneficio-texto span {
    white-space: normal;
  }

  .beneficio-icone {
    width: 44px;
    height: 44px;
  }

  .beneficio-texto strong {
    font-size: 0.875rem;
  }

  .beneficio-texto span {
    font-size: 0.8125rem;
  }
}

.secao {
  margin-top: 28px;
}

.secao-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.secao-topo h2 {
  font-size: 1.1875rem;
  font-weight: 700;
}

.secao-topo p {
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--texto-3);
}

.secao-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 6px 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta);
}

.secao-link .material-icons {
  font-size: 18px;
}

.secao-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 960px) {
  .secao {
    margin-top: 44px;
  }

  .secao-topo {
    margin-bottom: 18px;
  }

  .secao-topo h2 {
    font-size: 1.375rem;
  }

  .secao-topo p,
  .secao-link {
    font-size: 0.875rem;
  }
}

/* Categorias */
.categorias-grid {
  display: flex;
  gap: 8px;
  margin-inline: -16px;
  padding: 2px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.categorias-grid::-webkit-scrollbar {
  display: none;
}

.categoria-card {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 88px;
  -webkit-tap-highlight-color: transparent;
}

.categoria-card-imagem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background-color: var(--branco);
  color: var(--texto-3);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.categoria-card-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.categoria-card-imagem .material-icons {
  font-size: 28px;
}

.categoria-card-nome {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--texto);
  overflow-wrap: break-word;
  hyphens: auto;
}

.categoria-card:active .categoria-card-imagem {
  transform: scale(0.96);
}

@media (min-width: 960px) {
  .categorias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 12px;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }

  .categoria-card {
    width: auto;
    gap: 10px;
    padding: 16px 8px 14px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    background-color: var(--branco);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }

  .categoria-card:hover {
    border-color: var(--amarelo-borda);
    box-shadow: var(--sombra-2);
    transform: translateY(-2px);
  }

  .categoria-card-imagem {
    width: 80px;
    height: 80px;
    border: none;
    border-radius: var(--raio);
  }

  .categoria-card-imagem img {
    object-fit: contain;
  }

  .categoria-card-nome {
    font-size: 0.8125rem;
  }
}

/* ==========================================================================
   Grade e cartão de produto
   ========================================================================== */

.produtos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 640px) {
  .produtos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (min-width: 960px) {
  .produtos-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1200px) {
  .produtos-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Vitrines da tela inicial: só linhas completas (6 cards com 2 ou 3 colunas, 8 com 4, 10 com 5) */
.produtos-grid-vitrine > :nth-child(n + 7) {
  display: none;
}

@media (min-width: 960px) {
  .produtos-grid-vitrine > :nth-child(-n + 8) {
    display: flex;
  }
}

@media (min-width: 1200px) {
  .produtos-grid-vitrine > :nth-child(-n + 10) {
    display: flex;
  }
}

.secao-rodape {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

@media (min-width: 960px) {
  .secao-rodape {
    margin-top: 24px;
  }
}

.produto-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background-color: var(--branco);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.produto-card-imagem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--superficie);
  color: #bdbdb7;
}

.produto-card-imagem img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.produto-card-imagem > .material-icons {
  font-size: 36px;
}

.produto-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background-color: var(--tinta);
  color: var(--amarelo);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

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

.produto-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.produto-card-link:focus-visible {
  outline: none;
}

.produto-card-link:focus-visible::after {
  outline: 2px solid var(--tinta);
  outline-offset: -2px;
}

.produto-card-nome {
  display: -webkit-box;
  font-family: var(--fonte);
  min-height: calc(1.35em * 2);
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--texto);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.produto-card-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
}

.produto-card-precos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.produto-card-preco-original {
  font-size: 0.75rem;
  color: var(--texto-3);
  text-decoration: line-through;
}

.produto-card-preco-atual {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tinta);
  white-space: nowrap;
}

.produto-card-botao {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  margin-left: auto;
  border-radius: 10px;
  background-color: var(--amarelo);
  color: var(--tinta);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.produto-card-botao:hover {
  background-color: var(--amarelo-forte);
}

.produto-card-botao:active {
  transform: scale(0.94);
}

.produto-card-botao:disabled {
  opacity: 0.6;
  cursor: progress;
}

.produto-card-botao .material-icons {
  font-size: 20px;
}

@media (hover: hover) {
  .produto-card:hover {
    border-color: var(--linha-2);
    box-shadow: var(--sombra-2);
  }

  .produto-card:hover .produto-card-imagem img {
    transform: scale(1.035);
  }

  .produto-card:hover .produto-card-nome {
    color: var(--tinta);
  }
}

@media (min-width: 640px) {
  .produto-card-corpo {
    padding: 12px 12px 14px;
  }

  .produto-card-nome {
    font-size: 0.875rem;
  }

  .produto-card-preco-atual {
    font-size: 1.125rem;
  }

  .produto-card-botao {
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   Busca e filtros
   ========================================================================== */

.busca-pagina {
  padding-bottom: 8px;
}

.busca-cabecalho {
  position: sticky;
  top: var(--altura-cabecalho);
  z-index: 900;
  display: grid;
  gap: 10px;
  margin-inline: -16px;
  margin-bottom: 14px;
  padding: 12px 16px;
  background-color: var(--fundo-pagina);
  border-bottom: 1px solid var(--linha);
}

.busca-titulo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.busca-titulo h1 {
  min-width: 0;
  overflow: hidden;
  font-size: 1.125rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.busca-titulo span {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--texto-3);
  white-space: nowrap;
}

.busca-ferramentas {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.busca-botao-filtro {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 36px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background-color: var(--branco);
  box-shadow: inset 0 0 0 1px var(--linha-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta);
}

.busca-botao-filtro:hover {
  box-shadow: inset 0 0 0 1px var(--tinta);
}

.busca-botao-filtro.ativo {
  background-color: var(--amarelo-suave);
  box-shadow: inset 0 0 0 1px var(--amarelo-borda);
}

.busca-botao-filtro .material-icons {
  font-size: 18px;
}

.busca-botao-filtro-contador {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background-color: var(--tinta);
  color: var(--branco);
  font-size: 0.6875rem;
  font-weight: 700;
}

.busca-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.busca-chips::-webkit-scrollbar {
  display: none;
}

.busca-chips li {
  flex-shrink: 0;
}

.busca-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 8px 0 14px;
  border-radius: 999px;
  background-color: var(--branco);
  box-shadow: inset 0 0 0 1px var(--linha-2);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tinta);
  white-space: nowrap;
}

.busca-chip .material-icons {
  font-size: 16px;
  color: var(--texto-3);
}

.busca-chip:hover {
  box-shadow: inset 0 0 0 1px var(--tinta);
}

.busca-chip:hover .material-icons {
  color: var(--tinta);
}

.busca-chip-limpar {
  display: block;
  padding: 8px 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--texto-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.busca-aviso-aproximado {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--raio);
  background-color: var(--azul-suave);
  font-size: 0.875rem;
  color: #173e6e;
}

.busca-aviso-aproximado .material-icons {
  font-size: 19px;
  color: var(--azul);
}

@media (min-width: 960px) {
  .busca-pagina {
    padding-top: 24px;
  }

  .busca-cabecalho {
    position: static;
    margin-inline: 0;
    margin-bottom: 20px;
    padding: 0;
    background: none;
    border-bottom: none;
  }

  .busca-titulo h1 {
    font-size: 1.5rem;
  }

  .busca-titulo span {
    font-size: 0.875rem;
  }
}

/* Painel de filtros: gaveta que sobe no celular, painel lateral fixo no computador. */
.filtro-painel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: flex;
  max-height: 88vh;
  max-height: 88dvh;
  border-radius: 20px 20px 0 0;
  background-color: var(--branco);
  box-shadow: var(--sombra-3);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0.28s;
}

.filtro-painel.aberto {
  transform: translateY(0);
  visibility: visible;
}

.filtro-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.filtro-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px 10px 20px;
  border-bottom: 1px solid var(--linha);
}

.filtro-topo h2 {
  font-size: 1.0625rem;
}

.filtro-corpo {
  flex: 1;
  min-height: 0;
  padding: 4px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.filtro-grupo {
  min-width: 0;
  padding: 16px 0;
  border: none;
  border-bottom: 1px solid var(--linha);
}

.filtro-grupo:last-child {
  border-bottom: none;
}

.filtro-grupo legend {
  float: left;
  width: 100%;
  margin-bottom: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta);
}

.filtro-grupo legend + * {
  clear: both;
}

.filtro-pilulas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filtro-pilula {
  position: relative;
  cursor: pointer;
}

.filtro-pilula input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.filtro-pilula span {
  display: block;
  padding: 7px 14px;
  border-radius: 999px;
  background-color: var(--branco);
  box-shadow: inset 0 0 0 1px var(--linha-2);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--texto);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.filtro-pilula:hover span {
  box-shadow: inset 0 0 0 1px var(--tinta);
}

.filtro-pilula input:checked + span,
.filtro-faixa-preco.selecionada span {
  background-color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta);
  color: var(--branco);
  font-weight: 600;
}

.filtro-pilula input:focus-visible + span {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

.filtro-preco-campos {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.filtro-preco-campos label {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--texto-3);
}

.filtro-preco-campos input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--linha-2);
  border-radius: 10px;
  font-size: 16px;
  color: var(--tinta);
  outline: none;
}

.filtro-preco-campos input:focus {
  border-color: var(--tinta);
  box-shadow: var(--foco);
}

.filtro-preco-separador {
  padding-bottom: 10px;
  color: var(--texto-3);
}

.filtro-interruptor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.filtro-interruptor-texto {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta);
}

.filtro-interruptor-texto .material-icons {
  font-size: 18px;
  color: var(--verde);
}

.filtro-interruptor input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.filtro-interruptor-trilho {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background-color: var(--linha-2);
  transition: background-color 0.2s ease;
}

.filtro-interruptor-trilho::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--branco);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.filtro-interruptor input:checked + .filtro-interruptor-trilho {
  background-color: var(--tinta);
}

.filtro-interruptor input:checked + .filtro-interruptor-trilho::after {
  transform: translateX(18px);
}

.filtro-interruptor input:focus-visible + .filtro-interruptor-trilho {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

.filtro-total {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--texto-3);
}

.filtro-lista {
  display: flex;
  flex-direction: column;
}

.filtro-opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.875rem;
  cursor: pointer;
}

.filtro-opcao:hover .filtro-opcao-nome,
.filtro-opcao:hover > span:nth-child(2) {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.filtro-opcao input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--tinta);
}

.filtro-opcao .filtro-total {
  margin-left: auto;
}

.filtro-busca-marca {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 0 12px;
  border: 1.5px solid var(--linha-2);
  border-radius: 10px;
}

.filtro-busca-marca:focus-within {
  border-color: var(--tinta);
  box-shadow: var(--foco);
}

.filtro-busca-marca .material-icons {
  font-size: 18px;
  color: var(--texto-3);
}

.filtro-busca-marca input {
  flex: 1;
  min-width: 0;
  padding: 9px 0;
  border: none;
  outline: none;
  font-size: 16px;
}

.filtro-lista-vazia {
  padding: 8px 0;
  font-size: 0.8125rem;
  color: var(--texto-3);
}

.filtro-ver-mais {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  padding: 4px 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.filtro-ver-mais .material-icons {
  font-size: 18px;
}

.filtro-rodape {
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha);
  background-color: var(--branco);
  border-radius: 0 0 var(--raio-g) var(--raio-g);
}

.filtro-botao-limpar {
  flex: 0 0 auto;
}

.filtro-botao-aplicar {
  flex: 1;
}

@media (min-width: 960px) {
  .filtro-painel {
    top: 0;
    left: auto;
    width: 400px;
    max-height: none;
    border-radius: 0;
    transform: translateX(100%);
  }

  .filtro-painel.aberto {
    transform: translateX(0);
  }
}

/* Computador largo: filtros sempre visíveis ao lado dos resultados. */
@media (min-width: 1100px) {
  .busca-layout.com-filtros {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    grid-template-areas:
      'filtros cabecalho'
      'filtros resultados';
    align-items: start;
    column-gap: 28px;
  }

  .busca-layout.com-filtros .busca-cabecalho {
    grid-area: cabecalho;
  }

  .busca-layout.com-filtros .busca-resultados {
    grid-area: resultados;
  }

  .busca-layout.com-filtros .busca-botao-filtro {
    display: none;
  }

  .busca-layout.com-filtros .filtro-painel {
    grid-area: filtros;
    position: sticky;
    top: calc(var(--altura-cabecalho) + 16px);
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    width: auto;
    max-height: calc(100vh - var(--altura-cabecalho) - 32px);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }

  .busca-layout.com-filtros .filtro-topo {
    padding: 16px 18px 12px;
  }

  .busca-layout.com-filtros #botaoFecharFiltroBusca,
  .busca-layout.com-filtros .filtro-painel-fundo {
    display: none;
  }

  .busca-layout.com-filtros .filtro-corpo {
    padding: 0 18px;
  }

  .busca-layout.com-filtros .filtro-rodape {
    padding: 12px 18px;
  }

  .busca-layout.com-filtros .filtro-rodape .botao {
    padding: 0 12px;
    font-size: 0.8125rem;
  }

  .busca-layout.com-filtros .filtro-preco-campos input {
    padding: 0 10px;
    font-size: 0.875rem;
  }

  .busca-layout.com-filtros .produtos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .busca-layout.com-filtros .produtos-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Página de produto
   ========================================================================== */

.produto-pagina {
  padding-top: 10px;
  padding-bottom: 24px;
}

.trilha {
  margin-bottom: 10px;
  font-size: 0.78rem;
  color: var(--texto-3);
}

.trilha ol {
  display: flex;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.trilha ol::-webkit-scrollbar {
  display: none;
}

.trilha li {
  display: flex;
  align-items: center;
}

.trilha li + li::before {
  content: '›';
  margin: 0 8px;
  color: #b2b2ad;
}

.trilha a:hover {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.trilha li:last-child {
  color: var(--texto-2);
}

.produto-detalhe {
  display: flex;
  flex-direction: column;
}

/* Galeria */
.produto-galeria {
  position: relative;
  margin-inline: -16px;
  background-color: var(--branco);
}

.produto-galeria-palco {
  position: relative;
}

.produto-galeria-slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.produto-galeria-slides::-webkit-scrollbar {
  display: none;
}

.produto-galeria-slide {
  flex: 0 0 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--branco);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.produto-galeria-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Foto que não carregou (trocada pelo script por um ícone). */
.produto-galeria-slide:has(> .material-icons) {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--superficie);
}

.produto-galeria-slide > .material-icons {
  font-size: 48px;
  color: #bdbdb7;
}

.produto-galeria-ponto > .material-icons {
  display: none;
}

.produto-galeria-vazia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1 / 1;
  background-color: var(--superficie);
  font-size: 0.8125rem;
  color: var(--texto-3);
}

.produto-galeria-vazia .material-icons {
  font-size: 48px;
  color: #bdbdb7;
}

.produto-galeria-seta {
  position: absolute;
  top: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.95);
  color: var(--tinta);
  box-shadow: 0 2px 10px rgba(21, 21, 21, 0.16);
  transform: translateY(-50%);
  transition: background-color 0.15s ease;
}

.produto-galeria-seta:hover {
  background-color: var(--branco);
}

.produto-galeria-seta .material-icons {
  font-size: 26px;
}

.produto-galeria-seta-anterior {
  left: 12px;
}

.produto-galeria-seta-proxima {
  right: 12px;
}

@media (hover: hover) {
  .produto-galeria-seta {
    display: flex;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .produto-galeria:hover .produto-galeria-seta,
  .produto-galeria-seta:focus-visible {
    opacity: 1;
  }
}

/* Indicadores: pontos no celular, miniaturas no computador. */
.produto-galeria-pontos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}

.produto-galeria-ponto {
  width: 7px;
  height: 7px;
  padding: 0;
  overflow: hidden;
  border-radius: 4px;
  background-color: rgba(21, 21, 21, 0.22);
  pointer-events: auto;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.produto-galeria-ponto img {
  display: none;
}

.produto-galeria-ponto.ativo {
  width: 20px;
  background-color: var(--tinta);
}

/* Informações e compra */
.produto-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-inline: -16px;
  padding: 18px 16px 20px;
  background-color: var(--branco);
}

.produto-marca {
  margin-bottom: -6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.produto-nome {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.produto-avaliacao {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
}

.produto-avaliacao .material-icons {
  font-size: 18px;
  color: #f5a300;
}

.produto-avaliacao-total {
  color: var(--texto-3);
}

.produto-precos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}

.produto-preco-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.produto-preco-original {
  font-size: 0.875rem;
  color: var(--texto-3);
  text-decoration: line-through;
}

.produto-desconto-badge {
  padding: 2px 8px;
  border-radius: 6px;
  background-color: var(--verde-suave);
  color: var(--verde);
  font-size: 0.75rem;
  font-weight: 700;
}

.produto-preco-atual {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

.produto-economia {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--verde);
}

.produto-estoque {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
}

.produto-estoque .material-icons {
  font-size: 18px;
}

.produto-disponivel {
  color: var(--verde);
}

.produto-indisponivel {
  color: var(--vermelho);
}

/* Variações (cor, tamanho...): botões de escolha única. Esgotadas ficam riscadas e não podem ser marcadas. */
.produto-variacoes {
  min-width: 0;
  padding: 0;
  border: 0;
}

.produto-variacoes-titulo {
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.875rem;
  color: var(--texto-2);
}

.produto-variacoes-titulo strong {
  color: var(--tinta);
}

.produto-variacoes-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.produto-variacao {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.produto-variacao input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: inherit;
}

.produto-variacao > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-p);
  background-color: var(--branco);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texto);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.produto-variacao:hover > span {
  border-color: var(--tinta);
}

.produto-variacao input:checked + span {
  border-color: var(--tinta);
  background-color: var(--amarelo-suave);
  box-shadow: inset 0 0 0 1px var(--tinta);
  font-weight: 600;
}

.produto-variacao input:focus-visible + span {
  box-shadow: var(--foco);
}

.produto-variacao.esgotada {
  cursor: not-allowed;
}

.produto-variacao.esgotada > span {
  border-style: dashed;
  border-color: var(--linha-2);
  background-color: var(--superficie);
  color: var(--texto-3);
  text-decoration: line-through;
}

.produto-variacoes-pendente .produto-variacao:not(.esgotada) > span {
  border-color: var(--vermelho);
}

.produto-variacoes-erro {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vermelho);
}

.produto-variacoes-erro .material-icons {
  font-size: 18px;
}

/* No celular os botões ficam numa barra fixa no rodapé da tela. */
.produto-acoes {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background-color: var(--branco);
  border-top: 1px solid var(--linha);
  box-shadow: 0 -6px 20px rgba(21, 21, 21, 0.06);
}

.produto-botao-comprar {
  flex: 1;
}

.produto-botao-carrinho {
  flex: 0 0 auto;
  width: 54px;
  padding: 0;
}

.produto-botao-carrinho .material-icons {
  font-size: 22px;
}

.produto-botao-carrinho-texto {
  display: none;
}

body.pagina-produto {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

body.pagina-produto .aviso-flutuante {
  bottom: calc(88px + env(safe-area-inset-bottom));
}

.produto-vantagens {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}

.produto-vantagens li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--texto-2);
}

.produto-vantagens .material-icons {
  font-size: 21px;
  color: var(--tinta);
}

.produto-vantagens strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta);
}

.produto-duvida {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--texto-3);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.produto-duvida:hover {
  border-color: var(--linha-2);
  background-color: var(--superficie);
}

.produto-duvida > span:nth-child(2) {
  flex: 1;
}

.produto-duvida strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta);
}

.produto-duvida > .material-icons {
  color: var(--texto-3);
}

.produto-duvida-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e5f6ec;
  color: var(--whatsapp);
  font-size: 20px;
}

.produto-detalhes {
  margin-inline: -16px;
  padding: 18px 16px 8px;
  background-color: var(--branco);
}

.produto-detalhes h2 {
  margin-bottom: 4px;
  font-size: 1.0625rem;
}

.produto-detalhes-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 0.875rem;
}

.produto-detalhes-item:last-child {
  border-bottom: none;
}

.produto-detalhes-item dt {
  flex-shrink: 0;
  color: var(--texto-3);
}

.produto-detalhes-item dd {
  font-weight: 500;
  text-align: right;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.produto-detalhes-item dd.produto-disponivel {
  color: var(--verde);
}

.produto-detalhes-item dd.produto-indisponivel {
  color: var(--vermelho);
}

@media (min-width: 640px) {
  .produto-galeria,
  .produto-info,
  .produto-detalhes {
    margin-inline: 0;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    overflow: hidden;
  }

  .produto-info,
  .produto-detalhes {
    padding: 20px;
  }
}

/* Celular: os blocos ficam colados e com fundo igual ao da página; uma linha fina separa cada um. */
@media (max-width: 639px) {
  .produto-info,
  .produto-detalhes {
    border-top: 1px solid var(--linha);
  }
}

/* Tablet: a galeria ainda ocupa a coluna toda, então a foto é limitada para não passar da tela. */
@media (min-width: 640px) and (max-width: 959px) {
  /* Os blocos viram cartões com borda própria e precisam de respiro entre si. */
  .produto-detalhe {
    gap: 16px;
  }

  .produto-galeria-palco {
    max-width: 520px;
    margin-inline: auto;
  }
}

@media (min-width: 960px) {
  body.pagina-produto {
    padding-bottom: 0;
  }

  body.pagina-produto .aviso-flutuante {
    bottom: 24px;
  }

  .produto-pagina {
    padding-top: 18px;
  }

  .trilha {
    margin-bottom: 16px;
    font-size: 0.8125rem;
  }

  .produto-detalhe {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr);
    grid-template-areas:
      'galeria info'
      'detalhes info';
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 24px;
  }

  .produto-galeria {
    grid-area: galeria;
    padding: 20px;
    overflow: visible;
  }

  .produto-galeria-palco {
    overflow: hidden;
    border-radius: var(--raio);
  }

  .produto-galeria-pontos {
    position: static;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    pointer-events: auto;
  }

  .produto-galeria-ponto {
    width: 68px;
    height: 68px;
    border-radius: 10px;
    background-color: var(--branco);
    box-shadow: inset 0 0 0 1px var(--linha);
    opacity: 0.75;
    transition: box-shadow 0.15s ease, opacity 0.15s ease;
  }

  .produto-galeria-ponto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    padding: 2px;
  }

  .produto-galeria-ponto:hover {
    opacity: 1;
  }

  .produto-galeria-ponto:has(> .material-icons) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .produto-galeria-ponto > .material-icons {
    display: block;
    font-size: 22px;
    color: #bdbdb7;
  }

  .produto-galeria-ponto.ativo {
    width: 68px;
    background-color: var(--branco);
    box-shadow: inset 0 0 0 2px var(--tinta);
    opacity: 1;
  }

  .produto-info {
    grid-area: info;
    position: sticky;
    top: calc(var(--altura-cabecalho) + 16px);
    gap: 14px;
    padding: 28px;
  }

  .produto-nome {
    font-size: 1.5rem;
  }

  .produto-preco-atual {
    font-size: 2rem;
  }

  .produto-acoes {
    position: static;
    flex-direction: column;
    padding: 4px 0 0;
    border-top: none;
    box-shadow: none;
    background: none;
  }

  .produto-botao-carrinho {
    width: 100%;
    padding: 0 24px;
  }

  .produto-botao-carrinho-texto {
    display: inline;
  }

  .produto-detalhes {
    grid-area: detalhes;
    padding: 24px 28px 12px;
  }

  .produto-detalhes h2 {
    font-size: 1.1875rem;
  }
}

/* ==========================================================================
   Carrinho e checkout
   ========================================================================== */

.checkout-pagina {
  padding-top: 20px;
  padding-bottom: 24px;
}

.checkout-topo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.checkout-topo h1 {
  font-size: 1.375rem;
}

@media (min-width: 960px) {
  .checkout-pagina {
    padding-top: 32px;
  }

  .checkout-topo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
  }

  .checkout-topo h1 {
    font-size: 1.625rem;
  }
}

/* Etapas */
.etapas-checkout {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.etapa-checkout {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--texto-3);
}

.etapa-checkout + .etapa-checkout::before {
  content: '';
  position: absolute;
  top: 14px;
  right: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 2px;
  border-radius: 1px;
  background-color: var(--linha-2);
}

.etapa-checkout.concluida + .etapa-checkout::before {
  background-color: var(--tinta);
}

.etapa-checkout-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--branco);
  box-shadow: inset 0 0 0 1.5px var(--linha-2);
  font-size: 0.8125rem;
  font-weight: 600;
}

.etapa-checkout-numero .material-icons {
  font-size: 18px;
}

.etapa-checkout.atual {
  color: var(--tinta);
  font-weight: 600;
}

.etapa-checkout.atual .etapa-checkout-numero {
  background-color: var(--amarelo);
  box-shadow: 0 0 0 4px var(--amarelo-suave);
  color: var(--tinta);
}

.etapa-checkout.concluida {
  color: var(--tinta);
}

.etapa-checkout.concluida .etapa-checkout-numero {
  background-color: var(--tinta);
  box-shadow: none;
  color: var(--branco);
}

@media (min-width: 960px) {
  .etapas-checkout {
    width: 420px;
    flex-shrink: 0;
  }
}

.checkout-layout {
  display: grid;
  /* minmax(0, …): sem isso a coluna cresce com o conteúdo e passa da tela em celulares estreitos. */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (min-width: 960px) {
  .checkout-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
  }

  .checkout-layout > .resumo-compra {
    position: sticky;
    top: calc(var(--altura-cabecalho) + 16px);
  }
}

/* Itens do carrinho */
.carrinho-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--linha);
}

.carrinho-item:first-of-type {
  margin-top: 12px;
}

.carrinho-item:last-child {
  padding-bottom: 0;
}

.carrinho-item-imagem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background-color: var(--superficie);
  color: #bdbdb7;
}

.carrinho-item-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carrinho-item-corpo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.carrinho-item-nome {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tinta);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.carrinho-item-nome:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.carrinho-item-preco {
  font-size: 0.8125rem;
  color: var(--texto-3);
}

.carrinho-item-preco s {
  margin-left: 4px;
  font-size: 0.75rem;
  color: #a3a39e;
}

.carrinho-item-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 6px;
}

.carrinho-quantidade {
  display: inline-flex;
  align-items: center;
  height: 36px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1.5px var(--linha-2);
}

.carrinho-quantidade-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--tinta);
}

.carrinho-quantidade-botao:hover:not(:disabled) {
  background-color: var(--superficie);
}

.carrinho-quantidade-botao .material-icons {
  font-size: 18px;
}

.carrinho-quantidade-botao:disabled {
  color: #c4c4be;
  cursor: not-allowed;
}

.carrinho-quantidade-valor {
  min-width: 28px;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}

.carrinho-remover {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--texto-3);
  transition: color 0.15s ease;
}

.carrinho-remover:hover {
  color: var(--vermelho);
}

.carrinho-remover .material-icons {
  font-size: 18px;
}

.carrinho-item-subtotal {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tinta);
  white-space: nowrap;
}

.carrinho-item-preco s {
  white-space: nowrap;
}

/* Celular: nome e preço em cima; quantidade, lixeira e subtotal na mesma linha embaixo. */
@media (max-width: 639px) {
  .carrinho-item {
    row-gap: 2px;
  }

  .carrinho-item-imagem {
    grid-row: 1 / span 3;
  }

  .carrinho-item-corpo {
    display: contents;
  }

  .carrinho-item-nome,
  .carrinho-item-preco {
    grid-column: 2 / 4;
  }

  .carrinho-item-controles {
    grid-column: 2;
    margin-top: 8px;
  }

  .carrinho-item-subtotal {
    grid-column: 3;
    grid-row: 3;
    align-self: center;
    margin-top: 8px;
  }

  .carrinho-remover {
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
  }

  .carrinho-remover:hover {
    background-color: var(--vermelho-suave);
  }

  .carrinho-remover .material-icons {
    font-size: 20px;
  }

  .carrinho-remover-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* Celular estreito: a linha de quantidade, lixeira e subtotal começa embaixo da foto para caber inteira. */
@media (max-width: 379px) {
  /* A foto ocupa as duas primeiras linhas; nome e preço se encontram no meio, centralizados ao lado dela. */
  .carrinho-item-imagem {
    grid-row: 1 / span 2;
  }

  .carrinho-item-nome {
    align-self: end;
  }

  .carrinho-item-preco {
    align-self: start;
  }

  .carrinho-item-controles {
    grid-column: 1 / 3;
  }
}

@media (min-width: 640px) {
  .carrinho-item {
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 16px;
  }

  .carrinho-item-imagem {
    width: 88px;
    height: 88px;
  }

  .carrinho-item-nome {
    font-size: 0.9375rem;
  }

  .carrinho-item-subtotal {
    font-size: 1rem;
  }
}

/* Resumo da compra */
.resumo-compra {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.resumo-compra h2 {
  font-size: 1.0625rem;
}

.resumo-linhas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resumo-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--texto-2);
}

.resumo-linha > span:last-child {
  color: var(--tinta);
  white-space: nowrap;
}

.resumo-total {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--tinta);
}

.resumo-total > span:first-child {
  color: var(--tinta);
}

.resumo-linha > span.resumo-gratis,
.resumo-gratis {
  font-weight: 600;
  color: var(--verde);
}

.resumo-linha.resumo-desconto,
.resumo-linha.resumo-desconto > span:last-child {
  font-weight: 600;
  color: var(--verde);
}

.resumo-economia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background-color: var(--verde-suave);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--verde);
}

.resumo-economia .material-icons {
  font-size: 18px;
}

.resumo-link {
  align-self: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--texto-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.resumo-link:hover {
  color: var(--tinta);
}

.frete-progresso {
  padding: 12px 14px;
  border-radius: var(--raio);
  background-color: var(--superficie);
}

.frete-progresso p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--texto-2);
}

.frete-progresso p strong {
  color: var(--tinta);
}

.frete-progresso p .material-icons {
  font-size: 19px;
  color: var(--tinta);
}

.frete-progresso-barra {
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 3px;
  background-color: var(--linha);
}

.frete-progresso-barra span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background-color: var(--amarelo-forte);
}

.frete-progresso.completo {
  background-color: var(--verde-suave);
}

.frete-progresso.completo p .material-icons,
.frete-progresso.completo p strong {
  color: var(--verde);
}

.frete-progresso.completo .frete-progresso-barra {
  background-color: var(--verde-borda);
}

.frete-progresso.completo .frete-progresso-barra span {
  background-color: var(--verde);
}

/* Lista compacta de itens (checkout, pedido) */
.resumo-itens li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--linha);
}

.resumo-itens li:first-child {
  border-top: none;
}

.resumo-item-imagem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background-color: var(--superficie);
  color: #bdbdb7;
}

.resumo-item-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}

.resumo-item-quantidade {
  position: absolute;
  top: -7px;
  right: -7px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background-color: var(--tinta);
  box-shadow: 0 0 0 2px var(--branco);
  color: var(--branco);
  font-size: 0.6875rem;
  font-weight: 700;
}

.resumo-item-nome {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--texto);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.resumo-item-valor {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
}

.checkout-bloco .resumo-itens {
  margin-top: 8px;
}

.resumo-compacto .resumo-itens {
  max-height: 320px;
  overflow-y: auto;
  padding-top: 6px;
}

/* Cupom de desconto */
.cupom-bloco {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linha);
}

.cupom-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta);
}

.cupom-campo {
  display: flex;
  gap: 8px;
}

.cupom-campo input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--linha-2);
  border-radius: 10px;
  background-color: var(--branco);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta);
  outline: none;
}

.cupom-campo input::placeholder {
  letter-spacing: normal;
  text-transform: none;
  color: #a3a39e;
}

.cupom-campo input:focus {
  border-color: var(--tinta);
  box-shadow: var(--foco);
}

.cupom-campo button {
  flex-shrink: 0;
  height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  background-color: var(--tinta);
  color: var(--branco);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background-color 0.15s ease;
}

.cupom-campo button:hover {
  background-color: #2d2d2b;
}

.cupom-aplicado {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px 8px 12px;
  border: 1.5px dashed var(--amarelo-forte);
  border-radius: 10px;
  background-color: var(--amarelo-suave);
}

.cupom-aplicado > .material-icons {
  font-size: 20px;
  color: var(--amarelo-texto);
}

.cupom-aplicado-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--texto-2);
}

.cupom-aplicado-texto strong {
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.cupom-aplicado-pendente {
  border-color: var(--linha-2);
  background-color: var(--superficie);
}

.cupom-aplicado-pendente > .material-icons {
  color: var(--texto-3);
}

.cupom-remover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--texto-3);
}

.cupom-remover:hover {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--tinta);
}

.cupom-remover .material-icons {
  font-size: 18px;
}

.cupom-regras {
  font-size: 0.75rem;
  color: var(--texto-3);
}

.cupom-mensagem {
  font-size: 0.78rem;
  line-height: 1.4;
}

.cupom-mensagem-sucesso {
  color: var(--verde);
}

.cupom-mensagem-erro {
  color: var(--vermelho);
}

/* Entrega ou retirada */
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.checkout-opcoes {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: none;
}

@media (min-width: 640px) {
  .checkout-opcoes {
    grid-template-columns: 1fr 1fr;
  }
}

.checkout-opcao {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1.5px solid var(--linha);
  border-radius: 14px;
  background-color: var(--branco);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.checkout-opcao:hover {
  border-color: var(--linha-2);
}

.checkout-opcao:has(input:checked) {
  border-color: var(--tinta);
  box-shadow: 0 0 0 1px var(--tinta);
}

.checkout-opcao input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--tinta);
}

.checkout-opcao.desativada {
  opacity: 0.55;
  cursor: not-allowed;
}

.checkout-opcao-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--superficie);
  color: var(--texto-2);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.checkout-opcao-icone .material-icons {
  font-size: 22px;
}

.checkout-opcao:has(input:checked) .checkout-opcao-icone {
  background-color: var(--amarelo);
  color: var(--tinta);
}

.checkout-opcao-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--texto-3);
}

.checkout-opcao-texto strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinta);
}

.checkout-opcao-preco {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--verde);
}

.checkout-bloco h2 {
  margin-bottom: 12px;
  font-size: 1.0625rem;
}

.checkout-bloco .painel-topo h2 {
  margin-bottom: 0;
}

.checkout-bloco .painel-topo {
  margin-bottom: 12px;
}

.checkout-bloco > .nota {
  margin-top: 14px;
}

.checkout-endereco {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.6;
  color: var(--texto-2);
}

.checkout-recebimento {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.checkout-linha-numero {
  grid-template-columns: 1fr 2fr;
}

.checkout-linha-cidade {
  grid-template-columns: 3fr 1fr;
}

.checkout-bloco .campos-linha:last-child .campo {
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .checkout-campo-cep {
    max-width: 50%;
  }
}

.checkout-status-cep {
  display: block;
  min-height: 1.2em;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--vermelho);
}

.checkout-navegacao {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}

@media (min-width: 640px) {
  .checkout-navegacao {
    flex-direction: row;
    justify-content: space-between;
  }
}

.checkout-revisao {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ==========================================================================
   Conta: entrar, cadastro, minhas compras e pedido
   ========================================================================== */

.auth-pagina {
  display: flex;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 40px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 24px 20px;
}

.auth-topo {
  margin-bottom: 22px;
  text-align: center;
}

.auth-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background-color: var(--amarelo);
  color: var(--tinta);
}

.auth-icone .material-icons {
  font-size: 26px;
}

.auth-topo h1 {
  font-size: 1.375rem;
}

.auth-topo p {
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--texto-3);
}

.auth-contato {
  padding: 0;
  border: none;
}

.auth-contato .auth-contato-campo {
  margin-bottom: 0;
}

.auth-esqueci {
  margin: -4px 0 14px;
  text-align: right;
}

.auth-icone-whatsapp {
  background-color: var(--whatsapp);
  color: var(--branco);
  font-size: 26px;
}

.auth-nota {
  margin-top: 16px;
}

.auth-card .nota .link-sutil {
  white-space: normal;
}

.auth-alternativa {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
  font-size: 0.875rem;
  text-align: center;
  color: var(--texto-3);
}

.auth-alternativa a {
  font-weight: 600;
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 640px) {
  .auth-pagina {
    padding-top: 48px;
    padding-bottom: 24px;
  }

  .auth-card {
    padding: 32px;
  }
}

/* Status do pedido */
.pedido-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.pedido-status-pendente {
  background-color: var(--laranja-suave);
  color: var(--laranja);
}

.pedido-status-andamento {
  background-color: var(--azul-suave);
  color: var(--azul);
}

.pedido-status-pronto,
.pedido-status-concluido {
  background-color: var(--verde-suave);
  color: var(--verde);
}

.pedido-status-cancelado {
  background-color: var(--vermelho-suave);
  color: var(--vermelho);
}

.pedido-status-topo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pedido-status-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--superficie);
  color: var(--texto-2);
}

.pedido-status-icone .material-icons {
  font-size: 24px;
}

.pedido-status-painel-pendente .pedido-status-icone {
  background-color: var(--laranja-suave);
  color: var(--laranja);
}

.pedido-status-painel-andamento .pedido-status-icone {
  background-color: var(--azul-suave);
  color: var(--azul);
}

.pedido-status-painel-pronto .pedido-status-icone,
.pedido-status-painel-concluido .pedido-status-icone {
  background-color: var(--verde-suave);
  color: var(--verde);
}

.pedido-status-painel-cancelado .pedido-status-icone {
  background-color: var(--vermelho-suave);
  color: var(--vermelho);
}

.pedido-mensagem {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--texto-2);
}

.pedido-botao-pagar {
  width: 100%;
  margin-top: 16px;
}

@media (min-width: 640px) {
  .pedido-botao-pagar {
    width: auto;
  }
}

.pedido-data {
  font-size: 0.8125rem;
  color: var(--texto-3);
}

.pedido-notificacoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
}

/* Código de retirada/entrega (QR Code + 4 dígitos) */
.pedido-confirmacao {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pedido-confirmacao h2 {
  align-self: stretch;
  text-align: left;
}

.pedido-confirmacao-texto {
  align-self: stretch;
  font-size: 0.9375rem;
  text-align: left;
  color: var(--texto-2);
}

/* Fundo branco fixo: o leitor precisa de contraste e da margem clara em volta do código. */
.pedido-qrcode {
  width: 220px;
  max-width: 100%;
  margin-top: 16px;
  background-color: #ffffff;
}

.pedido-qrcode svg {
  display: block;
  width: 100%;
  height: auto;
}

.pedido-codigo-confirmacao {
  margin: 8px 0 12px;
  font-family: var(--fonte-titulos);
  font-size: 2.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
  /* Compensa o espaço depois do último dígito, para o código ficar centralizado. */
  margin-right: -0.3em;
  color: var(--tinta);
}

/* Linha do tempo */
.linha-do-tempo {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
}

.linha-do-tempo-passo {
  position: relative;
  display: flex;
  gap: 14px;
  padding-bottom: 20px;
  color: var(--texto-3);
}

.linha-do-tempo-passo:last-child {
  padding-bottom: 0;
}

.linha-do-tempo-passo:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 4px;
  left: 11px;
  width: 2px;
  border-radius: 1px;
  background-color: var(--linha);
}

.linha-do-tempo-passo.feito:not(.atual):not(:last-child)::before {
  background-color: var(--tinta);
}

.linha-do-tempo-marcador {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--branco);
  box-shadow: inset 0 0 0 2px var(--linha-2);
}

.linha-do-tempo-marcador .material-icons {
  font-size: 15px;
}

.linha-do-tempo-passo.feito {
  color: var(--tinta);
}

.linha-do-tempo-passo.feito .linha-do-tempo-marcador {
  background-color: var(--tinta);
  box-shadow: none;
  color: var(--branco);
}

.linha-do-tempo-passo.atual .linha-do-tempo-marcador {
  background-color: var(--amarelo);
  box-shadow: 0 0 0 4px var(--amarelo-suave);
  color: var(--tinta);
}

.linha-do-tempo-passo.atual strong {
  font-weight: 700;
}

.linha-do-tempo-passo.cancelado .linha-do-tempo-marcador {
  background-color: var(--vermelho);
  box-shadow: 0 0 0 4px var(--vermelho-suave);
  color: var(--branco);
}

.linha-do-tempo-texto {
  display: flex;
  flex-direction: column;
  padding-top: 1px;
  font-size: 0.875rem;
  line-height: 1.4;
}

.linha-do-tempo-texto strong {
  font-weight: 500;
}

.linha-do-tempo-texto small {
  font-size: 0.75rem;
  color: var(--texto-3);
}

/* Lista de compras */
.lista-pedidos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lista-pedidos-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas:
    'icone info seta'
    'icone lado seta';
  align-items: center;
  gap: 8px 14px;
  padding: 16px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background-color: var(--branco);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lista-pedidos-item:hover {
  border-color: var(--linha-2);
  box-shadow: var(--sombra-1);
}

.lista-pedidos-icone {
  grid-area: icone;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--superficie);
  color: var(--texto-2);
}

.lista-pedidos-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lista-pedidos-info strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinta);
}

.lista-pedidos-lado {
  grid-area: lado;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}

.lista-pedidos-lado > strong {
  margin-left: auto;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tinta);
}

.lista-pedidos-seta {
  grid-area: seta;
  color: var(--texto-3);
}

@media (min-width: 640px) {
  .lista-pedidos-item {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    grid-template-areas: 'icone info lado seta';
    padding: 16px 20px;
  }

  .lista-pedidos-icone {
    align-self: center;
  }

  .lista-pedidos-lado {
    flex-direction: column;
    align-items: flex-end;
  }
}

/* ==========================================================================
   Contato
   ========================================================================== */

.contato-layout {
  display: grid;
  gap: 16px;
  align-items: start;
}

.contato-canais {
  display: grid;
  gap: 10px;
}

@media (min-width: 640px) and (max-width: 959px) {
  .contato-canais {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .contato-canais .canal-seta {
    display: none;
  }
}

.canal {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.canal:hover {
  border-color: var(--linha-2);
  box-shadow: var(--sombra-1);
}

.canal-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--raio);
  background-color: var(--amarelo-suave);
  color: var(--tinta);
  font-size: 22px;
}

.canal-icone-whatsapp {
  background-color: #e5f6ec;
  color: var(--whatsapp);
}

.canal-icone-instagram {
  background-color: #fce9f3;
  color: #a8246c;
}

.canal-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.canal-texto strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinta);
}

.canal-texto span {
  font-size: 0.8125rem;
  color: var(--texto-3);
}

.canal-seta {
  margin-left: auto;
  font-size: 18px;
  color: var(--texto-3);
}

.contato-formulario h2 {
  font-size: 1.1875rem;
}

.contato-formulario-intro {
  margin: 4px 0 18px;
  font-size: 0.875rem;
  color: var(--texto-3);
}

.contato-campo-armadilha {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  overflow: hidden;
}

@media (min-width: 960px) {
  .contato-layout {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 24px;
  }

  .contato-formulario {
    padding: 28px;
  }
}

/* ==========================================================================
   Endereço e horários
   ========================================================================== */

.endereco-layout {
  display: grid;
  gap: 16px;
  align-items: start;
}

.endereco-local {
  padding: 0;
  overflow: hidden;
}

.endereco-mapa {
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--linha);
  background-color: var(--superficie-2);
}

.endereco-mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.endereco-local-texto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 20px;
}

.endereco-local-texto h2 {
  font-size: 1.0625rem;
}

.endereco-texto {
  margin-top: 4px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--texto-2);
}

.endereco-horarios {
  display: grid;
  gap: 16px;
}

.endereco-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 1rem;
}

.endereco-card h2 .material-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background-color: var(--amarelo-suave);
  color: var(--tinta);
  font-size: 19px;
}

.endereco-horario-lista > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--linha);
  font-size: 0.875rem;
}

.endereco-horario-lista > div:first-child {
  border-top: none;
}

.endereco-horario-lista dt {
  color: var(--texto-2);
}

.endereco-horario-lista dd {
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
}

.endereco-horario-fechado {
  font-size: 0.875rem;
  color: var(--texto-3);
}

.endereco-frete {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--amarelo-borda);
  border-radius: var(--raio-g);
  background-color: var(--amarelo-suave);
}

.endereco-frete .material-icons {
  font-size: 24px;
  color: var(--tinta);
}

.endereco-frete strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--tinta);
}

.endereco-frete span {
  font-size: 0.8125rem;
  color: var(--texto-2);
}

@media (min-width: 960px) {
  .endereco-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 24px;
  }

  .endereco-mapa {
    aspect-ratio: 16 / 10;
  }

  .endereco-local-texto {
    padding: 20px 24px 24px;
  }
}

/* ==========================================================================
   Páginas de texto (sobre, trocas e devoluções, privacidade)
   ========================================================================== */

.texto-legal {
  max-width: 760px;
}

.texto-legal h2 {
  margin: 28px 0 8px;
  font-size: 1.125rem;
  color: var(--tinta);
}

.texto-legal p,
.texto-legal li {
  line-height: 1.6;
  color: var(--texto-2);
}

.texto-legal p + p {
  margin-top: 10px;
}

.texto-legal ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-left: 20px;
  list-style: disc;
}

.texto-legal a {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.texto-legal strong {
  color: var(--tinta);
}

.texto-legal-atualizacao {
  margin-top: 32px;
  font-size: 0.8125rem;
  color: var(--texto-3);
}

/* Identificação da empresa e links das políticas no rodapé e no checkout */
.rodape-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.rodape-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rodape-legal a:hover {
  color: var(--tinta);
}

.checkout-aceite {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--texto-3);
  text-align: center;
}

.checkout-aceite a {
  color: var(--texto-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}