/* O catálogo de móveis (public/catalogo-ui.js), o mesmo no Admin → Mobiliar e no + Móvel do mapa. As cores saem dos
   tokens de estilo.css (claro e escuro); o admin, branco sempre, troca as --cat-* pelas dele em admin.css.
   --cat-foto-h = altura da foto do cartão; --cat-col = largura mínima de cada coluna. */
.cat {
  --cat-tinta: var(--tinta); --cat-suave: var(--suave); --cat-linha: var(--linha); --cat-cartao: var(--painel);
  --cat-fundo-foto: color-mix(in srgb, var(--tinta) 4%, var(--painel)); --cat-acento: var(--acento); --cat-no-acento: var(--no-acento);
  display: flex; flex-direction: column; gap: 8px; min-height: 0; color: var(--cat-tinta);
}
.cat :focus-visible { outline: 2px solid var(--cat-acento); outline-offset: 2px; }

/* busca (e o título de quem usa, na mesma linha) */
.cat-topo { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cat-busca { flex: 1 1 180px; min-width: 0; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 5px 0 10px;
  border: 1px solid var(--cat-linha); border-radius: 11px; background: var(--cat-cartao); color: var(--cat-suave); cursor: text; }
.cat-busca:focus-within { border-color: var(--cat-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-acento) 18%, transparent); }
.cat .cat-busca svg { width: 16px; height: 16px; flex: none; }
.cat .cat-busca input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--cat-tinta); font: 500 13.5px/1 var(--corpo); }
.cat-busca input::placeholder { color: var(--cat-suave); }
.cat-busca input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.cat .cat-limpar { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--cat-suave); cursor: pointer; }
.cat .cat-limpar:hover { background: color-mix(in srgb, var(--cat-acento) 12%, transparent); color: var(--cat-tinta); }
.cat .cat-limpar svg { width: 15px; height: 15px; }

/* seções: filtram a lista; o ligado fica cheio */
.cat-secoes { flex: none; display: flex; flex-wrap: wrap; gap: 4px; }
.cat .cat-secoes button { height: 28px; padding: 0 11px; border: 1px solid var(--cat-linha); border-radius: 999px; background: var(--cat-cartao); color: var(--cat-tinta);
  font: 600 12px/1 var(--corpo); cursor: pointer; transition: border-color .12s; }
.cat .cat-secoes button:hover { border-color: color-mix(in srgb, var(--cat-acento) 45%, var(--cat-linha)); }
.cat .cat-secoes button[aria-pressed="true"] { border-color: var(--cat-acento); background: var(--cat-acento); color: var(--cat-no-acento); }

/* a lista é a única parte que rola */
.cat-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 14px; padding: 2px 2px 4px; }
.cat-secao h4 { margin: 0 2px 6px; color: var(--cat-suave); font: 600 11px/1.2 var(--corpo); letter-spacing: .05em; text-transform: uppercase; }
.cat-uma .cat-secao h4 { display: none; }
.cat-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cat-col, 148px), 1fr)); gap: 8px; }
.cat-nada { margin: 18px 6px; color: var(--cat-suave); font: 500 13px/1.5 var(--corpo); text-align: center; }
.cat .cat-limpar-busca { display: inline; height: auto; padding: 0; border: 0; background: none; color: var(--cat-acento); font: 600 13px/1.5 var(--corpo); text-decoration: underline; cursor: pointer; }

/* o cartão é a família: foto e nome da variação escolhida; as miniaturas das variações ficam na faixa de baixo da foto,
   por cima dela (assim todo cartão tem a mesma altura, com ou sem variação) */
.cat-familia { position: relative; display: flex; border: 1px solid var(--cat-linha); border-radius: 12px; background: var(--cat-cartao); transition: border-color .15s, box-shadow .15s; }
.cat-familia:hover { border-color: color-mix(in srgb, var(--cat-acento) 35%, var(--cat-linha)); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--cat-acento) 50%, transparent); }
.cat .cat-movel { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; height: auto; padding: 6px 6px 8px; border: 0; border-radius: 12px;
  background: none; color: var(--cat-tinta); text-align: left; cursor: grab; }
.cat .cat-movel:active { cursor: grabbing; }
.cat-foto { display: block; height: var(--cat-foto-h, 88px); border-radius: 8px; background: var(--cat-fundo-foto); overflow: hidden; }
.cat-foto img { width: 100%; height: 100%; display: block; object-fit: contain; }
.cat-familia.varias .cat-foto img { height: calc(100% - 28px); }
.cat-txt { display: grid; gap: 1px; min-width: 0; padding: 0 2px; }
.cat-txt strong { font: 600 12.5px/1.25 var(--corpo); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cat-txt small { color: var(--cat-suave); font: 500 10.5px/1.45 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-qtd { position: absolute; top: 10px; left: 10px; padding: 1px 6px; border-radius: 999px; background: var(--cat-cartao); color: var(--cat-acento); font: 600 10.5px/1.5 var(--corpo);
  box-shadow: 0 1px 3px rgba(31, 27, 45, .14); }
.cat-mais { position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--cat-cartao); color: var(--cat-acento);
  box-shadow: 0 1px 3px rgba(31, 27, 45, .14); }
.cat .cat-mais svg { width: 14px; height: 14px; }
.cat-familia:hover .cat-mais, .cat-movel:focus-visible .cat-mais { background: var(--cat-acento); color: var(--cat-no-acento); }

.cat-vars { position: absolute; left: 11px; right: 11px; top: calc(var(--cat-foto-h, 88px) - 25px); display: flex; gap: 4px; }
.cat .cat-var { position: relative; flex: 0 1 36px; min-width: 0; height: 26px; padding: 1px; border: 1px solid var(--cat-linha); border-radius: 7px; background: var(--cat-cartao); cursor: pointer; }
.cat .cat-var:hover { border-color: color-mix(in srgb, var(--cat-acento) 55%, var(--cat-linha)); }
.cat .cat-var[aria-checked="true"] { border-color: var(--cat-acento); box-shadow: 0 0 0 1px var(--cat-acento); }
/* a foto da peça tem muita margem: na miniatura ela cresce 1,6× e o recorte fica do tamanho do botão */
.cat-var img { width: 100%; height: 100%; display: block; object-fit: contain; transform: scale(1.6); clip-path: inset(18.75% round 4px); }
.cat-var-qtd { position: absolute; top: -6px; right: -6px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--cat-acento); color: var(--cat-no-acento);
  font: 600 9.5px/15px var(--corpo); font-style: normal; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .cat-familia, .cat .cat-secoes button { transition: none; }
}