/* Celular (Kalleb, 02/10: "tudo fica cortado pelo celular").

   Um arquivo só para a loja e o painel, no mesmo espírito do
   fundo-produto.css: as páginas vieram de um design com estilo inline, então
   aqui só se sobrescreve o que quebra em tela estreita, sem reescrever cada
   página. !important só onde o valor está inline.

   Medido em 390 px (iPhone 12/13/14) antes da correção:
   - painel: tabelas com min-width:760px, cartões de KPI e topo (busca de
     220 px + botão) passando da tela; sem menu, porque a barra lateral some
     abaixo de 900 px e nada a substituía;
   - loja: laterais de 48 px deixavam o card de produto com ~140 px úteis, e o
     botão "Comprar" e a etiqueta de medida saíam cortados;
   - catálogo: botão "Ver produto" vazando 23 px do card.
   O menu (botão ☰) vem do responsivo.js. */

/* Botão e painel do menu: só existem no celular. O painel ficava fora
   desta regra e aparecia no desktop como uma fileira de links colados no
   topo (02/10, achado na captura de 1440 px). */
.menu-btn, .menu-painel { display: none; }

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  /* `hidden` em html/body vira contêiner de rolagem e mata o position:sticky do cabeçalho: medido em
     03/10, rolando 1500 px o topo ia a -1473 px e o ☰ e o carrinho sumiam. `clip` corta o transbordo
     sem criar contêiner (os navegadores sem `clip` ficam com a regra acima). */
  @supports (overflow: clip) { html, body { overflow-x: clip; } }

  /* ---------- Loja, catálogo e produto ---------- */
  /* Logo do topo: 64 px no computador (pedido do cliente, 03/10: "bem visível");
     no celular 54 px, o maior que cabe em 360 px ao lado do carrinho e do ☰. */
  .logo-topo { height: 54px !important; }
  :has(> a > .logo-topo) { height: 80px !important; }

  /* Laterais de 48 px -> 16 px (mesma medida que as seções que já
     tinham regra de celular usam). Só a lateral: o respiro vertical fica. */
  [style*="px 48px"], [style*=":0 48px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding:48px"] { padding: 32px 16px !important; }

  /* Faixa preta do topo: uma linha só, telefone escondido (está no rodapé) */
  [style*="padding:7px 48px"] { font-size: 11px !important; }
  [style*="padding:7px 48px"] > span + span { display: none; }

  /* Card de produto: preço em cima, botão embaixo ocupando a largura */
  .prodcard { min-width: 0; }
  .prodcard [style*="justify-content:space-between"],
  .prodpe { flex-direction: column; align-items: stretch !important; gap: 8px; }
  .prodcard .buybtn { text-align: center; white-space: normal; }
  .prodcard [style*="font-size:17px"] { font-size: 15px !important; overflow-wrap: anywhere; }
  .prodcard [style*="font-size:14px"][style*="letter-spacing"] { font-size: 11px !important; }
  .prodcard [style*="font-size:19px"] { font-size: 17px !important; }
  .prodcard > div:last-child { padding: 12px !important; }
  .medida { max-width: calc(100% - 20px); font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prodgrid { gap: 10px !important; }

  /* Faixa de frases das páginas de produto: era uma linha só (nowrap) e
     as frases seguintes ficavam fora da tela; no celular, uma por linha. */
  [style*="white-space:nowrap;padding-left:48px"] { flex-direction: column; gap: 10px !important; white-space: normal !important; padding-left: 16px !important; padding-right: 16px; }
  [style*="white-space:nowrap;padding-left:48px"] > span[style*="color:#ffa800"] { display: none; }
  [style*="white-space:nowrap;padding-left:48px"] > span { font-size: 14px !important; }

  /* Menu da loja */
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: 0; padding: 0;
    background: transparent; border: 1px solid #333; border-radius: 4px;
    color: #fff; cursor: pointer;
  }
  /* Carrinho e ☰ juntos à direita: os dois tinham margin-left:auto e o carrinho ficava boiando no
     meio do topo, a meio caminho da logo (medido: x=176 de 390 px). */
  a[aria-label^="Ver meu carrinho"] { margin-left: auto !important; }
  :has(> .menu-btn) { gap: 12px !important; }
  .menu-painel {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    flex-direction: column; background: #000; border-bottom: 1px solid #1a1a1a;
    padding: 8px 16px 16px;
  }
  .menu-painel a { padding: 14px 0; border-bottom: 1px solid #1a1a1a; color: #fff; font-size: 16px; font-weight: 700; }
  .menu-aberto .menu-painel { display: flex; }

  /* ---------- Painel administrativo ---------- */

  .main [style*="padding:0 32px"] { padding-left: 16px !important; padding-right: 16px !important; }
  .main [style*="padding:28px 32px"] { padding: 16px !important; gap: 16px !important; }

  /* Topo: espaço para o ☰, busca some (220 px fixos), botões encolhem */
  .main > div:first-child {
    height: auto !important; min-height: 64px; flex-wrap: wrap; gap: 10px;
    padding: 10px 16px 10px 68px !important;
  }
  .main > div:first-child [style*="width:220px"],
  .main > div:first-child [style*="width:230px"],
  .main > div:first-child [style*="width:260px"] { display: none !important; }
  .main > div:first-child .btn-primary { padding: 10px 12px; font-size: 12px; }

  .card { min-width: 0; }
  .split2, .split3 { grid-template-columns: 1fr !important; }

  /* Tabelas: no celular cada linha vira um bloco (nome em cima, demais
     campos em duas colunas) em vez de rolar 760 px para o lado. O cabeçalho
     (a linha em caixa alta) some porque os rótulos perderiam o alinhamento. */
  .row { min-width: 0 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 8px !important; }
  .row > :first-child { grid-column: 1 / -1; }
  .row[style*="uppercase"] { display: none !important; }
  .row > [style*="text-align:right"], .row > [style*="justify-content:flex-end"] { text-align: left !important; justify-content: flex-start !important; }

  /* Gráficos e grades internas com colunas fixas */
  .main [style*="grid-template-columns:repeat(3"],
  .main [style*="grid-template-columns:repeat(4"],
  .main [style*="grid-template-columns:repeat(5"],
  .main [style*="grid-template-columns:repeat(6"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .main .kpi3, .main .kpi4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }

  /* Barra lateral vira gaveta, aberta pelo ☰ */
  .shell .menu-btn {
    position: fixed; top: 10px; left: 12px; z-index: 60;
    background: #000; border-color: #000; color: #ffa800;
  }
  .menu-aberto .sidebar {
    display: flex !important; position: fixed; top: 0; bottom: 0; left: 0; z-index: 55;
    width: min(280px, 82vw); overflow-y: auto; box-shadow: 20px 0 60px rgba(0,0,0,.35);
  }
  /* Aberta, o ☰ vai para a borda da gaveta (em cima dela, tampava o logo) */
  .menu-aberto > .menu-btn { left: calc(min(280px, 82vw) + 12px); }
  .menu-fundo { display: none; }
  .menu-aberto .menu-fundo { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45); }
}

@media (max-width: 480px) {
  /* KPIs: uma coluna; os números grandes (R$ 128,4k) não cabem em ~170 px */
  .main .kpi3, .main .kpi4 { grid-template-columns: 1fr !important; }

  /* "ROLE ⌄" do hero: em até ~480 px o selo "20+ anos" (16 px + ~330 px)
     ocupa a mesma linha e os dois se sobrepunham. No toque, rolar é óbvio;
     a dica some só aqui. */
  .scrollcue { display: none !important; }
}

/* Escala de texto no celular (Kalleb, 02/10, com prints do iPhone:
   "elementos ENORMES no mobile... muita info na cara do user").
   Medido em 390 px antes: títulos de seção 36-46 px, título do hero 34 px,
   números 28-34 px, parágrafos 19-20 px, botões 17 px com 15 px de
   respiro. Escala daqui: h1 26-28, h2 24, h3 18, texto corrido 15-16,
   botões 15. Inputs ficam em 16 px de propósito: abaixo disso o iPhone dá
   zoom na página ao tocar no campo. */
@media (max-width: 640px) {
  body .hero-h1 { font-size: 28px !important; line-height: 1.12 !important; }
  h1, body .titulo h1 { font-size: 26px !important; line-height: 1.15 !important; }
  h2 { font-size: 24px !important; line-height: 1.15 !important; }
  h3 { font-size: 18px !important; }
  h4 { font-size: 18px !important; }

  /* Texto corrido e chamadas */
  p[style*="font-size:20px"], p[style*="font-size:19px"], p[style*="font-size:18px"],
  .manifesto p { font-size: 15px !important; line-height: 1.55 !important; }
  .manifesto p span { font-size: 18px !important; }
  [style*="font-size:22px"] { font-size: 17px !important; }

  /* Números de destaque e preço grande da página de produto */
  .numero b, .manifesto-dado strong, [style*="font-size:28px"] { font-size: 24px !important; }
  [style*="font-size:32px"] { font-size: 24px !important; }
  .catnum { font-size: 64px; }
  .cattitle { font-size: 16px; }
  .catdesc, .catpe { font-size: 13px; }

  /* Botões */
  .cta-btn, .ghost-btn, a.cta-btn[style] { font-size: 15px !important; padding: 12px 18px !important; }
  .prodcard .buybtn { font-size: 14px; padding: 7px 10px; }

  /* Janela de orçamento. "body" na frente porque o orcamento.css é
     injetado pelo orcamento.js depois desta folha e ganharia no empate. */
  body .orc-topo h3 { font-size: 19px !important; }
  body .orc-zap { padding: 12px 14px; }
  body .orc-zap b { font-size: 16px; }
  body .orc-form { gap: 10px 12px; }
  body .orc-form label { font-size: 13px; }
  body .orc-form input, body .orc-form textarea { padding: 9px 11px; }
  body .orc-enviar { font-size: 15px; padding: 13px; }
  /* Campos curtos dois por linha (Nome|Empresa, E-mail|Telefone,
     Produto|Quantidade): o formulário em uma coluna passava de uma tela e
     meia; só a mensagem ocupa a largura toda. */
  body .orc-form { grid-template-columns: 1fr 1fr; }
  body .orc-form .orc-largo:has(input) { grid-column: auto; }
  body .orc-form input { min-width: 0; width: 100%; box-sizing: border-box; }
}

/* Fotos e janelas menores no celular (Kalleb, 02/10: "fotos e modais podem
   ser menores"; tirar o selo "20+ anos" de baixo do botão do catálogo).
   Medido em 390 px antes: foto da história 380 px, Linha Especial 300,
   galeria do produto 460, foto do modal do catálogo 300 (janela de
   342x532), cards de produto 130-150, carrinho em tela cheia. */
@media (max-width: 640px) {
  .hero-badge { display: none !important; }

  /* Fotos */
  .prodvisual { height: 116px !important; }
  .storyimg { height: 230px !important; }
  body .historia > div:first-child > div:first-child { height: 230px !important; }
  .le-foto { height: 190px !important; padding: 14px !important; }
  .catcard { min-height: 150px !important; }
  .gallery-main[style*="height:460px"] { height: 280px !important; }

  /* Janela da galeria (catálogo) */
  .modal { padding: 20px !important; }
  .modalbox { border-radius: 14px !important; }
  .modalbox { max-height: 84vh !important; }
  .gal { padding: 14px !important; gap: 8px !important; }
  /* 240 e não 190: a janela virou a seção grande do produto (Kalleb, 07/10, "maior e mais bonita"); segue
     centralizada e com as bordas à mostra, como pedido em 02/10, e o resto rola dentro dela. */
  .galmain { height: 240px !important; }
  .thumbs .thumb { width: 50px; height: 50px; }

  /* Janela de orçamento e carrinho: não ocupam a tela inteira */
  body .orc { max-height: 84vh; }
  body .orc-marca { display: none; }
  body .orc-topo { padding: 16px 16px 14px; }
  .gaveta { width: 88% !important; }
}

/* Janela de orçamento recolhida e telefone numa linha (Kalleb, 02/10,
   prints do iPhone: "o modal cobre toda a tela"; "o botão do número de
   telefone tá quebrando em duas linhas"). No celular a janela abre só com o
   WhatsApp, que é o caminho mais rápido; o formulário de e-mail aparece ao
   tocar em "ou envie por e-mail" (responsivo.js põe .orc-email na janela).
   Medido em 390x844: a janela aberta caía de 673 px para ~330 px. */
@media (max-width: 640px) {
  /* Centralizada, com margem e cantos à mostra (Kalleb, 02/10: "modal no
     centro da tela, menor e com as bordas aparecendo"). O orcamento.css
     colava a janela no rodapé, de ponta a ponta, abaixo de 600 px. */
  body .orc-fundo { align-items: center; padding: 20px; }
  body .orc { width: 100%; max-width: 360px; max-height: 78vh; border-radius: 14px; }
  body .orc-topo { border-radius: 14px 14px 0 0; }
  body .orc:not(.orc-email) .orc-form { display: none; }
  body .orc:not(.orc-email) .orc-ou { cursor: pointer; margin-bottom: 20px; }
  body .orc:not(.orc-email) .orc-ou span { color: #1a1a1a; text-decoration: underline; text-underline-offset: 3px; }
  body .orc:not(.orc-email) .orc-ou span::after { content: " ▾"; }
  body .orc-topo h3 { font-size: 17px !important; margin-top: 4px; }
  body .orc-topo { padding: 14px 16px 12px; }

  /* Botões da chamada final: o telefone não quebra; o do orçamento cede. */
  .ghost-tel { white-space: nowrap; flex: none; padding: 12px 14px !important; display: inline-flex; align-items: center; justify-content: center; }
  .ghost-tel + *, [data-orcamento].cta-btn { min-width: 0; }
  .cta-btn[data-orcamento] { flex: 1; justify-content: center; }
}