/* ═══════════════════════════════════════════════════════════
   MOBILE.CSS — Melhorias para Android e iPhone
   Adicione este arquivo APÓS o estilo.css principal.
   O design do desktop não é alterado.
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. PREVINE ZOOM NO iOS AO FOCAR INPUTS ─── */
/* O iOS faz zoom quando font-size < 16px — fixamos isso */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Exceções pequenas que não são campos de texto do usuário */
  .iq { font-size: 15px !important; }
}

/* ─── 2. HEADER MOBILE ─── */
@media (max-width: 768px) {
  :root { --nav-h: 52px; }

  .hdr-inner { padding: var(--safe-top) 12px 0; gap: 6px; }

  /* Logo menor *//
  .logo-name { font-size: .8rem; }
  .logo-mark { width: 34px; height: 34px; }

  /* Botão WhatsApp: esconde texto, mantém ícone */
  .btn-wpp span { display: none; }
  .btn-wpp { padding: 7px 10px; }

  /* Botão carrinho: esconde texto */
  .btn-cart span { display: none; }
  .btn-cart { padding: 7px 10px; }
}

/* ─── 3. BUSCA — mobile ─── */
@media (max-width: 768px) {
  /* Wrap: referência de posicionamento para as sugestões */
  .search-wrap {
    max-width: 100%;
    margin: 0 0 1.25rem;
    position: relative;   /* sugestões ficam relativas a este elemento */
  }

  /* Campo maior — font-size 16px é crítico: evita zoom automático no iOS */
  .search-inp {
    padding: 14px 16px 14px 44px;
    font-size: 16px;
    border-radius: 14px;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Sugestões: logo ABAIXO do campo (position:absolute relativo ao .search-wrap)
     Nunca mais sobrepõe o campo de digitação */
  .search-suggestions {
    position: absolute;       /* relativo ao .search-wrap, não à viewport */
    top: calc(100% + 6px);   /* cola embaixo do campo */
    left: 0;
    right: 0;
    z-index: 950;
    max-height: 42vh;         /* scroll interno se houver muitos resultados */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,.18);
  }

  /* Itens compactos mas ainda tocáveis (mínimo Apple/Google: 44px) */
  .search-sug-item {
    padding: 10px 14px;
    font-size: .8rem;
    min-height: 44px;
  }

  .search-sug-item .sug-name { font-size: .8rem; }
  .sug-price { font-size: .65rem; padding: 4px 9px; }

  .sug-section-label {
    padding: 8px 16px 5px;
    font-size: .7rem;
  }
}

/* ─── 4. CATALOG SECTION — padding e espaçamentos ─── */
@media (max-width: 768px) {
  .sec-catalog {
    padding: calc(var(--nav-h) + var(--safe-top) + 1rem) 12px 5rem;
  }

  .cat-head { margin-bottom: 1rem; }

  .sec-title { font-size: 1.3rem; }
  .sec-sub { font-size: .8125rem; }
}

/* ─── 5. FILTROS DE CATEGORIA — scroll horizontal suave ─── */
@media (max-width: 768px) {
  .filter-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    padding: 4px 0 8px;
    margin: 0 -12px;          /* sangra até a borda */
    padding-left: 12px;
    padding-right: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }

  /* Tabs maiores para toque fácil */
  .ftab {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: .8125rem;
    min-height: 36px;
  }
}

/* ─── 6. SUBTABS — também scroll horizontal ─── */
@media (max-width: 768px) {
  .subtabs-wrap {
    margin: 0 -12px .75rem;
    padding: 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    min-height: auto;
  }
  .subtabs-wrap::-webkit-scrollbar { display: none; }

  .subtabs {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .stab {
    flex-shrink: 0;
    padding: 7px 13px;
    font-size: .8rem;
    min-height: 34px;
  }
}

/* ─── 7. FILTRO DE MARCA ─── */
@media (max-width: 768px) {
  .brand-filter-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    padding: .5rem 12px;
    margin: 0 -12px;
  }
  .brand-filter-inner::-webkit-scrollbar { display: none; }

  .btab {
    flex-shrink: 0;
    padding: 6px 13px;
    min-height: 32px;
  }
}

/* ─── 8. GRID DE PRODUTOS ─── */
@media (max-width: 768px) {
  /* 2 colunas confortáveis em telas médias */
  .pgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
  }

  /* Card: body com menos padding */
  .pbody { padding: .625rem; gap: .3rem; }

  .pname { font-size: .78125rem; }

  .pprice { font-size: 1rem; }

  /* Fotos: mantém contain, reduz altura no mobile */
  .pimg,
  .pimg-thumb,
  .pimg-replace {
    height: 108px;
  }

  /* Botões de ação maiores para toque */
  .badd, .badd-esg {
    height: 34px;
    font-size: .78rem;
  }
  .bq { width: 30px; height: 34px; font-size: .9rem; }
  .iq  { width: 30px; height: 34px; }
}

@media (max-width: 380px) {
  /* Telas muito pequenas: 1 coluna */
  .pgrid { grid-template-columns: 1fr; }
}

/* ─── 9. CART PANEL — largura total no mobile ─── */
@media (max-width: 480px) {
  .cart-panel {
    width: 100vw;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    transform: translateY(100%);
    max-height: 92vh;
  }
  .cart-panel.on { transform: translateY(0); }

  .cart-head { padding: 1rem 1.25rem; }
  .cart-list  { padding: .75rem 1.25rem; }
  .cart-foot  { padding: 1rem 1.25rem 1.5rem; }
}

/* ─── 10. WHATSAPP FLOAT — sobe acima do teclado virtual ─── */
@media (max-width: 768px) {
  .wpp-float {
    bottom: calc(16px + var(--safe-bottom));
    right: 14px;
  }
  .wpp-btn { width: 48px; height: 48px; }
  .wpp-btn img { width: 24px; height: 24px; }
  /* Esconde tooltip no mobile (tap, não hover) */
  .wpp-tip { display: none; }
}

/* ─── 11. MODAL DE CHECKOUT — tela cheia no mobile ─── */
@media (max-width: 540px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal-box {
    border-radius: 22px 22px 0 0;
    max-height: 95vh;
    max-width: 100%;
  }

  .modal-hdr { padding: 1.25rem 1.25rem 0; }
  .modal-body { padding: .875rem 1.25rem; }
  .modal-foot { padding: 0 1.25rem 1.5rem; }
  .modal-steps { padding: .875rem 1.25rem .5rem; }

  /* Chips de pagamento maiores */
  .pagto-chip { min-height: 60px; }
}

/* ─── 12. SEÇÃO DE AVALIAÇÕES ─── */
@media (max-width: 640px) {
  .sec-reviews { padding: 3rem 1rem; }
  .reviews-grid { grid-template-columns: 1fr; gap: .75rem; }
}

/* ─── 13. HEADER COM BUSCA ABERTA — previne conteúdo saltando ─── */
/* Quando o teclado virtual sobe no iOS, evita reflow do layout */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .search-suggestions {
      /* No iOS, usa dvh para respeitar o teclado virtual */
      max-height: 38dvh;
    }
  }
}

/* ─── 14. SCROLL SUAVE SEM BOUNCE INDESEJADO ─── */
@media (max-width: 768px) {
  body { -webkit-overflow-scrolling: touch; }

  /* Previne scroll lateral acidental no body */
  body { overflow-x: hidden; }
}

/* ─── 15. TOUCH TARGETS — garante área mínima de 44px ─── */
@media (max-width: 768px) {
  .btn-theme {
    width: 36px;
    height: 36px;
  }
  .btn-close {
    width: 36px;
    height: 36px;
  }
  .bq {
    min-width: 36px;
  }
  /* Remove hover/transform no touch (não existe hover real no mobile) */
  .pcard:hover {
    transform: none;
    box-shadow: none;
  }
  .btn-wpp:hover,
  .btn-send-wpp:hover,
  .btn-confirm-wpp:hover {
    transform: none;
  }
}