/* Estilos globais do app PHP (complementa style.css do protótipo) */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:#fff;color:#000;padding:.6rem 1rem;border-radius:6px}
.skip:focus{left:8px}
.toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:120;background:var(--grafite-900);color:#fff;padding:.8rem 1.2rem;border-radius:10px;box-shadow:var(--sombra);max-width:92vw;animation:toast-out 6s forwards}
.toast a{color:var(--laranja-500);margin-left:.6rem;font-weight:700}
@keyframes toast-out{0%,85%{opacity:1}100%{opacity:0;visibility:hidden}}
.erro{color:var(--vermelho-600);font-size:.85rem;margin:4px 0 0}
.alerta{background:#fdecec;border-left:4px solid var(--vermelho-600);padding:12px 16px;border-radius:0 8px 8px 0;margin-bottom:16px}
.sucesso{text-align:center;padding:48px 16px}
.sucesso .ok{width:64px;height:64px;border-radius:50%;background:#1fa855;color:#fff;display:grid;place-items:center;margin:0 auto 16px}
.sucesso .ok svg{width:34px;height:34px}
.protocolo{display:inline-block;background:var(--cinza-100);padding:.5rem 1rem;border-radius:8px;font-weight:700;letter-spacing:.05em;color:var(--grafite-900)}

/* cards de produto e botões secundários */
.prod .acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn-sec{background:#fff;border-color:var(--cinza-200);color:var(--grafite-900)}
.btn-sec:hover{border-color:var(--grafite-900)}
.btn-mini{padding:.4rem .8rem;font-size:.85rem}
form.inline{display:inline;margin:0}
.prod .btn{padding:.55rem 1rem;font-size:.9rem}
.chips-links a{display:inline-block;margin:.2rem .4rem .2rem 0;padding:.35rem .9rem;border:1px solid var(--cinza-200);border-radius:99px;text-decoration:none;color:var(--grafite-900);background:#fff}
.chips-links a:hover{border-color:var(--laranja-500)}

/* navegação lateral do catálogo */
.lista-links{list-style:none;margin:0;padding:0}
.lista-links a{display:flex;justify-content:space-between;gap:8px;padding:.55rem .7rem;border-radius:8px;color:var(--grafite-900);text-decoration:none}
.lista-links a:hover{background:var(--cinza-100)}
.lista-links a[aria-current="page"]{background:#fff3e8;color:var(--laranja-700);font-weight:700}
.lista-links .n{color:var(--grafite-500);font-size:.85rem}
.cat-layout.sem-filtros{grid-template-columns:1fr}
@media(max-width:860px){.filtros.links{display:block!important}}
.barra{display:flex;gap:10px;flex-wrap:wrap}
.barra input[type=search]{flex:1;min-width:200px}
.paginacao{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:32px 0 0}
.paginacao a,.paginacao span{padding:.5rem .9rem;border:1px solid var(--cinza-200);border-radius:8px;text-decoration:none;color:var(--grafite-900)}
.paginacao a:hover{border-color:var(--laranja-500)}
.paginacao span[aria-current]{background:var(--grafite-900);color:#fff;border-color:var(--grafite-900)}

/* produto */
.tec-form{padding:18px 20px;margin:18px 0}
.tec-form label{display:block;font-weight:700;color:var(--grafite-900);margin:12px 0 4px;font-size:.92rem}
.tec-form input,.tec-form select,.tec-form textarea{width:100%;padding:.7rem;border:1px solid #bdbdbd;border-radius:8px;font:inherit;background:#fff}
.tec-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tec-form .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:600px){.tec-form .row,.tec-form .row3{grid-template-columns:1fr}}
.conteudo-rico{max-width:78ch}
.conteudo-rico table{border-collapse:collapse;width:100%}
.conteudo-rico th,.conteudo-rico td{border:1px solid var(--cinza-200);padding:8px 10px;text-align:left}

/* orçamento */
.tec-resumo{margin:.2rem 0 0;font-size:.85rem;color:var(--grafite-500)}
.qtd-form{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.qtd-form .qtd input{width:76px;height:38px;text-align:center;border:1px solid var(--cinza-200);border-radius:8px;font:inherit}
.js .qtd-form .btn-mini{display:none}
.item .acao form+form{margin-top:6px;text-align:right}

/* produto: "Veja também" */
.rel{padding:48px 0 24px}
.rel-topo{display:flex;justify-content:space-between;align-items:end;gap:12px 24px;flex-wrap:wrap;margin-bottom:24px}
.rel-topo h2{margin:0;max-width:26ch}
.rel-todos{font-weight:700;color:var(--laranja-700);text-decoration:none;white-space:nowrap}
.rel-todos:hover{text-decoration:underline}
.rel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
.rel-grid .prod{display:flex;flex-direction:column;transition:.2s}
.rel-grid .prod:hover{box-shadow:var(--sombra);transform:translateY(-3px);border-color:var(--laranja-500)}
.rel-grid .prod .foto{aspect-ratio:4/3}
.rel-grid .prod .info{display:flex;flex-direction:column;flex:1}
.rel-grid .prod h3{flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rel-grid .prod .acoes{flex-wrap:nowrap}
.rel-grid .prod .acoes>*{flex:1}
.rel-grid .prod .acoes .btn,.rel-grid .prod .acoes form .btn{width:100%;justify-content:center}
.rel-cta{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:24px;border-radius:var(--raio);background:var(--grafite-900);color:#d6d6d6;text-decoration:none;transition:.2s}
.rel-cta:hover{background:#000;transform:translateY(-3px)}
.rel-cta strong{color:#fff;font-size:1.1rem;line-height:1.25}
.rel-cta em{font-style:normal;font-weight:700;color:var(--laranja-500);margin-top:6px}
.rel-cta .icone{width:46px;height:46px;border-radius:10px;background:rgba(255,136,39,.15);display:grid;place-items:center;margin-bottom:6px}
.rel-cta .icone svg{width:24px;height:24px;stroke:var(--laranja-500)}
@media(max-width:1000px){.rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  .rel-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:-16px;padding:4px 16px 16px;scrollbar-width:thin}
  .rel-grid>*{flex:0 0 78%;scroll-snap-align:start}
}

/* tela de sucesso: respiro entre o texto e os botões */
.sucesso .acoes-fim{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:40px 0 0}
