/* =========================================================
   ARTESÃ · MEU CATÁLOGO (lista, formulário do produto e lixeira)
   Usa as peças do protótipo aprovado (.grade-produtos, .produto, .filtros, .chip, .interruptor, .item);
   aqui só o que é novo. Nomes conferidos para não repetir os que já existem.
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.botao-topo.so-icone { padding: 0; width: 44px; justify-content: center; }

/* busca e categorias */
.busca-caixa { display: flex; align-items: center; gap: 8px; background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 14px; padding: 0 12px; min-height: 48px; }
.busca-caixa svg { width: 20px; height: 20px; color: var(--texto2); flex: none; }
.busca-caixa input { flex: 1; min-width: 0; border: 0; background: transparent; min-height: 44px; font-size: 15px; }
.busca-caixa input:focus { outline: none; }
.busca-caixa:focus-within { border-color: var(--destaque-texto); }
.filtros .filtro { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px; border-radius: 99px; font-weight: 800; font-size: 14px; background: var(--superficie); border: 1.5px solid var(--linha); color: var(--texto2); }
.filtros .filtro.ativo { background: var(--texto); color: var(--fundo); border-color: var(--texto); }

/* o cartão do produto */
.produto { display: grid; }
.produto-link { display: block; position: relative; color: inherit; }
.produto-link img, .foto-item img, .previas img { height: auto; }   /* a altura vem da proporção 4:5 (não do número escrito na foto) */
.produto .sem-foto { aspect-ratio: 4 / 5; display: grid; place-content: center; justify-items: center; gap: 4px; background: var(--superficie-2); color: var(--texto2); }
.produto .sem-foto svg { width: 34px; height: 34px; }
.produto .selos-canto { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.produto-link .info { display: block; }
.produto .info .codigo { display: block; font-weight: 800; font-size: 11.5px; }
.produto .info span small { font-family: var(--f-texto); font-size: 12px; color: var(--texto2); }
.produto-acao { padding: 0 12px 12px; }
.produto-acao .btn { width: 100%; min-height: 40px; font-size: 13.5px; }
.link-lixeira { justify-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; font-weight: 800; color: var(--texto2); }
.link-lixeira svg { width: 18px; height: 18px; }
.linha-desfazer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* fotos no formulário */
.fotos-produto { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.foto-item { position: relative; display: grid; gap: 4px; cursor: pointer; }
.foto-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: var(--superficie-2); }
.foto-item .tirar { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; min-height: 32px; }
.foto-item .tirar input { width: 18px; height: 18px; accent-color: var(--perigo); }
.foto-item:has(input:checked) img { opacity: .35; outline: 3px solid var(--perigo); }
.subir-fotos { display: grid; place-items: center; gap: 4px; min-height: 120px; padding: 14px; text-align: center; border: 2px dashed var(--linha); border-radius: var(--raio); background: var(--superficie-2); cursor: pointer; }
.subir-fotos svg { width: 30px; height: 30px; color: var(--destaque-texto); }
.subir-fotos input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.subir-fotos:focus-within { outline: 3px solid var(--destaque-texto); outline-offset: 2px; }
.previas { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.previas img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.previas p { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--alerta); }
.acoes-produto form { margin: 0; }
.btn.perigo { color: var(--perigo); border-color: var(--perigo-suave); }

/* lixeira e atalho do início */
.mini-lixeira { width: 48px; height: 60px; object-fit: cover; border-radius: 10px; flex: none; }
.atalho-catalogo { display: flex; align-items: center; gap: 12px; color: inherit; }
.atalho-catalogo .meio { flex: 1; display: grid; }
.atalho-catalogo .meio b { font-size: 16px; }
.atalho-catalogo .meio small { color: var(--texto2); }
.atalho-catalogo .seta svg { width: 20px; height: 20px; }