.cabecalho { border-bottom: 1px solid var(--linha); }
.cabecalho__linha {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--esp-3); padding-block: var(--esp-3);
}
.marca { font-family: var(--fonte-titulo); font-size: 1.3rem; text-decoration: none; }
.cabecalho__nav a { color: var(--texto-suave); }

/* O nav agora tem dois links; sem o flex eles colam no celular. */
.cabecalho__nav { display: flex; gap: var(--esp-3); }
.carrinho-selo { color: var(--texto); font-weight: 600; }

.abertura { padding-block: var(--esp-5) var(--esp-4); }
.abertura p { color: var(--texto-suave); }

.ambientes {
  display: flex; flex-wrap: wrap; gap: var(--esp-2);
  margin-bottom: var(--esp-4);
}
.ambiente {
  font: inherit; cursor: pointer;
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--linha-campo); border-radius: var(--raio);
  background: transparent; color: var(--texto);
}
.ambiente:hover { border-color: var(--texto); }
.ambiente--ativo {
  background: var(--texto); color: var(--fundo); border-color: var(--texto);
}

.barra-filtros {
  display: flex; flex-wrap: wrap; gap: var(--esp-2);
  padding-block: var(--esp-3);
  border-block: 1px solid var(--linha);
}
.barra-filtros input, .barra-filtros select { width: auto; flex: 1 1 12rem; }

.contagem { color: var(--texto-suave); font-size: 0.9rem; padding-top: var(--esp-3); }

.grade {
  display: grid; gap: var(--esp-4);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  padding-block: var(--esp-3) var(--esp-6);
}

.cartao { text-decoration: none; display: block; }
.cartao__foto {
  aspect-ratio: 4 / 3; background: var(--fundo-alt);
  overflow: hidden; margin-bottom: var(--esp-3);
}
.cartao__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.cartao:hover .cartao__foto img { transform: scale(1.03); }
.cartao__nome { font-size: 1.05rem; margin-bottom: var(--esp-1); }
.cartao__preco { margin-bottom: var(--esp-2); }
.cartao__preco span { color: var(--texto-suave); font-size: 0.85rem; }

.cartao__selos { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.selo {
  font-size: 0.75rem; color: var(--texto-suave);
  border: 1px solid var(--linha-campo); border-radius: var(--raio);
  padding: 2px var(--esp-2);
}

.vazio { color: var(--texto-suave); padding-block: var(--esp-5); }

/* ---------- Pagina do produto ---------- */
.produto { padding-block: var(--esp-5) var(--esp-6); }
.produto__grade {
  display: grid; gap: var(--esp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .produto__grade { grid-template-columns: 1.2fr 1fr; align-items: start; }
}

.produto__foto-grande { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fundo-alt); }
.produto__foto-grande--vazia { display: block; }
.produto__miniaturas { display: flex; gap: var(--esp-2); margin-top: var(--esp-2); }
.miniatura { padding: 0; border: 1px solid var(--linha-campo); background: none; cursor: pointer; width: 5rem; }
.miniatura img { aspect-ratio: 1; object-fit: cover; }

.produto__codigo { color: var(--texto-suave); font-size: 0.85rem; margin-bottom: var(--esp-1); }
.produto__preco { font-size: 1.5rem; margin-bottom: var(--esp-3); }
.produto__preco span { font-size: 0.9rem; color: var(--texto-suave); }
.produto__selos { margin-bottom: var(--esp-4); }
.produto__subtitulo { margin-top: var(--esp-5); }

.calc {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: var(--esp-4); margin-block: var(--esp-4);
  background: var(--fundo-alt);
}
.calc label { display: block; margin-bottom: var(--esp-2); }
.calc input { max-width: 12rem; }

.margens { border: 0; padding: 0; margin: var(--esp-4) 0 0; }
.margens legend { font-size: 0.85rem; color: var(--texto-suave); padding: 0; margin-bottom: var(--esp-2); }
.margens__botoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.margem {
  font: inherit; cursor: pointer; padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--linha-campo); border-radius: var(--raio); background: var(--fundo);
}
.margem--ativa { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.margens__dica { font-size: 0.85rem; color: var(--texto-suave); margin: var(--esp-2) 0 0; }

.calc__resultado { margin: var(--esp-4) 0 0; font-size: 1.15rem; min-height: 1.6em; }
.calc__nota { display: block; font-size: 0.8rem; color: var(--texto-suave); margin-top: var(--esp-1); }

.produto__adicionar { margin-top: var(--esp-4); }
.produto__adicionar:disabled { opacity: 0.5; cursor: not-allowed; }
.produto__aviso {
  margin-top: var(--esp-2); font-size: 0.9rem; color: var(--texto-suave);
  min-height: 1.4em;
}
.produto__aviso--ok { color: var(--sucesso); }
.produto__aviso--erro { color: var(--aviso); }
.produto__aviso a { color: var(--destaque-forte); }

.ficha { margin: 0; }
.ficha__linha {
  display: flex; justify-content: space-between; gap: var(--esp-3);
  padding-block: var(--esp-2); border-bottom: 1px solid var(--linha);
}
.ficha dt { color: var(--texto-suave); margin: 0; }
.ficha dd { margin: 0; text-align: right; }

.ajuda {
  font: inherit; font-size: 0.75rem; line-height: 1;
  width: 1.25rem; height: 1.25rem; padding: 0; cursor: pointer;
  border: 1px solid var(--linha-campo); border-radius: 50%;
  background: transparent; color: var(--texto-suave);
}

.balao {
  position: absolute; z-index: 10; max-width: 20rem;
  background: var(--texto); color: var(--fundo);
  padding: var(--esp-3); border-radius: var(--raio);
  font-size: 0.85rem; line-height: 1.5;
}

.assistente { padding-block: var(--esp-5) var(--esp-6); max-width: 46rem; }
.assistente__passo { font-size: 0.85rem; color: var(--texto-suave); margin-bottom: var(--esp-2); }
.assistente__ajuda { color: var(--texto-suave); }
.assistente__opcoes {
  display: grid; gap: var(--esp-2); margin-block: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.assistente__opcao {
  font: inherit; cursor: pointer; text-align: left;
  padding: var(--esp-3); border: 1px solid var(--linha-campo);
  border-radius: var(--raio); background: var(--fundo);
}
.assistente__opcao:hover { border-color: var(--texto); background: var(--fundo-alt); }
.assistente__aviso { color: var(--aviso); }

.guia { max-width: 44rem; padding-block: var(--esp-5) var(--esp-6); }
.guia__intro { color: var(--texto-suave); font-size: 1.1rem; }
.guia__indice {
  display: flex; flex-direction: column; gap: var(--esp-2);
  border-left: 2px solid var(--linha); padding-left: var(--esp-3);
  margin-block: var(--esp-5);
}
.guia section { margin-bottom: var(--esp-6); scroll-margin-top: var(--esp-4); }
.guia h2 { margin-bottom: var(--esp-3); }
.guia ul { padding-left: var(--esp-4); margin-bottom: var(--esp-3); }
.guia li { margin-bottom: var(--esp-2); }

.guia__desenho { margin: var(--esp-4) 0; }
.guia__desenho svg { width: 100%; max-width: 22rem; color: var(--texto-suave); }
.guia__desenho figcaption { font-size: 0.9rem; color: var(--texto-suave); margin-top: var(--esp-2); }

/* ---- Carrinho ---- */
.carrinho h1 { margin-block: var(--esp-5) var(--esp-4); }
.carrinho__lista { list-style: none; margin: 0; padding: 0; }

.carrinho__item {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  gap: var(--esp-3);
  padding-block: var(--esp-4);
  border-top: 1px solid var(--linha);
}
.carrinho__foto { aspect-ratio: 1; background: var(--fundo-alt); overflow: hidden; }
.carrinho__foto img { width: 100%; height: 100%; object-fit: cover; }

.carrinho__codigo { font-size: 0.8rem; color: var(--texto-suave); margin: 0; }
.carrinho__nome { font-size: 1.05rem; margin: var(--esp-1) 0 var(--esp-2); }
.carrinho__nome a { color: var(--texto); text-decoration: none; }
.carrinho__nome a:hover { text-decoration: underline; }

.carrinho__medida span { display: block; font-size: 0.85rem; color: var(--texto-suave); }
.carrinho__campo { width: 6rem; }
.carrinho__margem { font-size: 0.8rem; color: var(--texto-suave); margin: var(--esp-2) 0 0; }
.carrinho__margem a { color: var(--destaque-forte); }

.carrinho__passos { display: flex; align-items: center; gap: var(--esp-2); }
.carrinho__passo {
  font: inherit; cursor: pointer; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--linha-campo); border-radius: var(--raio);
  background: transparent; color: var(--texto);
}
.carrinho__passo:hover { border-color: var(--texto); }

.carrinho__erro { color: var(--aviso); font-size: 0.85rem; margin: var(--esp-2) 0 0; }

.carrinho__valores { text-align: right; }
.carrinho__subtotal { margin: 0; }
.carrinho__subtotal span { display: block; font-size: 0.8rem; color: var(--texto-suave); }
.carrinho__remover {
  font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0;
  margin-top: var(--esp-2); background: none; border: 0;
  color: var(--texto-suave); text-decoration: underline;
}
.carrinho__remover:hover { color: var(--aviso); }

.carrinho__rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3);
  justify-content: space-between;
  border-top: 1px solid var(--texto);
  padding-block: var(--esp-4) var(--esp-6);
}
.carrinho__total { font-size: 1.3rem; margin: 0; }
.carrinho__recado { color: var(--aviso); }

.faixa {
  border: 1px solid var(--linha-campo); border-radius: var(--raio);
  padding: var(--esp-3); margin-top: var(--esp-4);
}
.faixa p { margin: 0 0 var(--esp-1); }
.faixa p:last-child { margin-bottom: 0; }
.faixa--aviso { border-color: var(--aviso); color: var(--aviso); }
.faixa--pergunta { border-color: var(--texto); }
.faixa__botoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-3); }
.carrinho__recado .botao { margin-left: var(--esp-2); }

@media (max-width: 30rem) {
  .carrinho__item { grid-template-columns: 4.5rem 1fr; }
  .carrinho__valores { grid-column: 2; text-align: left; }
}

/* Alvo do observador de rolagem. A propria secao nao serve: ela nasce
   escondida, e elemento escondido nunca intersecta — o simulador nunca
   chegaria a ser montado. */
.simulador-sentinela { min-height: 1px; }

.simulador { padding-block: var(--esp-5); border-top: 1px solid var(--linha); }
.simulador__tela { display: block; width: 100%; height: auto; background: var(--fundo-alt); }
.simulador__miniaturas {
  display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-3);
}
.simulador__miniatura {
  font: inherit; cursor: pointer; padding: 0; width: 7rem;
  background: none; border: 1px solid var(--linha-campo); border-radius: var(--raio);
  color: var(--texto-suave); overflow: hidden; text-align: left;
}
.simulador__miniatura img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.simulador__miniatura span { display: block; padding: var(--esp-1) var(--esp-2); font-size: 0.75rem; }
.simulador__miniatura--ativa { border-color: var(--texto); color: var(--texto); }
.simulador__aviso { color: var(--texto-suave); font-size: 0.8rem; margin-top: var(--esp-2); }