/* ==========================================================================
   ZENTH TRADE — DESIGN SYSTEM
   zt-components.css  ·  v0.5.0
   Depende de zt-tokens.css
   --------------------------------------------------------------------------
   Principio: o espaco separa, a linha apenas confirma. Pesos baixos,
   muito ar e uma unica camada de vidro reservada a superficies que ficam
   por cima do conteudo.
   --------------------------------------------------------------------------
   0.4.0  Subiram para ca os blocos que o prototipo repetia inline em toda
          pagina: migalhas, topo de pagina, linha de preco do card e estado
          vazio. Sao estrutura de pagina, nao de secao.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--zt-fundo);
  color: var(--zt-tinta);
  font-family: var(--zt-fonte);
  font-size: var(--zt-txt-md);
  font-weight: var(--zt-peso-normal);
  line-height: var(--zt-lh-normal);
  letter-spacing: var(--zt-track-normal);
  font-feature-settings: "tnum" 1, "cv05" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: var(--zt-peso-semi); letter-spacing: var(--zt-track-titulo); line-height: var(--zt-lh-titulo); }
p { margin: 0; }
img, svg { max-width: 100%; }
a { color: var(--zt-marca); }

:focus-visible { outline: 2px solid var(--zt-foco); outline-offset: 3px; border-radius: var(--zt-raio-sm); }

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

/* ==========================================================================
   TIPOGRAFIA
   ========================================================================== */

.zt-display {
  font-size: clamp(2.25rem, 6vw, var(--zt-txt-5xl));
  font-weight: var(--zt-peso-forte);
  line-height: var(--zt-lh-display);
  letter-spacing: var(--zt-track-display);
}
.zt-h1 { font-size: clamp(var(--zt-txt-2xl), 4vw, var(--zt-txt-4xl)); font-weight: var(--zt-peso-semi); }
.zt-h2 { font-size: clamp(var(--zt-txt-xl), 2.6vw, var(--zt-txt-2xl)); font-weight: var(--zt-peso-semi); }
.zt-h3 { font-size: var(--zt-txt-lg); font-weight: var(--zt-peso-semi); }

.zt-lead {
  font-size: var(--zt-txt-lg);
  line-height: var(--zt-lh-solto);
  color: var(--zt-tinta-suave);
  max-width: var(--zt-largura-texto);
  letter-spacing: 0;
}

.zt-sm { font-size: var(--zt-txt-sm); }
.zt-xs { font-size: var(--zt-txt-xs); letter-spacing: var(--zt-track-mini); }
.zt-suave { color: var(--zt-tinta-suave); }
.zt-tenue { color: var(--zt-tinta-tenue); }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

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

.zt-secao { padding-block: var(--zt-esp-9); }
.zt-secao--curta { padding-block: var(--zt-esp-8); }

.zt-secao-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zt-esp-5);
  flex-wrap: wrap;
  margin-bottom: var(--zt-esp-7);
}
.zt-secao-topo p { margin-top: var(--zt-esp-2); }

/* ==========================================================================
   BOTOES
   ========================================================================== */

.zt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zt-esp-2);
  font-family: inherit;
  font-size: var(--zt-txt-sm);
  font-weight: var(--zt-peso-medio);
  line-height: 1;
  letter-spacing: 0;
  padding: 0.875rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--zt-raio-full);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--zt-transicao), color var(--zt-transicao), border-color var(--zt-transicao);
}
.zt-btn i { font-size: 1.2em; }

.zt-btn--acao { background: var(--zt-acento); color: var(--zt-roxo-900); font-weight: var(--zt-peso-semi); }
.zt-btn--acao:hover { background: var(--zt-laranja-300); }

.zt-btn--tinta { background: var(--zt-marca); color: var(--zt-tinta-inversa); }
.zt-btn--tinta:hover { background: var(--zt-roxo-700); }

.zt-btn--vazado { border-color: var(--zt-neutro-200); color: var(--zt-tinta); background: var(--zt-superficie); }
.zt-btn--vazado:hover { border-color: var(--zt-roxo-300); color: var(--zt-marca); }

.zt-btn--vidro {
  background: var(--zt-vidro-claro);
  -webkit-backdrop-filter: var(--zt-vidro-blur);
  backdrop-filter: var(--zt-vidro-blur);
  border-color: var(--zt-vidro-borda);
  color: var(--zt-tinta);
}
.zt-btn--vidro:hover { background: rgba(255,255,255,0.85); }

.zt-btn--vazado-claro { border-color: rgba(251,249,249,0.35); color: var(--zt-tinta-inversa); background: transparent; }
.zt-btn--vazado-claro:hover { background: rgba(251,249,249,0.12); border-color: rgba(251,249,249,0.6); }

.zt-btn--bloco { width: 100%; }
.zt-btn--mini { padding: 0.625rem 1rem; font-size: var(--zt-txt-xs); }

.zt-btn--inativo { background: transparent; border-color: var(--zt-neutro-200); color: var(--zt-tinta-tenue); cursor: not-allowed; pointer-events: none; }

.zt-link {
  font-size: var(--zt-txt-sm);
  font-weight: var(--zt-peso-medio);
  color: var(--zt-marca);
  text-decoration: none;
  border-bottom: 1px solid var(--zt-roxo-200);
  padding-bottom: 2px;
  transition: border-color var(--zt-transicao), color var(--zt-transicao);
}
.zt-link:hover { color: var(--zt-acento-forte); border-bottom-color: var(--zt-acento); }

/* ==========================================================================
   ESTADOS DE PRODUTO
   Condicao = selo de vidro sobre a foto (deixa a imagem aparecer).
   Disponibilidade = texto com marcador, fora da imagem.
   ========================================================================== */

.zt-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--zt-txt-2xs);
  font-weight: var(--zt-peso-semi);
  letter-spacing: var(--zt-track-mini);
  padding: 0.3125rem 0.625rem;
  border-radius: var(--zt-raio-full);
  line-height: 1.3;
  color: var(--zt-tinta);
  background: var(--zt-vidro-claro);
  -webkit-backdrop-filter: var(--zt-vidro-blur-leve);
  backdrop-filter: var(--zt-vidro-blur-leve);
  border: 1px solid var(--zt-vidro-borda);
}
.zt-selo::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--zt-raio-full);
  background: currentColor;
  flex: none;
}
.zt-selo--lacrado::before  { background: var(--zt-cond-lacrado); }
.zt-selo--vitrine::before  { background: var(--zt-cond-vitrine); }
.zt-selo--seminovo::before { background: var(--zt-cond-seminovo); }

.zt-disp {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--zt-txt-xs);
  font-weight: var(--zt-peso-medio);
  letter-spacing: var(--zt-track-mini);
}
.zt-disp::before { content: ""; width: 6px; height: 6px; border-radius: var(--zt-raio-full); background: currentColor; flex: none; }
.zt-disp--pronta    { color: var(--zt-disp-pronta); }
.zt-disp--encomenda { color: var(--zt-disp-encomenda); }
.zt-disp--esgotado  { color: var(--zt-disp-esgotado); }
.zt-disp--esgotado::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* ==========================================================================
   PRECO
   ========================================================================== */

.zt-preco {
  font-size: var(--zt-txt-xl);
  white-space: nowrap;
  font-weight: var(--zt-peso-semi);
  line-height: 1.1;
  letter-spacing: var(--zt-track-titulo);
  color: var(--zt-tinta);
}
.zt-preco small {
  display: block;
  font-size: var(--zt-txt-xs);
  font-weight: var(--zt-peso-normal);
  color: var(--zt-tinta-tenue);
  letter-spacing: var(--zt-track-mini);
  margin-bottom: 0.1875rem;
}
.zt-preco--consulta {
  white-space: normal;
  font-size: var(--zt-txt-sm);
  font-weight: var(--zt-peso-medio);
  color: var(--zt-marca-clara);
  letter-spacing: 0;
}

/* ==========================================================================
   PRODUTO
   Superficie clara, borda quase invisivel, muito respiro interno.
   ========================================================================== */

.zt-grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--zt-esp-5);
}
.zt-grade--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .zt-grade, .zt-grade--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .zt-grade, .zt-grade--3 { grid-template-columns: 1fr; } }

.zt-produto {
  background: var(--zt-superficie);
  border: var(--zt-regra);
  border-radius: var(--zt-raio-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--zt-transicao), transform var(--zt-transicao);
}
.zt-produto:hover { border-color: var(--zt-roxo-200); }

.zt-produto__midia {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: var(--zt-esp-6);
  background: linear-gradient(160deg, var(--zt-roxo-25) 0%, var(--zt-neutro-100) 100%);
}
.zt-produto__selos { position: absolute; top: var(--zt-esp-4); left: var(--zt-esp-4); display: flex; gap: var(--zt-esp-2); }
.zt-produto__ref {
  position: absolute;
  top: var(--zt-esp-4);
  right: var(--zt-esp-4);
  font-size: var(--zt-txt-2xs);
  color: var(--zt-tinta-tenue);
  letter-spacing: var(--zt-track-mini);
}

.zt-produto__corpo {
  padding: var(--zt-esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--zt-esp-4);
  flex: 1;
}
.zt-produto__marca { font-size: var(--zt-txt-xs); color: var(--zt-tinta-tenue); letter-spacing: var(--zt-track-mini); }
.zt-produto__titulo { font-size: var(--zt-txt-lg); font-weight: var(--zt-peso-semi); line-height: 1.25; }
.zt-produto__titulo a { color: inherit; text-decoration: none; }
.zt-produto__titulo a:hover { color: var(--zt-marca-clara); }

.zt-produto__especs { display: grid; gap: var(--zt-esp-2); font-size: var(--zt-txt-xs); }
.zt-produto__especs div { display: flex; justify-content: space-between; gap: var(--zt-esp-3); align-items: baseline; }
.zt-produto__especs span:first-child { flex: none; }
.zt-produto__especs span:first-child { color: var(--zt-tinta-tenue); }
.zt-produto__especs span:last-child { color: var(--zt-tinta-suave); text-align: right; min-width: 0; overflow-wrap: anywhere; }

.zt-produto__rodape {
  margin-top: auto;
  padding-top: var(--zt-esp-4);
  border-top: var(--zt-regra-clara);
  display: flex;
  flex-direction: column;
  gap: var(--zt-esp-4);
}

.zt-cores { display: flex; gap: 5px; }
.zt-cor { width: 13px; height: 13px; border-radius: var(--zt-raio-full); box-shadow: inset 0 0 0 1px rgba(18,12,63,0.15); }

.zt-figura { display: grid; place-items: center; color: var(--zt-roxo-200); }

/* ==========================================================================
   FILTROS
   ========================================================================== */

.zt-filtros { display: flex; flex-wrap: wrap; gap: var(--zt-esp-2); }
.zt-filtro {
  font-family: inherit;
  font-size: var(--zt-txt-sm);
  font-weight: var(--zt-peso-medio);
  padding: 0.5rem 1rem;
  border: 1px solid var(--zt-neutro-200);
  border-radius: var(--zt-raio-full);
  background: var(--zt-superficie);
  color: var(--zt-tinta-suave);
  cursor: pointer;
  transition: all var(--zt-transicao);
}
.zt-filtro:hover { border-color: var(--zt-roxo-300); color: var(--zt-tinta); }
.zt-filtro[aria-pressed="true"] { background: var(--zt-marca); border-color: var(--zt-marca); color: var(--zt-tinta-inversa); }

/* ==========================================================================
   VIDRO — barra fixa
   ========================================================================== */

.zt-topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--zt-vidro-claro);
  -webkit-backdrop-filter: var(--zt-vidro-blur);
  backdrop-filter: var(--zt-vidro-blur);
  border-bottom: 1px solid rgba(18, 12, 63, 0.07);
}
.zt-topo--tinta {
  background: var(--zt-vidro-escuro);
  border-bottom: 1px solid var(--zt-vidro-borda-escura);
  color: var(--zt-tinta-inversa);
}
.zt-topo__linha { display: flex; align-items: center; gap: var(--zt-esp-5); padding-block: var(--zt-esp-4); }
.zt-topo__logo { flex: none; display: block; }
.zt-topo__logo img { height: 30px; width: auto; display: block; }

.zt-busca {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--zt-esp-3);
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--zt-neutro-200);
  border-radius: var(--zt-raio-full);
  padding-inline: var(--zt-esp-4);
  min-width: 0;
  transition: border-color var(--zt-transicao), background var(--zt-transicao);
}
.zt-busca:focus-within { border-color: var(--zt-roxo-300); background: #fff; }
.zt-busca i { color: var(--zt-tinta-tenue); font-size: 1.1rem; }
.zt-busca input {
  flex: 1; border: 0; background: transparent;
  padding: 0.6875rem 0;
  font-family: inherit; font-size: var(--zt-txt-sm); color: var(--zt-tinta); min-width: 0;
}
.zt-busca input::placeholder { color: var(--zt-tinta-tenue); }
.zt-busca input:focus { outline: none; }

.zt-topo__acao {
  display: inline-flex; align-items: center; gap: var(--zt-esp-2);
  color: var(--zt-tinta); text-decoration: none;
  font-size: var(--zt-txt-sm); font-weight: var(--zt-peso-medio); white-space: nowrap;
  transition: color var(--zt-transicao);
}
.zt-topo__acao i { font-size: 1.25rem; }
.zt-topo__acao:hover { color: var(--zt-marca-clara); }
.zt-topo--tinta .zt-topo__acao { color: var(--zt-tinta-inversa); }
.zt-topo--tinta .zt-topo__acao:hover { color: var(--zt-acento); }

.zt-contador {
  background: var(--zt-acento); color: var(--zt-roxo-900);
  font-size: var(--zt-txt-2xs); font-weight: var(--zt-peso-semi);
  min-width: 20px; height: 20px; padding-inline: 6px;
  border-radius: var(--zt-raio-full);
  display: inline-grid; place-items: center; line-height: 1;
}

.zt-menu { border-top: var(--zt-regra-clara); }
.zt-menu ul { display: flex; gap: var(--zt-esp-6); list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.zt-menu a {
  display: block; padding: var(--zt-esp-3) 0;
  font-size: var(--zt-txt-sm); font-weight: var(--zt-peso-normal);
  color: var(--zt-tinta-suave); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--zt-transicao), border-color var(--zt-transicao);
}
.zt-menu a:hover { color: var(--zt-tinta); }
.zt-menu a[aria-current="page"] { color: var(--zt-tinta); border-bottom-color: var(--zt-acento); }

/* No celular a busca ganha uma linha propria e as acoes ficam so com icone:
   catalogo de celular e navegado por modelo, entao a busca nao pode sumir. */
@media (max-width: 760px) {
  .zt-topo__linha { flex-wrap: wrap; gap: var(--zt-esp-3); }
  .zt-topo__logo { margin-right: auto; }
  .zt-busca { order: 3; flex-basis: 100%; }
  .zt-topo__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .zt-topo__acao { gap: var(--zt-esp-1); }
  .zt-topo__acao i { font-size: 1.5rem; }
}

/* ==========================================================================
   VIDRO — painel da lista de cotacao
   ========================================================================== */

.zt-painel {
  width: min(420px, 100%);
  background: var(--zt-vidro-claro);
  -webkit-backdrop-filter: var(--zt-vidro-blur);
  backdrop-filter: var(--zt-vidro-blur);
  border: 1px solid var(--zt-vidro-borda);
  border-radius: var(--zt-raio-xl);
  box-shadow: var(--zt-sombra-flutuante);
  padding: var(--zt-esp-5);
}
.zt-painel__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--zt-esp-3);
  padding-bottom: var(--zt-esp-4);
  border-bottom: var(--zt-regra-clara);
}
.zt-painel__linha {
  display: flex; gap: var(--zt-esp-3); align-items: center;
  padding-block: var(--zt-esp-4);
  border-bottom: var(--zt-regra-clara);
}
.zt-painel__miniatura {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--zt-raio-md);
  background: linear-gradient(160deg, var(--zt-roxo-50), var(--zt-neutro-100));
  display: grid; place-items: center; color: var(--zt-roxo-200);
}
.zt-painel__rodape { padding-top: var(--zt-esp-5); display: grid; gap: var(--zt-esp-3); }

/* ==========================================================================
   BLOCO DE MARCA
   ========================================================================== */

.zt-tinta-bloco {
  background: var(--zt-marca-gradiente);
  color: var(--zt-tinta-inversa);
  border-radius: var(--zt-raio-xl);
  padding: var(--zt-esp-8) var(--zt-esp-7);
  position: relative;
  overflow: hidden;
}
.zt-tinta-bloco h2, .zt-tinta-bloco h1 { color: var(--zt-tinta-inversa); }
.zt-tinta-bloco p { color: var(--zt-tinta-inversa-suave); }

/* Credenciais: sem caixas, apenas colunas com muito ar */
.zt-credenciais { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--zt-esp-6); }
.zt-credencial strong { display: block; font-size: var(--zt-txt-md); font-weight: var(--zt-peso-semi); margin-bottom: var(--zt-esp-2); }
.zt-credencial p { font-size: var(--zt-txt-sm); line-height: var(--zt-lh-normal); color: var(--zt-tinta-suave); }
.zt-credencial i { font-size: 1.375rem; color: var(--zt-acento); display: block; margin-bottom: var(--zt-esp-3); }
.zt-tinta-bloco .zt-credencial p { color: var(--zt-tinta-inversa-suave); }
@media (max-width: 860px) { .zt-credenciais { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .zt-credenciais { grid-template-columns: 1fr; } }

/* Rota de importacao */
.zt-rota { display: inline-flex; align-items: center; gap: var(--zt-esp-3); font-size: var(--zt-txt-xs); font-weight: var(--zt-peso-medio); letter-spacing: var(--zt-track-mini); }
.zt-rota__ponto { display: inline-flex; align-items: center; gap: 0.4375rem; }
.zt-rota__ponto::before { content: ""; width: 6px; height: 6px; border-radius: var(--zt-raio-full); background: var(--zt-acento); }
.zt-rota__traco { width: 40px; height: 1px; background: currentColor; opacity: 0.3; }

/* ==========================================================================
   NOTA
   ========================================================================== */

.zt-nota {
  display: flex; gap: var(--zt-esp-3);
  padding: var(--zt-esp-4) var(--zt-esp-5);
  background: var(--zt-acento-suave);
  border-radius: var(--zt-raio-md);
  font-size: var(--zt-txt-sm);
  line-height: var(--zt-lh-normal);
  color: var(--zt-neutro-700);
}
.zt-nota i { color: var(--zt-acento-forte); font-size: 1.2rem; flex: none; margin-top: 2px; }

/* ==========================================================================
   RODAPE
   ========================================================================== */

.zt-rodape {
  position: relative;
  overflow: hidden;
  background: var(--zt-marca-gradiente);
  color: var(--zt-tinta-inversa-suave);
  padding-block: var(--zt-esp-9) var(--zt-esp-6);
}

.zt-rodape__grade { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--zt-esp-7); }
.zt-rodape h4 { color: var(--zt-tinta-inversa); font-size: var(--zt-txt-sm); font-weight: var(--zt-peso-semi); margin-bottom: var(--zt-esp-4); }
.zt-rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--zt-esp-3); }
.zt-rodape a { color: var(--zt-tinta-inversa-suave); text-decoration: none; font-size: var(--zt-txt-sm); transition: color var(--zt-transicao); }
.zt-rodape a:hover { color: var(--zt-acento); }
.zt-rodape__dado { display: flex; gap: var(--zt-esp-3); font-size: var(--zt-txt-sm); line-height: var(--zt-lh-normal); margin-bottom: var(--zt-esp-3); }
.zt-rodape__dado i { color: var(--zt-roxo-300); font-size: 1.1rem; flex: none; margin-top: 4px; }
.zt-rodape__legal {
  border-top: var(--zt-regra-inversa);
  margin-top: var(--zt-esp-8); padding-top: var(--zt-esp-5);
  font-size: var(--zt-txt-xs); color: rgba(251,249,249,0.5);
  display: flex; justify-content: space-between; gap: var(--zt-esp-4); flex-wrap: wrap;
}
@media (max-width: 860px) { .zt-rodape__grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .zt-rodape__grade { grid-template-columns: 1fr; } }


/* ==========================================================================
   LISTA DE COTACAO — sobreposicao, avisos e controles
   ========================================================================== */

.zt-lista-fundo {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(18, 12, 63, 0.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: flex-end;
  padding: var(--zt-esp-4);
}
.zt-lista-fundo[hidden] { display: none; }

/* Painel quase opaco: sobre fundo escurecido, o vidro translucido
   acinzenta o branco e derruba a legibilidade. O borrao continua,
   mas a superficie fica limpa. */
.zt-lista-painel {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.9);
  max-height: calc(100vh - var(--zt-esp-6));
  overflow-y: auto;
  outline: none;
  animation: zt-entrar 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes zt-entrar { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zt-lista-painel { animation: none; } }

.zt-painel__miniatura img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--zt-raio-md); }

.zt-lista-fechar,
.zt-lista-remover {
  border: 0; background: none; cursor: pointer;
  color: var(--zt-tinta-suave); font-size: 1.15rem;
  display: grid; place-items: center; padding: var(--zt-esp-1);
  border-radius: var(--zt-raio-full);
  transition: color var(--zt-transicao), background var(--zt-transicao);
}
.zt-lista-fechar:hover,
.zt-lista-remover:hover { color: var(--zt-tinta); background: rgba(18, 12, 63, 0.06); }

.zt-lista-qtd { display: inline-flex; align-items: center; gap: var(--zt-esp-2); margin-top: var(--zt-esp-2); }
.zt-lista-qtd button {
  width: 24px; height: 24px;
  border: 1px solid var(--zt-neutro-200); border-radius: var(--zt-raio-full);
  background: var(--zt-superficie); color: var(--zt-tinta);
  font-family: inherit; font-size: var(--zt-txt-sm); line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.zt-lista-qtd button:hover { border-color: var(--zt-roxo-300); }
.zt-lista-qtd span { font-size: var(--zt-txt-sm); font-weight: var(--zt-peso-medio); min-width: 14px; text-align: center; }

/* Aviso de item adicionado */
.zt-aviso {
  position: fixed;
  left: 50%;
  bottom: var(--zt-esp-5);
  transform: translateX(-50%);
  z-index: 95;
  display: flex; align-items: center; gap: var(--zt-esp-3);
  background: var(--zt-inverso);
  color: var(--zt-tinta-inversa);
  font-size: var(--zt-txt-sm);
  padding: var(--zt-esp-3) var(--zt-esp-4);
  border-radius: var(--zt-raio-full);
  box-shadow: var(--zt-sombra-flutuante);
  animation: zt-subir 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.zt-aviso i { color: var(--zt-acento); font-size: 1.15rem; }
.zt-aviso button {
  border: 0; background: none; cursor: pointer;
  color: var(--zt-acento); font-family: inherit; font-size: var(--zt-txt-sm);
  font-weight: var(--zt-peso-semi); padding: 0;
}
.zt-aviso--saindo { opacity: 0; transition: opacity 380ms ease; }
@keyframes zt-subir { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zt-aviso { animation: none; } }

@media (max-width: 560px) {
  .zt-lista-fundo { padding: 0; align-items: flex-end; }
  .zt-lista-painel { width: 100%; max-height: 88vh; border-radius: var(--zt-raio-xl) var(--zt-raio-xl) 0 0; }
  @keyframes zt-entrar { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}


/* ==========================================================================
   FORMULARIO
   ========================================================================== */

.zt-campo { display: grid; gap: var(--zt-esp-2); }
.zt-campo__rotulo { font-size: var(--zt-txt-sm); font-weight: var(--zt-peso-medio); color: var(--zt-tinta); }
.zt-campo__rotulo span { color: var(--zt-tinta-tenue); font-weight: var(--zt-peso-normal); }
.zt-campo__apoio { font-size: var(--zt-txt-xs); color: var(--zt-tinta-tenue); }

.zt-entrada,
.zt-area,
.zt-selecao {
  width: 100%;
  font-family: inherit;
  font-size: var(--zt-txt-md);
  color: var(--zt-tinta);
  background: var(--zt-superficie);
  border: 1px solid var(--zt-neutro-200);
  border-radius: var(--zt-raio-md);
  padding: 0.8125rem var(--zt-esp-4);
  transition: border-color var(--zt-transicao), box-shadow var(--zt-transicao);
}
.zt-area { min-height: 140px; resize: vertical; line-height: var(--zt-lh-normal); }
.zt-selecao { appearance: none; cursor: pointer; padding-right: var(--zt-esp-7); }

.zt-entrada::placeholder,
.zt-area::placeholder { color: var(--zt-tinta-tenue); }

.zt-entrada:hover,
.zt-area:hover,
.zt-selecao:hover { border-color: var(--zt-neutro-300); }

.zt-entrada:focus,
.zt-area:focus,
.zt-selecao:focus {
  outline: none;
  border-color: var(--zt-marca-clara);
  box-shadow: 0 0 0 3px var(--zt-roxo-50);
}

.zt-campo[data-erro="sim"] .zt-entrada,
.zt-campo[data-erro="sim"] .zt-area { border-color: #cf3838; }
.zt-campo__erro { font-size: var(--zt-txt-xs); color: #a32d2d; display: none; }
.zt-campo[data-erro="sim"] .zt-campo__erro { display: block; }

.zt-selecao-envolve { position: relative; }
.zt-selecao-envolve i {
  position: absolute; right: var(--zt-esp-4); top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--zt-tinta-tenue); font-size: 1.1rem;
}

/* Consentimento */
.zt-consentimento { display: flex; gap: var(--zt-esp-3); align-items: flex-start; }
.zt-consentimento input {
  width: 18px; height: 18px; flex: none; margin-top: 3px;
  accent-color: var(--zt-marca); cursor: pointer;
}
.zt-consentimento label { font-size: var(--zt-txt-sm); color: var(--zt-tinta-suave); line-height: var(--zt-lh-normal); }
.zt-consentimento a { color: var(--zt-marca); }

.zt-formulario { display: grid; gap: var(--zt-esp-5); }
.zt-formulario__par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--zt-esp-4); }
@media (max-width: 620px) { .zt-formulario__par { grid-template-columns: 1fr; } }

/* ==========================================================================
   PAGINA DE TEXTO
   ========================================================================== */

.zt-texto { max-width: var(--zt-largura-texto); }
.zt-texto h2 { font-size: var(--zt-txt-xl); font-weight: var(--zt-peso-semi); margin-top: var(--zt-esp-7); margin-bottom: var(--zt-esp-3); scroll-margin-top: 140px; }
.zt-texto h2:first-child { margin-top: 0; }
.zt-texto h3 { font-size: var(--zt-txt-lg); font-weight: var(--zt-peso-semi); margin-top: var(--zt-esp-5); margin-bottom: var(--zt-esp-2); }
.zt-texto p { margin-bottom: var(--zt-esp-4); line-height: var(--zt-lh-solto); color: var(--zt-tinta-suave); }
.zt-texto ul, .zt-texto ol { margin: 0 0 var(--zt-esp-4); padding-left: var(--zt-esp-5); color: var(--zt-tinta-suave); line-height: var(--zt-lh-solto); }
.zt-texto li { margin-bottom: var(--zt-esp-2); }
.zt-texto strong { color: var(--zt-tinta); font-weight: var(--zt-peso-semi); }
.zt-texto a { color: var(--zt-marca); }

.zt-sumario { position: sticky; top: 140px; }
.zt-sumario h2 { font-size: var(--zt-txt-sm); font-weight: var(--zt-peso-semi); margin-bottom: var(--zt-esp-3); }
.zt-sumario ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--zt-esp-2); border-left: 2px solid var(--zt-neutro-150); }
.zt-sumario a {
  display: block; padding: var(--zt-esp-1) 0 var(--zt-esp-1) var(--zt-esp-4);
  font-size: var(--zt-txt-sm); color: var(--zt-tinta-suave); text-decoration: none;
  margin-left: -2px; border-left: 2px solid transparent;
}
.zt-sumario a:hover { color: var(--zt-tinta); border-left-color: var(--zt-roxo-300); }

.zt-conteudo-com-sumario { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: var(--zt-esp-8); align-items: start; }
@media (max-width: 900px) {
  .zt-conteudo-com-sumario { grid-template-columns: 1fr; }
  .zt-sumario { position: static; order: -1; }
}

/* ==========================================================================
   ERRO 404
   ========================================================================== */

.zt-erro-pagina { text-align: center; padding-block: var(--zt-esp-9); max-width: 46ch; margin-inline: auto; }
.zt-erro-pagina__codigo { font-size: var(--zt-txt-sm); font-weight: var(--zt-peso-medio); color: var(--zt-acento-forte); margin-bottom: var(--zt-esp-4); }
.zt-erro-pagina h1 { margin-bottom: var(--zt-esp-4); }
.zt-erro-pagina .zt-lead { margin-inline: auto; }
.zt-erro-pagina__acoes { display: flex; gap: var(--zt-esp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--zt-esp-6); }
.zt-erro-pagina__atalhos { margin-top: var(--zt-esp-8); padding-top: var(--zt-esp-5); border-top: var(--zt-regra); }


/* ==========================================================================
   TOPO DE PAGINA E MIGALHAS
   Estrutura comum a catalogo, ficha e paginas de texto.
   ========================================================================== */

.zt-migalhas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zt-esp-2);
  align-items: center;
  font-size: var(--zt-txt-xs);
  color: var(--zt-tinta-tenue);
}
.zt-migalhas a { color: var(--zt-tinta-suave); text-decoration: none; }
.zt-migalhas a:hover { color: var(--zt-marca); }

.zt-pagina-topo { padding-block: var(--zt-esp-7) var(--zt-esp-6); }
.zt-pagina-topo .zt-migalhas { margin-bottom: var(--zt-esp-4); }
.zt-pagina-topo .zt-lead { margin-top: var(--zt-esp-3); }

/* ==========================================================================
   CARD — pecas que o prototipo trazia como style inline
   ========================================================================== */

.zt-produto__capa { display: block; width: 100%; height: 100%; }
.zt-produto__midia img { width: 100%; height: 100%; object-fit: contain; }

.zt-produto__preco-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--zt-esp-2) var(--zt-esp-3);
}

/* ==========================================================================
   ESTADO VAZIO
   ========================================================================== */

.zt-vazio {
  text-align: center;
  padding-block: var(--zt-esp-8);
  max-width: 46ch;
  margin-inline: auto;
}
.zt-vazio > i { font-size: 2rem; color: var(--zt-roxo-200); display: block; margin-bottom: var(--zt-esp-4); }
.zt-vazio h2 { margin-bottom: var(--zt-esp-3); }
.zt-vazio__acoes { display: flex; gap: var(--zt-esp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--zt-esp-5); }
.zt-lista-vazia { padding-block: var(--zt-esp-6); }


/* ==========================================================================
   SECAO — aparencia comum a todos os widgets
   Fundo, espacamento e alinhamento moram aqui porque sao decisao de
   layout de pagina, nao de um widget especifico.
   ========================================================================== */

.zt-secao--sem-espaco { padding-block: 0; }
.zt-secao--ampla { padding-block: var(--zt-esp-10); }
.zt-secao--centro { text-align: center; }
.zt-secao--centro .zt-lead { margin-inline: auto; }

.zt-secao--papel { background: var(--zt-fundo); }
.zt-secao--alt { background: var(--zt-superficie-alt); }

/* Faixa escura: separa um bloco do resto e da o que borrar ao vidro do
   cabecalho quando a rolagem passa por aqui. */
.zt-secao--escura { background: var(--zt-inverso); color: var(--zt-tinta-inversa); }
.zt-secao--gradiente { background: var(--zt-marca-gradiente); color: var(--zt-tinta-inversa); }

.zt-secao--escura h1, .zt-secao--escura h2, .zt-secao--escura h3, .zt-secao--escura h4,
.zt-secao--gradiente h1, .zt-secao--gradiente h2, .zt-secao--gradiente h3, .zt-secao--gradiente h4 {
  color: var(--zt-tinta-inversa);
}
.zt-secao--escura .zt-lead, .zt-secao--escura .zt-suave,
.zt-secao--gradiente .zt-lead, .zt-secao--gradiente .zt-suave {
  color: var(--zt-tinta-inversa-suave);
}
.zt-secao--escura .zt-link, .zt-secao--gradiente .zt-link {
  color: var(--zt-tinta-inversa); border-bottom-color: rgba(251, 249, 249, 0.35);
}
.zt-secao--escura .zt-link:hover, .zt-secao--gradiente .zt-link:hover {
  color: var(--zt-acento); border-bottom-color: var(--zt-acento);
}