/* busca.css — campo de busca instantânea (templates/_busca.html + static/js/busca.js).
   Usa as variáveis de style.css (--navy, --accent, --muted, --line, --bg-alt, --radius). */
.busca{position:relative;margin:18px 0 14px;max-width:760px}
.busca-label{display:block;font-size:.88rem;font-weight:600;color:var(--navy-d);margin:0 0 6px}
.busca-box{position:relative;display:flex;align-items:center;background:#fff;border:2px solid #b9c4cd;border-radius:14px;box-shadow:0 4px 18px rgba(15,61,94,.10);transition:border-color .15s,box-shadow .15s}
.busca-box:focus-within{border-color:var(--navy);box-shadow:0 0 0 4px rgba(15,61,94,.16),0 6px 22px rgba(15,61,94,.14)}
.busca-ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--navy);pointer-events:none}
.busca input[type="search"]{flex:1;min-width:0;font:inherit;font-size:1.12rem;line-height:1.3;padding:16px 44px 16px 48px;border:0;border-radius:14px;background:transparent;color:var(--ink);appearance:none;-webkit-appearance:none}
.busca input[type="search"]::-webkit-search-decoration,.busca input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.busca input:focus{outline:0}
.busca input::placeholder{color:#7b8794;opacity:1}
.busca-clear{position:absolute;right:112px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;background:var(--bg-alt);color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.busca-clear:hover{background:#e2e8ed;color:var(--navy-d)}
.busca-clear[hidden]{display:none}
.busca-go{margin:5px;padding:11px 18px;border:0;border-radius:10px;background:var(--navy);color:#fff;font:inherit;font-weight:700;cursor:pointer;flex:none}
.busca-go:hover{background:var(--navy-d)}
.busca-live{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* painel de resultados: sobreposto, sem empurrar o layout */
.busca-panel{position:absolute;left:0;right:0;top:100%;margin-top:8px;z-index:15;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 14px 40px rgba(15,61,94,.18);max-height:min(62vh,520px);overflow:auto;overscroll-behavior:contain;text-align:left}
.busca-panel[hidden]{display:none}
.busca-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px 6px;font-size:.82rem;color:var(--muted)}
.busca-head em{font-style:normal;color:var(--accent)}
.busca-loading{display:inline-flex;align-items:center;gap:6px}
.busca-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:busca-pulse 1s ease-in-out infinite}
@keyframes busca-pulse{0%,100%{opacity:.25}50%{opacity:1}}
.busca-list{list-style:none;margin:0;padding:0 6px 6px}
.busca-grp{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:10px 10px 4px}
.busca-item a{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ink)}
.busca-item[aria-selected="true"] a,.busca-item a:hover{background:#eaf2f8}
.busca-marca{font-size:.74rem;font-weight:700;color:var(--navy);background:#eaf2f8;border:1px solid #d6e3ee;border-radius:999px;padding:2px 9px;white-space:nowrap;align-self:start;margin-top:2px}
.busca-item[aria-selected="true"] .busca-marca,.busca-item a:hover .busca-marca{background:#fff}
.busca-main{display:flex;flex-direction:column;min-width:0}
.busca-main strong{color:var(--navy-d);font-size:1rem;line-height:1.3}
.busca-mod{font-size:.9rem;color:var(--muted)}
.busca-alias{font-size:.8rem;color:var(--muted)}
.busca-alias::before{content:"também: ";}
.busca-preco{font-size:.85rem;font-weight:600;color:var(--accent);white-space:nowrap}
.busca mark{background:#ffe9a8;color:inherit;border-radius:2px;padding:0 1px}
.busca-foot{border-top:1px solid var(--line);padding:10px 16px;font-size:.88rem;color:var(--muted)}
.busca-link{background:none;border:0;padding:0;color:var(--navy);text-decoration:underline;cursor:pointer;font:inherit;font-size:inherit}

/* skeleton: linhas cinza com brilho, mesma altura dos itens (sem pulo) */
.busca-skel{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:12px 10px;min-height:52px}
.busca-skel span{display:block;height:14px;border-radius:7px;background:#e6ebef;position:relative;overflow:hidden}
.busca-skel span:first-child{height:20px;border-radius:999px}
.busca-skel span::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#f7f9fb 50%,transparent);animation:busca-shimmer 1.4s ease-in-out infinite}
@keyframes busca-shimmer{to{transform:translateX(100%)}}

/* estado vazio e sugestões */
.busca-empty{padding:18px 16px 16px}
.busca-empty p{margin:0 0 10px}
.busca-empty-t{font-weight:700;color:var(--navy-d);font-size:1.05rem}
.busca-empty .btn{margin:4px 0 14px}
.busca-start{padding:12px 16px 8px}
.busca-sug-t{font-size:.82rem;color:var(--muted);margin-bottom:6px!important}
.busca-sug{display:flex;flex-wrap:wrap;gap:8px}
.busca-sug button{font:inherit;font-size:.9rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer;color:var(--navy-d)}
.busca-sug button:hover{border-color:var(--navy);background:#eaf2f8}
.busca-list-status{font-size:.92rem;color:var(--muted);margin:-4px 0 10px}
.busca-list-status[hidden]{display:none}
.busca-oculto{display:none!important}

@media (max-width:640px){
  .busca{max-width:none;margin:14px 0 10px}
  .busca input[type="search"]{font-size:1rem;padding:15px 44px 15px 44px}
  .busca-ico{left:13px;width:20px;height:20px}
  .busca-go{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;margin:0;padding:0}  /* teclado: enterkeyhint=search */
  .busca-clear{right:8px}
  .busca-panel{max-height:min(60vh,460px)}
  .busca-item a{grid-template-columns:1fr auto;grid-template-areas:"marca marca" "main preco"}
  .busca-marca{grid-area:marca;justify-self:start;margin-top:0}
  .busca-main{grid-area:main}
  .busca-preco{grid-area:preco;align-self:end}
}
@media (prefers-reduced-motion:reduce){.busca-dot,.busca-skel span::after{animation:none}}