/* 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; }
}


/* ===== Cabeçalho mobile padrão de todas as lojas (cores da identidade via --ap-accent) =====
   Linha 1: menu · "Entregar em / CEP" · logo no centro · carrinho | entrar. Linha 2: busca com botão quadrado. */
@media (max-width: 999px) {
  html body #headerMobileRow.mobile-compact-header {
    display: grid !important; grid-template-columns: auto auto 1fr auto !important; align-items: center !important; gap: 10px !important;
    padding: 10px 14px 6px !important; background: var(--cab-fundo, #fff) !important;
  }
  html body #headerMobileRow .mobile-compact-header__menu {
    width: 44px !important; height: 44px !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 12px !important;
    background: #f2f3f5 !important; color: var(--ap-ink, #111) !important; font-size: 18px !important; box-shadow: none !important;
  }
  html body #headerMobileRow .mobile-compact-header__cep { display: flex !important; align-items: center !important; gap: 6px !important; padding: 0 !important; background: none !important; border: 0 !important; text-align: left !important; min-width: 0 !important; }
  html body #headerMobileRow .mobile-compact-header__cep-pin { color: var(--ap-accent, #f04e23) !important; font-size: 20px !important; }
  html body #headerMobileRow .mobile-compact-header__cep-lines { display: flex !important; flex-direction: column !important; line-height: 1.15 !important; min-width: 0 !important; }
  html body #headerMobileRow .mobile-compact-header__cep-label { font-size: 11px !important; font-weight: 500 !important; color: #6b7280 !important; -webkit-text-fill-color: #6b7280 !important; }
  html body #headerMobileRow .mobile-compact-header__cep-value { font-size: 13px !important; font-weight: 700 !important; color: var(--ap-ink, #111) !important; -webkit-text-fill-color: currentColor !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; }
  html body #headerMobileRow .mobile-compact-header__cep-caret { font-size: 10px !important; }
  html body #headerMobileRow .mobile-compact-header__center { position: static !important; transform: none !important; display: flex !important; justify-content: center !important; min-width: 0 !important; }
  html body #headerMobileRow .mobile-compact-header__logo img { height: 40px !important; width: auto !important; max-width: 120px !important; object-fit: contain !important; }
  html body #headerMobileRow .mobile-compact-header__end { position: static !important; width: auto !important; transform: none !important; display: flex !important; align-items: center !important; gap: 14px !important; }
  html body #headerMobileRow .mobile-compact-header__cart { position: relative !important; inset: auto !important; transform: none !important; display: grid !important; place-items: center !important; width: 36px !important; height: 36px !important; color: var(--ap-ink, #111) !important; text-decoration: none !important; }
  html body #headerMobileRow .mobile-compact-header__cart-ico { font-size: 22px !important; }
  html body #headerMobileRow .mobile-compact-header__cart .cart-badge {
    display: flex !important; position: absolute !important; top: -4px !important; right: -6px !important; min-width: 18px !important; height: 18px !important; padding: 0 4px !important;
    align-items: center !important; justify-content: center !important; border-radius: 999px !important; background: var(--ap-accent, #f04e23) !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 10px !important; font-weight: 700 !important; box-sizing: border-box !important;
  }
  html body #headerMobileRow .mobile-compact-header__actions { position: static !important; width: auto !important; display: flex !important; align-items: center !important; padding-left: 14px !important; border-left: 1px solid #e5e7eb !important; }
  html body #headerMobileRow .mobile-compact-header__account { color: var(--ap-ink, #111) !important; font-size: 22px !important; display: grid !important; place-items: center !important; width: 32px !important; height: 36px !important; background: none !important; }

  html body #headerMobileSearch.search-bar-mobile { border-bottom: 0 !important; padding: 6px 14px 12px !important; background: var(--cab-fundo, #fff) !important; }
  html body #headerMobileSearch div.search-input-wrapper {
    position: relative !important; display: flex !important; align-items: center !important; height: 50px !important; padding: 4px 4px 4px 0 !important;
    border: 1px solid #e5e7eb !important; border-radius: 14px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(16,24,40,.05) !important;
  }
  html body #headerMobileSearch .search-mobile-lead { width: 46px !important; text-align: center !important; font-size: 18px !important; color: var(--ap-ink, #111) !important; flex: none !important; }
  html body #headerMobileSearch #searchInputMobile { background-image: none !important; border-radius: 0 !important;
    flex: 1 !important; min-width: 0 !important; height: 100% !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important;
    padding: 0 8px 0 0 !important; font-size: 14px !important; color: var(--ap-ink, #111) !important;
  }
  html body #headerMobileSearch #searchInputMobile::placeholder { color: #6b7280 !important; }
  html body #headerMobileSearch #searchInputMobile::-webkit-search-cancel-button { display: none !important; }
  html body #headerMobileSearch #searchBtnMobile { opacity: 1 !important; padding: 0 !important;
    flex: none !important; width: 52px !important; height: 100% !important; border: 0 !important; border-radius: 11px !important;
    background: var(--ap-accent, #f04e23) !important; color: #fff !important; font-size: 18px !important; display: grid !important; place-items: center !important;
    position: static !important; transform: none !important;
  }
}