/* ============================================================================
   mobile-ux.css — Otimizações de UX para dispositivos móveis (Home + global)
   Carregado por ÚLTIMO. Contém SOMENTE regras dentro de @media (max-width)
   => não afeta o layout desktop. Inspirado nos apps Shopee / Mercado Livre:
   hero compacto, cards densos (mais por tela), barra inferior de navegação.
   ============================================================================ */

/* Barra inferior fica escondida no desktop; aparece só no mobile (abaixo). */
.bv-mnav { display: none; }

/* ===================== TABLET / MOBILE (<= 768px) ===================== */
@media (max-width: 768px) {

    /* Espaço para a barra inferior fixa não cobrir o conteúdo/rodapé */
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

    /* ---- HERO mais compacto: o usuário chega aos produtos mais cedo ---- */
    .bv-hero { padding: 14px 0 18px; }
    .bv-hero__container { gap: 20px; }
    .bv-hero__title { font-size: clamp(1.55rem, 7.2vw, 2.05rem); margin-bottom: 10px; }
    .bv-hero__subtitle { font-size: 14.5px; line-height: 1.5; margin-bottom: 16px; }
    .bv-hero__actions { margin-bottom: 16px; gap: 10px; }
    .bv-hero__features { padding-top: 16px; gap: 10px; }
    .bv-hero__feature-icon { width: 34px; height: 34px; border-radius: 10px; }
    .bv-hero__feature-icon svg { width: 18px; height: 18px; }
    .bv-hero__visual { min-height: auto; padding: 6px; margin-top: 2px; }

    /* ---- Cabeçalhos de seção mais justos ---- */
    .bv-section { padding: 20px 0; }
    .bv-section__head { margin-bottom: 14px; }
    .bv-section__head h2, .bv-section h2 { font-size: 19px; }

    /* ---- Cards de produto mais densos (mostra mais itens por tela) ---- */
    .bv-products-grid,
    .bv-products-grid--4,
    .bv-products-grid--5 { gap: 10px; }
    .bv-product-multi { padding: 10px; border-radius: 14px; }
    .bv-product-multi__media { margin-bottom: 8px; }
    .bv-product-multi__title { font-size: 13px; min-height: 34px; margin: 0 0 6px; line-height: 1.3; }
    .bv-product-multi__offers { padding-top: 8px; margin-bottom: 8px; gap: 2px; }
    .bv-product-multi__offer { padding: 2px 0; font-size: 11.5px; gap: 8px; }
    .bv-product-multi__offer-price { font-size: 12.5px; }
    .bv-product-multi__more { font-size: 11.5px; }
    .bv-product-multi__cta { padding: 9px 10px; font-size: 12.5px; border-radius: 10px; }

    /* ---- Lojas parceiras: cartões um pouco menores ---- */
    .bv-stores-carousel__item { min-height: 88px; padding: 12px 8px; }
}

/* ===================== CELULARES ESTREITOS (<= 380px) ===================== */
@media (max-width: 380px) {
    .bv-product-multi__offer { font-size: 11px; }
    .bv-product-multi__cta { padding: 8px; font-size: 12px; }
    .bv-mnav__item span { font-size: 9.5px; }
}

/* ============================ BARRA INFERIOR ============================ */
@media (max-width: 768px) {
    .bv-mnav {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 9990;
        background: #ffffff;
        border-top: 1px solid #e7eeea;
        box-shadow: 0 -4px 18px rgba(16, 42, 29, .08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .bv-mnav__item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 7px 2px 6px;
        text-decoration: none;
        color: #6b7c72;
        font-weight: 600;
        min-height: 54px;
        -webkit-tap-highlight-color: transparent;
    }
    .bv-mnav__item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
    .bv-mnav__item span { font-size: 10.5px; line-height: 1; white-space: nowrap; }
    .bv-mnav__item.is-active { color: #15924f; }
    .bv-mnav__item:active { background: #f1f7f3; }
}