/**
* lanaree-busca — estilos do autocomplete (fase 3).
* Pills no mesmo vocabulário visual das pills de variação do lanaree-pdp
* (borda fina, uppercase, tracking) — decisão do mockup aprovado em 2026-08-03.
* Carregado em toda página do frontend desde a fase 4 (v0.7.0) — o widget
* vive no ícone de busca nativo do header, não mais só numa página de teste.
*/
.lnr-busca {
position: relative;
max-width: 640px;
margin: 0 auto;
/* Ao rolar o campo pro topo no foco (mobile), respeita header sticky. */
scroll-margin-top: 96px;
}
.lnr-busca__form { position: relative; margin: 0; }
.lnr-busca__input {
width: 100%;
padding: 12px 40px 12px 42px;
border: 1px solid #c9c9c9;
border-radius: 2px;
/* 16px, não 15px: abaixo de 16px o Safari iOS dá zoom automático no
documento inteiro ao focar o campo (reportado pela Luiza com vídeo,
2026-08-04 — a navbar "descia" junto, sintoma clássico desse zoom
de viewport, não um bug nosso de layout). 16px é o menor valor que
não dispara esse comportamento nativo do WebKit. */
font-size: 16px;
letter-spacing: 0.03em;
background-color: #fff;
color: #151515;
/* Lupa embutida (SVG inline — zero request extra). */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 14px center;
}
.lnr-busca__input:focus { outline: none; border-color: #151515; }
/* X nativo do WebKit fora — o nosso botão é consistente entre navegadores. */
.lnr-busca__input::-webkit-search-cancel-button,
.lnr-busca__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.lnr-busca__limpar {
position: absolute;
right: 6px;
top: 50%;
/* +1px no fim: flex centraliza a CAIXA da linha, mas o glifo "×" em si
tem tinta visual um pouco acima do centro geométrico dessa caixa —
típico de fonte, sobra mesmo com flex (relatado pela Luiza,
2026-08-04, depois do fix da v0.7.7 não bastar). */
transform: translateY(calc(-50% + 1px));
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: #999;
font-size: 22px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.lnr-busca__limpar:hover { color: #151515; }
.lnr-busca__limpar[hidden] { display: none; }
.lnr-busca__dropdown {
position: absolute;
z-index: 220;
left: 0;
right: 0;
top: calc(100% + 4px);
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 2px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
padding: 12px;
}
.lnr-busca__dropdown[hidden] { display: none; }
.lnr-busca__titulo {
margin: 0 0 10px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #999;
}
/* Destaques (curadoria pelo flag "Destacado" nativo do WooCommerce,
v0.6.6) vêm depois das pills de pesquisa — respiro extra pra separar os
dois grupos visualmente. */
.lnr-busca__titulo--destaques { margin-top: 14px; }
.lnr-busca__pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* Mobile: carrossel horizontal de pills (ref Zee.Dog, pedido 2026-08-04) —
uma linha deslizável economiza a altura que o teclado disputa. */
@media (max-width: 782px) {
.lnr-busca__pills {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
margin-right: -12px; /* pills "vazam" até a borda do dropdown */
padding-right: 12px;
}
.lnr-busca__pills::-webkit-scrollbar { display: none; }
.lnr-busca__pill { flex-shrink: 0; white-space: nowrap; }
}
.lnr-busca__pill {
/* Espelha as chips da home (.lan-chip, medidas ao vivo em 2026-08-04:
Roboto 10px, peso 500, tracking 2px, padding 10px) — mesma família
visual de "sugestão clicável". */
padding: 10px;
border: 1px solid #c9c9c9;
border-radius: 2px;
background: transparent;
color: #555;
font-family: 'Roboto', sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 1;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.lnr-busca__pill:hover { border-color: #151515; color: #151515; }
}
/* !important de propósito: o CSS de lista do Uncode vence a especificidade
simples e devolvia os bullets (visto no aceite do staging). */
.lnr-busca__dropdown ul.lnr-busca__lista,
.lnr-busca__dropdown li.lnr-busca__item {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.lnr-busca__link {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: 2px;
text-decoration: none;
color: inherit;
}
.lnr-busca__item--ativo .lnr-busca__link,
.lnr-busca__link:hover { background: #f4f4f4; }
.lnr-busca__thumb { flex-shrink: 0; border-radius: 2px; object-fit: cover; }
.lnr-busca__textos { display: flex; flex-direction: column; min-width: 0; }
.lnr-busca__nome {
font-size: 13px;
color: #151515;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lnr-busca__preco { font-size: 12px; color: #777; }
/* À esquerda com seta, não mais centralizado — mockup aprovado pela
Luiza (2026-08-04, opção A): num painel full-width a versão centralizada
ficava com o texto flutuando isolado num mar de espaço vazio; à
esquerda ele continua o fluxo natural de leitura logo abaixo dos cards,
consistente com os títulos "Pesquisas em alta"/"Destaques". */
.lnr-busca__ver-todos {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
/* Respiro maior antes do divisor de cima (era 10px — pedido da Luiza,
2026-08-04, mais um ajuste fino depois do alinhamento simétrico). */
padding: 16px 8px 10px;
border-top: 1px solid #eee;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #555;
text-decoration: none;
}
.lnr-busca__ver-todos:hover { color: #151515; }
.lnr-busca__ver-todos-seta { font-size: 13px; line-height: 1; }
.lnr-busca__mensagem { margin: 4px; font-size: 13px; color: #777; }
/* Neutro, não vermelho de alarme (aceite 2026-08-04) — mesmo peso do resto
do texto secundário do widget, não uma cor de erro que grita. */
.lnr-busca__mensagem--erro { color: #555; }
/* Só o estado de erro centraliza — os demais seguem à esquerda (ver
dropdown.classList em busca.js: o modificador é removido em toda troca
de conteúdo, então nunca vaza pro próximo estado). */
.lnr-busca__dropdown--centralizado { text-align: center; }
/* Link de texto, não botão com borda (aceite 2026-08-04) — mesmo peso
visual do .lnr-busca__ver-todos: um retry não é um CTA primário. */
.lnr-busca__tentar {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 4px 0 0;
padding: 4px 0;
border: none;
background: transparent;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #555;
cursor: pointer;
}
.lnr-busca__tentar:hover { color: #151515; }
.lnr-busca__tentar-icone { font-size: 14px; line-height: 1; }
/* Região aria-live visível só para leitores de tela. */
.lnr-busca__vivo {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ---------------------------------------------------------------------
* Fase 4 (v0.7.2) — compatibilidade com o overlay de busca nativo do Uncode.
*
* Achado ao vivo no staging (não hipotético): o container do tema
* (#masthead .overlay) usa height:auto + overflow:hidden. O tema calcula
* altura só do