/* Central: loja (fix/central-ui-bento, 2026-11-02). Carregado depois de styles.css: as regras daqui sobrepõem as de lá. */

/* A Loja (aba Skills) é um catálogo de itens do mesmo tipo: grade uniforme por setor,
   como a App Store e o Raycast Store. O bento de 2/3 + 1/3 saiu do código; o `.loja-grade`
   de styles.css ficou sem uso (não é mais pintado). */

/* a linha das abas: o seg; em Skills, a faixa de setores fica logo abaixo, na margem do título (não disputa a linha com o seg) */
.loja-linha{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:22px}
/* os setores numa faixa de uma linha só: quando não cabem (1024 e menos, e o celular), rolam na horizontal e não quebram em chip sozinho.
   O fade da borda direita (16 px, o mesmo do recuo final) mostra que há mais chips; no fim da rolagem o último chip para inteiro, antes do fade */
.loja-setores{margin:0;min-width:0;align-self:stretch;flex-wrap:nowrap;overflow-x:auto;padding:4px 16px 4px 0;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent)}
.loja-setores::-webkit-scrollbar{display:none}
.loja-setores > *{flex:none}
.loja-setores:empty{display:none}
.loja-setores .chip{min-height:34px;padding:5px 12px;font-size:13.5px;white-space:nowrap;cursor:pointer}
.loja-setores .chip i{font-style:normal;font-size:12px;color:var(--apagado)}
.loja-setores .chip.on i{color:var(--destaque)}

/* a busca fica à direita, alinhada pela base do título (.cabec); o título é que encolhe. Abaixo de ~1020px ela desce para a linha de baixo, ainda à direita */
.cabec:has(.loja-busca) > div:first-child{flex:1 1 280px;min-width:0}
.loja-busca{flex:0 1 400px;min-width:0;max-width:420px}
.loja-busca .busca2{max-width:none}

/* o grupo por setor: cabeçalho com a contagem num pill pequeno */
.loja-grupo{margin:0}
.loja-grupo h2.s{margin:28px 0 12px;justify-content:flex-start;align-items:center;gap:10px}
.loja-grupo:first-child h2.s{margin-top:0}
.loja-grupo h2.s i{font-style:normal;letter-spacing:0;font-size:12px;line-height:18px;color:var(--apagado);background:#1a221d;border:1px solid var(--borda-forte);border-radius:999px;padding:1px 9px}

/* a grade do setor: cartões da mesma largura, altura igual na fileira */
/* auto-fit (e não auto-fill): um setor com poucas skills divide a linha toda, sem coluna vazia. 260px mínimos: a 1440px cabem 4 colunas */
.loja-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.loja-cartoes > *{min-width:0}

/* o cartão da skill: topo (ícone do setor e selo), título, descrição de 3 linhas e rodapé com as ações */
.loja-card{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio-cartao);padding:16px;display:grid;grid-row:span 4;grid-template-rows:subgrid;min-width:0;transition:border-color 150ms ease-out,transform 150ms ease-out}
.loja-card:hover{border-color:var(--borda-verde);transform:translateY(-1px)}
.loja-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.loja-icone{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--verde-ativo);color:var(--destaque);flex:none}
.loja-card .pill{font-size:11.5px;padding:3px 10px}
/* (cui9) o cartão ocupa 4 fileiras da grade do setor (topo, título, descrição, rodapé) e herda as fileiras (subgrid):
   o título de duas linhas não empurra a descrição dos vizinhos da mesma fileira; o título de uma linha só ganha o vão
   quando a fileira tem um título maior. O espaço entre as partes é o da grade (14 px) */
.loja-card h3{margin:0;font-size:15.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.loja-card p{margin:0;color:var(--texto-corpo);font-size:13.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.loja-rodape{margin-top:auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.loja-rodape .btn{min-height:34px;padding:0 16px;font-size:13.5px}
.loja-rodape .btn.q{padding:0 10px}
/* (cui6) "Instalar" de cada cartão é ação secundária: contorno verde, e no hover ganha o fundo de ativo */
.loja-card .btn.g:hover{background:var(--verde-ativo)}

/* o estado vazio das abas Times e Apps: um cartão de até 560px alinhado à esquerda com o título; sem dado inventado */
.loja-vazio{max-width:560px;margin:24px 0 0;padding:28px;background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio-cartao);display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:10px}
.loja-vazio-icone{display:inline-flex;color:var(--destaque)}
.loja-vazio-t{margin:6px 0 0;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--texto)}
.loja-vazio p{margin:0;color:var(--texto-corpo);font-size:14px}
.loja-vazio .btn{margin-top:8px}

@media (prefers-reduced-motion: reduce){
  .loja-card{transition:none}
  .loja-card:hover{transform:none}
}
@media (max-width: 700px){
  /* celular: a busca ocupa a linha toda; a grade cai em 1 coluna sozinha (260px mínimos) */
  .loja-busca{flex-basis:100%;max-width:none}
  .loja-vazio{padding:22px}
  /* a faixa de setores sangra até a borda do celular; chip com 40px de toque */
  .loja-setores{margin:0 -16px;padding:4px 16px}
  .loja-setores .chip{min-height:40px}
  /* (cui9) o segmentado de Times / Skills / Apps ocupa a largura da coluna, com 40px de toque */
  .loja-linha .seg{display:flex;width:100%}
  .loja-linha .seg button{flex:1 1 0;justify-content:center;min-height:40px}
}