/* ============================================================================
   AgroCampo — Responsivo
   Carregado por último: concentra em um só lugar tudo que muda por largura,
   para não caçar media query espalhada por três arquivos.

   Breakpoints: 1180 (menu compacto) · 980 (painel/menu mobile) ·
                860 (2 colunas) · 620 (1 coluna) · 420 (ajuste fino)
   ========================================================================== */

/* Rede de segurança: nenhum filho deve criar rolagem horizontal no documento.
   `clip` em vez de `hidden` porque `hidden` quebraria o position:sticky
   do cabeçalho e das colunas de resumo. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* Mídia e conteúdo largo nunca estouram o container.
   Sem `height: auto` de propósito: ele sobrescreveria a altura fixa das
   miniaturas (carrinho, painel, pedidos) e estouraria as linhas da tabela. */
img, svg, video, canvas { max-width: 100%; }
pre, code { overflow-x: auto; max-width: 100%; }

/* Itens de flex/grid podem encolher abaixo do conteúdo (o padrão `auto`
   é a causa mais comum de overflow horizontal) */
.row > *, .grid > *, .stack > * { min-width: 0; }

/* Filtros do catálogo: acordeão só no mobile (regras em ≤860px). */
.filters__toggle { display: none; }
.filters .accordion__panel { max-height: none; overflow: visible; }

/* ======================================================== ≤ 1180px */
@media (max-width: 1180px) {
  .catalog { grid-template-columns: 210px 1fr; gap: var(--s-6); }
}

/* ========================================================= ≤ 980px */
@media (max-width: 980px) {
  :root { --header-h: 64px; }

  /* a topbar vira só a mensagem principal — os links já estão no rodapé
     e no menu, e eram o que empurrava o documento para fora da tela */
  .topbar__pills { display: none; }
  .topbar .wrap { justify-content: center; }
  .topbar__highlight { text-align: center; }

  .header__main { gap: var(--s-3); }
  .logo img { height: 38px; }

  /* grades de painel declaradas inline no template caem para uma coluna */
  .panel__main .grid[style] { grid-template-columns: 1fr !important; }
}

/* ========================================================= ≤ 860px */
@media (max-width: 860px) {
  .catalog { grid-template-columns: 1fr; }

  /* filtros recolhidos por padrão: o primeiro produto fica logo abaixo */
  .filters { position: static; }
  .filters__toggle { display: inline-flex; }
  .filters .accordion__panel { max-height: 0; overflow: hidden; }
  .filters.is-open .accordion__panel {
    max-height: 1600px;
    overflow: visible;
    margin-top: var(--s-4);
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }

  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .section-head { align-items: flex-start; }

  /* Os pontos do carrossel ficavam por baixo da figura do banner.
     Aqui eles saem de cima da arte e viram uma faixa propria, abaixo. */
  .hero__dots {
    position: static; transform: none;
    justify-content: center; padding-block: var(--s-4);
    order: 3; width: 100%;
    /* a faixa desenha a linha do chão em que a figura se apoia */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .22) 100%);
  }
  .hero .wrap { display: flex; flex-direction: column; }
  .hero__inner { order: 1; }
}

/* ========================================================= ≤ 620px */
@media (max-width: 620px) {
  :root { --fs-4xl: 1.875rem; --fs-3xl: 1.625rem; --fs-2xl: 1.375rem; }

  .wrap { padding-inline: var(--s-4); }

  .trust__grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .grid--6, .grid--5, .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); }

  /* linha de carrinho/pedido empilha em vez de espremer */
  .cart-line { flex-wrap: wrap; }
  .cart-line__media { width: 68px; height: 68px; }
  .cart-line > div:last-child { width: 100%; text-align: left; }

  /* ── Tabelas do painel viram cartões ──────────────────────────────
     Rolar uma tabela de 800px numa tela de 320px é inviável no dedo: o
     lojista perde o cabeçalho e não sabe que coluna está lendo. Cada
     linha vira um cartão e o rótulo da coluna vem do data-rotulo. */
  .tabela-cartao,
  .tabela-cartao thead,
  .tabela-cartao tbody,
  .tabela-cartao tr,
  .tabela-cartao td { display: block; width: 100%; }

  .tabela-cartao thead { display: none; }

  .tabela-cartao tbody tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-3);
    box-shadow: var(--sh-1);
  }
  .tabela-cartao tbody tr:hover { background: var(--surface); }

  .tabela-cartao tbody td {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    border-top: none;
    border-bottom: 1px solid var(--line);
    text-align: right;
  }
  .tabela-cartao tbody td:last-child { border-bottom: none; padding-bottom: 0; }

  /* o rótulo da coluna vira o rótulo do campo dentro do cartão */
  .tabela-cartao tbody td::before {
    content: attr(data-rotulo);
    flex: none; text-align: left;
    font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em;
  }
  .tabela-cartao tbody td:empty { display: none; }

  /* célula com botões ocupa a linha inteira */
  .tabela-cartao tbody td[data-rotulo="Ações"],
  .tabela-cartao tbody td[data-rotulo="Repor"] {
    flex-wrap: wrap; justify-content: flex-start; padding-top: var(--s-3);
  }

  /* tabelas sem o padrão de cartão seguem rolando, com aviso visual */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  table.data:not(.tabela-cartao) { min-width: 560px; }

  /* ── Alvos de toque ──────────────────────────────────────────────
     Referência: 44px. Links de texto largos são perdoáveis com menos
     altura, mas ainda precisam de área para o polegar. */
  .panel__main a.xs,
  .panel__main .link-underline,
  .panel__main table.data a,
  .panel__main .link-produto {
    min-height: 40px; display: inline-flex; align-items: center;
  }

  /* o alvo real do checkbox é o label inteiro, não o quadradinho */
  .panel__main .switch-row {
    min-height: 44px; padding-block: var(--s-1);
    cursor: pointer;
  }
  .panel__main input[type="checkbox"] { width: 24px; height: 24px; flex: none; }

  /* dentro do cartão, a linha do checkbox ocupa a largura toda */
  .tabela-cartao .switch-row { width: 100%; justify-content: flex-end; }

  /* Cabeçalho das telas do painel: busca e ação empilham em vez de
     disputar a mesma linha e acabar sobrepostas. */
  .panel__main > .row--between { flex-direction: column; align-items: stretch; }
  .panel__main > .row--between > form { width: 100%; }
  .panel__main > .row--between > .btn { width: 100%; justify-content: center; }

  /* campos apertados demais para digitar no celular */
  .panel__main input[type="text"],
  .panel__main input[type="number"] { min-width: 100px; }
  .tabela-cartao input[type="text"],
  .tabela-cartao input[type="number"] { width: 100% !important; max-width: 200px; }

  .newsletter { padding: var(--s-6); }
  .flash__inner { padding: var(--s-6); }
  .countdown { flex-wrap: wrap; }

  /* No celular o toast ia no rodape e cobria os botoes de acao — em modal
     com "Continuar"/"Salvar" embaixo, isso trava o fluxo. Sobe para o topo. */
  .toast-stack {
    left: var(--s-3); right: var(--s-3); top: var(--s-3);
    bottom: auto; max-width: none;
    z-index: 1300;                    /* acima do modal (1200) */
  }

  .gallery__thumbs { grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }

  .pager a, .pager span { min-width: 36px; height: 36px; }
}

/* ========================================================= ≤ 420px
   Vitrine continua em 2 colunas — é o padrão de e-commerce mobile e evita
   uma home quilométrica. Só os pares de conteúdo (.grid--2) empilham. */
@media (max-width: 420px) {
  .grid--2 { grid-template-columns: 1fr; }
  .grid--6, .grid--5, .grid--4, .grid--3 { gap: var(--s-3); }

  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }

  .product__body { padding: var(--s-3); }
  .product__actions { padding: 0 var(--s-3) var(--s-3); }
  .product__name { font-size: var(--fs-xs); }
  .product__price-now { font-size: var(--fs-base); }
  .cat-tile { padding: var(--s-4) var(--s-2); font-size: var(--fs-xs); }
  .species-tile__circle { width: 68px; height: 68px; }

  .btn--lg { padding: .85rem 1.25rem; font-size: var(--fs-base); }
}

/* ========================================================= ≤ 340px
   Aparelhos muito estreitos: aí sim vale empilhar tudo. */
@media (max-width: 340px) {
  .grid--6, .grid--5, .grid--4, .grid--3 { grid-template-columns: 1fr; }
}

/* ============================================== telas largas de verdade */
@media (min-width: 1500px) {
  :root { --wrap: 1340px; }
}