/* Cabeçalho mobile único do site (<=768px): hambúrguer | CEP | logo | conta +
   carrinho. Substitui o cabeçalho mobile antigo (barra de contato, barra de
   busca e barra de categorias) e não é fixo — rola junto com a página.
   Carregado por último, depois de site-bars/site-store-chrome/catalog-header-
   mobile/home-mobile-fluid, por isso os !important: são para vencer regras
   dessas folhas, não para criar precedência nova. */

@media (max-width: 768px) {
    /* Fora do cabeçalho mobile novo. */
    body .site-contact-bar,
    body .search-bar-mobile,
    body #headerMobileSearch,
    body .header-mobile-search-placeholder,
    body .header-mobile-row-placeholder,
    body .mobile-compact-shell,
    body .site-announcement-bar {
        display: none !important;
    }

    /* Nada de header fixo/sticky no mobile. */
    body .site-header-shell,
    body .site-header,
    body header.site-header,
    body .mobile-compact-header,
    body #headerMobileRow {
        position: static !important;
        top: auto !important;
        transform: none !important;
        box-shadow: none !important;
    }
    body .site-header-shell { padding-top: 0 !important; margin-top: 0 !important; }

    /* O header antigo era fixo e as páginas compensavam com padding no body. */
    html body,
    html body.has-site-header-shell,
    html body.home-page,
    html body.catalog-page { padding-top: 0 !important; }

    html body .mobile-compact-header {
        display: flex !important;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 8px 12px !important;
        background: #fff !important;
        color: #1a1a1a !important;
        border-bottom: 1px solid #e5e5e5;
    }
    /* Cor fixa: as páginas definem --site-header-bg/-fg com valores diferentes
       entre si, e o cabeçalho novo tem que ser igual em todas. */
    html body .mobile-compact-header,
    html body .mobile-compact-header * { color: #1a1a1a !important; }

    body .mobile-compact-header__menu { flex: 0 0 auto; }
    body .mobile-compact-header__cep { flex: 0 1 auto; min-width: 0; }
    body .mobile-compact-header__cep-value {
        max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* Logo centralizada e menor que a do cabeçalho antigo. */
    body .mobile-compact-header__center {
        flex: 1 1 auto; display: flex; justify-content: center; min-width: 0;
    }
    body .mobile-compact-header__logo img {
        width: 55px !important; height: 55px !important; object-fit: contain;
    }

    body .mobile-compact-header__end {
        flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    }
}

@media (max-width: 768px) {
    /* O PNG do carrinho é branco (herança do header escuro antigo); o header
       novo tem fundo claro, então o ícone é reduzido a preto para acompanhar
       o --site-header-fg. */
    html body .mobile-compact-header__cart-icon {
        filter: brightness(0) saturate(100%) !important;
        width: 22px !important; height: 22px !important;
    }
}

@media (max-width: 768px) {
    /* Logo do cabeçalho desktop: não tem lugar no cabeçalho mobile. */
    html body .logo-img,
    html body .header-logo,
    html body .header-content--desktop { display: none !important; }

    /* A home já tem a logo no cabeçalho — a do hero sairia duplicada. */
    html body .home-hero-logo-link { display: none !important; }
}