/* Norte Leques Brasil — camada responsiva (telefone e tablet).
 *
 * O site e construido 100% com estilos inline, e media query nao alcanca
 * atributo style. Por isso as regras abaixo usam !important e, quando nao ha
 * classe disponivel, seletores de atributo sobre o proprio style inline.
 *
 * Nada aqui roda acima de 860px: o layout desktop fica exatamente como estava.
 * As classes nlb-* existem apenas em Header.dc.html e Footer.dc.html.
 *
 * ATENCAO: a ordem importa. As regras genericas vem primeiro e as especificas
 * (Header/Footer) depois, com especificidade maior, para vencer o empate.
 */

@media (max-width: 860px) {

  /* ---------- fundamentos ---------- */

  body { overflow-x: hidden; }

  img, canvas, svg, video, iframe { max-width: 100%; }

  /* Evita o zoom automatico do iOS ao focar um campo (<16px dispara o zoom). */
  input, select, textarea { font-size: 16px !important; }

  /* O wrapper desktop de todas as paginas de conteudo. */
  [style*="min-width: 1080px"] { min-width: 0 !important; }

  /* ---------- grids ---------- */

  /* Toda grid multi-coluna vira coluna unica. */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Espacamento so onde ja existia: o hero e uma grid colada, sem gap, e
   * criar um vao ali abriria uma faixa de fundo entre texto e foto. */
  [style*="grid-template-columns"][style*="gap:"] { gap: 22px !important; }

  /* O mosaico de categorias da home usa "grid-column: span N" sobre uma grid
   * de 6 colunas. Sem este reset os spans sobram na grid de 1 coluna. */
  [style*="grid-template-columns"] > * { grid-column: auto !important; }

  /* Linhas flex do tipo titulo + botao passam a quebrar em vez de espremer. */
  [style*="display: flex"][style*="space-between"] { flex-wrap: wrap !important; }

  /* ---------- espacamento ---------- */

  /* So as secoes que ja declaram padding: os heroes sao full-bleed
   * (sem padding inline) e devem continuar encostando nas bordas. */
  section[style*="padding"] { padding: 52px 18px !important; }

  /* Blocos internos com respiro de desktop (hero das paginas de conteudo). */
  [style*="padding: 80px 72px"] { padding: 44px 18px !important; }
  [style*="padding: 70px 48px"],
  [style*="padding: 24px 28px"],
  [style*="padding: 22px 24px"] { padding: 26px 18px !important; }

  /* ---------- tipografia ---------- */

  h1 { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(23px, 6.4vw, 30px) !important; line-height: 1.2 !important; }
  h3 { font-size: 18px !important; }

  /* ---------- carrinho da Loja ---------- */

  /* A gaveta lateral tem largura fixa de 420px, maior que a tela. */
  [style*="width: 420px"] {
    width: 100% !important;
    max-width: 420px !important;
    padding: 24px 18px !important;
  }

  /* ---------- Header ---------- */

  /* Só a primeira mensagem da tarja cabe; as demais (e os separadores) saem.
   * O padding direito reserva o espaco do seletor PT|ES, que e posicionado
   * de forma absoluta — sem ele a mensagem passa por baixo dele. */
  .nlb-topbar {
    font-size: 10px !important;
    gap: 8px !important;
    padding: 7px 58px 7px 12px !important;
    text-align: center;
  }
  .nlb-topbar > span:nth-child(n+2) { display: none !important; }

  /* Item flex tem min-width: auto por padrao e por isso nao encolhe abaixo do
   * proprio texto — sem este reset a mensagem invade o padding reservado. */
  .nlb-topbar > span:first-child {
    min-width: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nlb-header {
    flex-wrap: wrap !important;
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  .nlb-logo { height: 50px !important; }
  .nlb-cta { padding: 8px 14px !important; font-size: 11px !important; }

  /* 8 links nao cabem em uma tela de telefone: viram uma faixa rolavel
   * abaixo do logo, sem depender de JS nem de menu sanfona. */
  header .nlb-nav {
    order: 3 !important;
    width: 100% !important;
    gap: 18px !important;
    overflow-x: auto !important;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  header .nlb-nav::-webkit-scrollbar { display: none; }
  header .nlb-nav a { white-space: nowrap !important; font-size: 12px !important; }

  /* ---------- Footer ---------- */

  .nlb-footer { padding: 48px 18px 32px !important; }

  /* Bloco da marca ocupa a largura toda; as 3 colunas de links ficam 2 a 2,
   * o que encurta bastante o rodape no telefone. */
  footer .nlb-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px !important;
  }
  footer .nlb-footer-main > div:first-child { grid-column: 1 / -1 !important; }

  footer .nlb-footer-meta { margin-top: 34px !important; gap: 26px !important; }

  .nlb-footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center;
    margin-top: 26px !important;
  }

  /* Botoes flutuantes mais discretos e fora do polegar. O Instagram fica
     empilhado acima do WhatsApp: 16 (base) + 52 (botao) + 10 (respiro). */
  .nlb-wa {
    right: 16px !important;
    bottom: 16px !important;
    width: 52px !important;
    height: 52px !important;
  }

  .nlb-ig {
    right: 16px !important;
    bottom: 78px !important;
    width: 52px !important;
    height: 52px !important;
  }
}