/* ============================================================
   MHDCommerce — Responsividade da Busca
   Arquivo: wwwroot/css/responsive-busca.css
   Carregar DEPOIS de busca.css
   ============================================================ */

/* ════════════════════════════════════════════
   TABLET — até 1024px
   ════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .results-head-inner { padding-left: 20px; padding-right: 20px; }
}

/* ════════════════════════════════════════════
   MOBILE — até 768px
   ════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── AUTOCOMPLETE em tela cheia ──
       No mobile a busca ocupa a largura toda (já tratado no header responsivo).
       O dropdown vira quase full-width, ancorado abaixo da busca. */
    .search-area { max-width: none; }
    .suggestions {
        position: fixed;
        top: auto; left: 8px; right: 8px;
        max-height: 65vh;
    }
    .sug-thumb { width: 44px; height: 44px; }
    .sug-nome { font-size: 13px; }
    .sug-preco-new { font-size: 15px; }

    /* ── PÁGINA DE RESULTADOS ── */
    .results-head-inner { padding: 16px; }
    .results-title { font-size: 18px; }

    .secao { margin-top: 28px; }
    .secao-title { font-size: 17px; }
    .secao-accent { height: 20px; }

    .busca-vazia { padding: 56px 20px; }
    .busca-vazia-icon { font-size: 48px; }
}

/* ════════════════════════════════════════════
   MOBILE PEQUENO — até 420px
   ════════════════════════════════════════════ */
@media (max-width: 420px) {
    .sug-badges { display: none; } /* economiza espaço em telas estreitas */
}