/* Plataforma DF (loja + Retail OS) — adaptação para telas pequenas.
   Mesmo padrão do even.quartzdigital.com.br: arquivo separado, ligado por
   <link>, e NADA aqui roda acima de 900px — o desktop fica byte a byte
   como era.

   O pacote saiu do Claude Design com todos os estilos no atributo `style`,
   então as regras casam pelo próprio texto do estilo autoral e usam
   !important. O runtime dc normaliza o atributo (`display: flex`, `0` vira
   `0px`, `grid-column: span 2`) e é essa forma normalizada que os seletores
   procuram — lida do DOM ao vivo, não suposta. Se o pacote for reexportado
   com outras medidas, é aqui que quebra primeiro.

   Duas quebras:
     ate 900px  desmancha as grades largas, tira a barra lateral do painel
                e faz as tabelas rolarem dentro do próprio cartão
     ate 640px  tudo em coluna única e menos recheio lateral               */

/* ==================================================================== */
/* 1. Regra de fundo: item de grade/flex pode encolher                   */
/* ==================================================================== */
/* Sem isto, 1fr = minmax(min-content, 1fr) e as colunas estouram a caixa
   em vez de espremer o conteúdo — é a causa raiz do transbordo. */
@media (max-width: 900px) {
  [style*="display: grid"] > *,
  [style*="display: flex"] > * { min-width: 0; }
}

/* ==================================================================== */
/* 2. LOJA — a trava de 1280px                                           */
/* ==================================================================== */
/* A loja inteira mora num min-width: 1280px: num aparelho de 390px o
   visitante via uma fatia de 30% da página e rolava 890px para o lado.
   Este é o ajuste que segura todo o resto. */
@media (max-width: 900px) {
  div[style*="min-width: 1280px"] { min-width: 0 !important; }
}

/* 2a. Faixa de aviso e cabeçalho ------------------------------------- */
@media (max-width: 900px) {
  /* as faixas de 1240px de largura fixa passam a caber na tela */
  div[style*="max-width: 1240px"] { max-width: 100% !important; }

  /* a barra de recados ("Frete grátis…") quebra em duas linhas em vez de
     empurrar "Favoritos / Minha conta / Painel de gestão" para fora */
  div[style*="padding: 9px 28px"] {
    flex-wrap: wrap !important;
    white-space: normal !important;
    row-gap: 4px;
    gap: 12px !important;
  }
  div[style*="padding: 9px 28px"] > span[style*="flex: 1"] { display: none !important; }

  /* o cabeçalho da loja vira duas linhas: marca + sacola em cima,
     busca e menu embaixo */
  div[style*="padding: 16px 28px"][style*="display: flex"] {
    flex-wrap: wrap !important;
    row-gap: 12px;
    gap: 16px !important;
  }
  /* o campo de busca de largura fixa (230px) ganha a linha inteira */
  div[style*="flex: 0 0 230px"] {
    flex: 1 1 100% !important;
    order: 3;
  }
  /* o menu de categorias rola de lado em vez de espremer as palavras */
  div[style*="padding: 16px 28px"] > div[style*="gap: 24px"] {
    flex: 1 1 100% !important;
    order: 4;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  div[style*="padding: 16px 28px"] > div[style*="gap: 24px"] > * {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }
}

/* 2b. Grades da loja -------------------------------------------------- */
@media (max-width: 900px) {
  /* herói (texto + foto de campanha) e ficha do produto (fotos + compra) */
  [style*="grid-template-columns: minmax(0px, 1.05fr) minmax(0px, 1fr)"],
  [style*="grid-template-columns: minmax(0px, 1.15fr) minmax(0px, 1fr)"],
  /* sacola (itens + resumo) e checkout (formulário + resumo) */
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* vitrine de produtos: 4 por linha vira 2 — a foto ainda respira */
  [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"],
  /* faixa de garantias (estoque real / troca / retirada / atendimento) */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  /* os dois cartões de coleção e o rodapé (marca + 3 colunas de links) */
  [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr)"],
  [style*="grid-template-columns: 1.3fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}

/* 2c. Ficha do produto ------------------------------------------------ */
/* A tira de miniaturas fica à esquerda da foto grande (76px + resto). Em
   telas estreitas ela come um quinto da largura útil, então vai para
   baixo da foto e rola de lado. */
@media (max-width: 640px) {
  [style*="grid-template-columns: 76px minmax(0px, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: 76px minmax(0px, 1fr)"] > div[style*="flex-direction: column"] {
    order: 2;
    flex-direction: row !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  [style*="grid-template-columns: 76px minmax(0px, 1fr)"] > div[style*="flex-direction: column"] > * {
    flex: 0 0 76px !important;
  }
}

/* 2d. Sacola e checkout ----------------------------------------------- */
@media (max-width: 640px) {
  /* linha da sacola: foto | nome | quantidade | preço (322px só de colunas
     fixas em 390px de tela). Vira foto | nome, com quantidade e preço
     caindo para a linha de baixo.
     A primeira coluna é `auto`, não uma medida escrita à mão: ela precisa
     caber o MAIOR dos dois itens que caem nela — a foto (92px) e o
     seletor de quantidade (112px). Com 84px fixos o seletor invadia a
     coluna do preço e os dois retângulos se sobrepunham. */
  [style*="grid-template-columns: 92px 1fr 130px 100px"] {
    grid-template-columns: auto 1fr !important;
    row-gap: 10px;
  }

  /* campos do formulário de identificação e de endereço */
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(6, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* O grid-column: span N do desenho de 6 colunas (Endereço ocupa 4,
     Cidade 4, Bairro 3…) não sobrevive ao corte para 2 colunas: um span
     maior que o número de colunas CRIA colunas implícitas e devolve o
     transbordo que a regra acima acabou de tirar. Zerar o span é o que faz
     os campos simplesmente fluírem de dois em dois. */
  [style*="grid-template-columns: 1fr 1fr"] > [style*="grid-column: span"],
  [style*="grid-template-columns: repeat(6, 1fr)"] > [style*="grid-column: span"] {
    grid-column: auto !important;
  }
}

/* 2e. Respiro lateral -------------------------------------------------- */
/* 28px de cada lado é medida de desktop; em 360px sobrava pouco para o
   título de 56px do herói. */
@media (max-width: 640px) {
  div[style*="padding: 34px 28px 0px"],
  div[style*="padding: 32px 28px 0px"],
  div[style*="padding: 24px 28px 0px"],
  div[style*="padding: 44px 28px 30px"],
  div[style*="padding: 18px 28px 34px"],
  div[style*="padding: 16px 28px"],
  div[style*="padding: 9px 28px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* 2f. Tipografia grande demais ----------------------------------------- */
/* O título do herói tem 56px: em 360px pedia mais linha do que existe e a
   palavra furava a caixa. clamp em vez de degrau fixo porque o limite
   acompanha a largura. */
@media (max-width: 640px) {
  [style*="font-size: 56px"] { font-size: clamp(30px, 10vw, 56px) !important; }
  [style*="font-size: 42px"] { font-size: clamp(26px, 8vw, 42px) !important; }
  [style*="font-size: 36px"] { font-size: clamp(24px, 7vw, 36px) !important; }
}

/* ==================================================================== */
/* 3. PAINEL (Retail OS) — o esqueleto de 100vh                          */
/* ==================================================================== */
/* O painel é uma barra lateral de 248px + um painel de conteúdo que rola
   por dentro, tudo preso num height: 100vh; overflow: hidden. Em 390px a
   lateral comia 248px e o conteúdo ficava RECORTADO — não transbordava,
   simplesmente não havia como chegar nele. Aqui o esqueleto deixa de ser
   lado a lado e quem rola volta a ser a página. */
@media (max-width: 900px) {
  div[style*="height: 100vh"][style*="overflow: hidden"] {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }

  /* o painel de conteúdo para de rolar por dentro */
  div[style*="overflow: auto"][style*="padding: 26px 26px 60px"] {
    overflow: visible !important;
    padding: 18px 14px 48px !important;
  }

  /* e para de exigir 1240px de largura */
  div[style*="min-width: 1240px"] { min-width: 0 !important; }
}

/* 3a. Barra lateral vira faixa no topo --------------------------------- */
@media (max-width: 900px) {
  div[style*="flex: 0 0 248px"] {
    width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
    overflow: visible !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px;
    padding: 8px 14px;
    border-right: none !important;
    border-bottom: 1px solid rgb(236, 236, 243) !important;
  }

  /* marca à esquerda, usuário/Sair à direita, menu na linha de baixo.
     A marca leva `flex: 0 1 auto` (não `1 1`): com `1 1` ela esticava até o
     fim da linha e empurrava "Daniela Moraes / Sair" para uma linha só
     dela, custando ~70px de altura logo na primeira dobra. */
  div[style*="flex: 0 0 248px"] > div[style*="padding: 18px 18px 16px"] {
    flex: 0 1 auto;
    padding: 0 !important;
  }
  div[style*="flex: 0 0 248px"] > div[style*="padding: 14px 16px"] {
    flex: 1 1 auto;
    justify-content: flex-end;
    padding: 0 !important;
    border-top: none !important;
  }
  /* o cargo ("Administrador · Todas as lojas") é o texto mais largo dos
     dois blocos: sozinho ele estoura a linha. Some na faixa e continua
     inteiro no desktop. */
  div[style*="flex: 0 0 248px"] > div[style*="padding: 14px 16px"] div[style*="font-size: 11px"] {
    display: none !important;
  }

  /* o menu: de coluna para faixa que rola de lado. `order` alto porque ele
     ocupa a linha inteira: sem isso ele se enfia ENTRE a marca e o bloco do
     usuário e empurra "Daniela Moraes / Sair" para uma terceira linha. */
  div[style*="flex: 0 0 248px"] > div[style*="overflow-y: auto"] {
    order: 9;
    flex: 1 1 100% !important;
    flex-direction: row !important;
    overflow-y: visible !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding: 4px 0 2px !important;
    scrollbar-width: thin;
  }
  /* cada grupo do menu (CATÁLOGO, VENDAS…) vira um bloco lado a lado */
  div[style*="flex: 0 0 248px"] > div[style*="overflow-y: auto"] > div {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center;
    padding-bottom: 0 !important;
    gap: 6px !important;
  }
  /* os rótulos de seção só fazem sentido empilhados numa coluna */
  div[style*="flex: 0 0 248px"] > div[style*="overflow-y: auto"] > div > div[style*="text-transform: uppercase"] {
    display: none !important;
  }
  div[style*="flex: 0 0 248px"] > div[style*="overflow-y: auto"] > div > div[style*="cursor: pointer"] {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }
  /* o nome do módulo não pode ser cortado com reticências numa faixa */
  div[style*="flex: 0 0 248px"] span[style*="text-overflow: ellipsis"] {
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* 3b. Barra de cima do painel ------------------------------------------ */
@media (max-width: 900px) {
  div[style*="padding: 14px 26px"][style*="flex: 0 0 auto"] {
    flex-wrap: wrap !important;
    row-gap: 10px;
    gap: 10px !important;
    padding: 12px 10px !important;
  }
  /* a busca de 340px fixos ganha a linha inteira */
  div[style*="flex: 0 0 340px"] {
    flex: 1 1 100% !important;
    order: 5;
  }
  /* O grupo de botões cabia em 362px por 0px de folga, e o resultado era
     "Novo produto" partido em duas linhas DENTRO do botão. Deixando o
     grupo quebrar, cada botão volta à largura natural.
     Medido a 390px (o iPhone mais comum): os quatro itens somam 343px de
     conteúdo; com gap 8 e o recheio da barra em 10px sobram 370px de útil,
     então os quatro cabem numa linha só. Abaixo disso o sino e o avatar
     descem JUNTOS para a segunda linha — que é a degradação boa; com o gap
     original um deles descia sozinho e custava uma linha inteira. */
  div[style*="padding: 14px 26px"][style*="flex: 0 0 auto"] > div[style*="gap: 14px"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* 3b-bis. Cabeçalho de cada módulo (título | filtros) ------------------- */
/* O grupo de filtros da direita ficava espremido em 135px e a caixa de
   busca, que tem 250px FIXOS, vazava os 115px de diferença — em todos os
   16 módulos. Não aparecia na tela por causa do overflow-x: hidden da rede
   de segurança, o que é justamente o pior jeito de um defeito existir. */
@media (max-width: 900px) {
  div[style*="align-items: flex-end"][style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  div[style*="flex-wrap: wrap"][style*="justify-content: flex-end"] {
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
  }
  div[style*="position: relative"]:has(> div[style*="width: 250px"]) {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  /* busca do módulo (250px) e campo de texto das Configurações (300px) */
  [style*="width: 250px"],
  [style*="width: 300px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 3c. Grades de painel ------------------------------------------------- */
/* Painéis lado a lado (gráfico + lista, tabela + resumo) empilham. */
@media (max-width: 900px) {
  [style*="grid-template-columns: 1.15fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 1.7fr 1fr"],
  [style*="grid-template-columns: 1fr 1.55fr"],
  [style*="grid-template-columns: minmax(0px, 1.35fr) 360px"],
  [style*="grid-template-columns: minmax(0px, 1fr) 320px"],
  [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.25fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ladrilhos de número curto (6 / Produtos publicados): dois por linha
     cabem em 390px e evitam uma coluna de oito cartões só de rolagem.
     O vão cai de 20px para 12px porque cada 8px economizados viram 4px de
     largura útil em CADA ladrilho — e é essa margem que decide se
     "R$ 46.468,15" cabe numa linha. */
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* 3c-ter. Os valores dos ladrilhos ------------------------------------- */
/* Medido em Financeiro a 390px: "R$ 46.468,15" a 22px pede 146px e o
   ladrilho oferece 131px — o valor quebrava depois do "R$", que é o pior
   lugar possível. A 19px ele pede 126px e cabe com folga. Encolher a
   tipografia é melhor do que passar os ladrilhos para uma coluna só, que
   transformaria cinco indicadores em cinco telas de rolagem. */
@media (max-width: 640px) {
  [style*="font-size: 22px"] { font-size: 19px !important; }

  /* "R$ 372,61" divide a linha com o sufixo "/venda": sobravam 90px para um
     valor que pede 115px. Deixando a linha quebrar, o valor fica com os
     129px inteiros e o sufixo desce — melhor do que encolher o número que é
     justamente o conteúdo do cartão. */
  div[style*="align-items: baseline"][style*="gap: 5px"] { flex-wrap: wrap !important; }

  /* Lojas e metas: "R$ 40.404,00" a 24px pede 143px, e mesmo a 21px pede
     141px numa caixa de 112px — encolher a fonte não resolvia sem deixar o
     número ilegível. São só três cartões de loja, então eles passam a uma
     coluna e o valor volta a caber com a tipografia original. */
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* O gráfico de barras do Business Intelligence tem 12 barras. Em 316px
     cada barra fica com 14px e o rótulo "R$ 72.035,00" pede 49px: os
     rótulos se atropelavam. Como as tabelas, o gráfico mantém a forma e
     rola de lado dentro do cartão (que já é rolador pela regra 3d). */
  div[style*="align-items: flex-end"][style*="height: 210px"] {
    min-width: 1640px !important;
  }

  /* Compras: nos mini-cartões, rótulo e valor dividem 117px por
     space-between e o valor ficava com 48px para um número de 61px.
     Deixando a linha quebrar, o valor cai para baixo do rótulo inteiro. */
  div[style*="flex-direction: column"][style*="gap: 6px"][style*="font-size: 12px"] > div[style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
  }
}

/* 3c-quater. Cabeçalho de cartão com botão à direita -------------------- */
/* Linha "título à esquerda, botão à direita" (space-between). A regra 1
   deixa todo filho de flex encolher, e o botão encolhia ABAIXO do próprio
   texto: "Nova oportunidade" virava "Nova oportunidad" cortado na borda do
   cartão. Deixando a linha quebrar, o botão desce inteiro. Quebrar só tem
   efeito quando não cabe, então não mexe em nenhuma linha que já cabia. */
@media (max-width: 900px) {
  div[style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
  }

  /* Generalizando: a regra 1 (min-width: 0) é o que torna possível caber
     tudo, mas ela também deixa um chip ou botão encolher ABAIXO do próprio
     rótulo — foi assim que "Descartar", "Publicar loja", "E-commerce" e
     "Falar no WhatsApp" apareceram cortados. Toda linha flex centrada passa
     a poder quebrar. Quebrar não muda nada onde já cabia: só entra em ação
     exatamente no caso em que hoje o texto seria comido. */
  div[style*="display: flex"][style*="align-items: center"]:not([style*="flex-wrap"]) {
    flex-wrap: wrap;
  }
}

/* 3c-bis. Gráfico + legenda -------------------------------------------- */
/* O donut e a legenda são um flex lado a lado. Em 390px sobravam 132px para
   a legenda e, com a rede de segurança ligada, "Aguardando pagamento" saía
   quebrado NO MEIO DA PALAVRA ("Aguard/ando pagam/ento"). Empilhando, a
   legenda recebe a largura inteira do cartão e as palavras voltam a caber. */
@media (max-width: 640px) {
  div[style*="gap: 26px"][style*="margin-top: 16px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
}

/* 3d. Tabelas do painel ------------------------------------------------ */
/* Não há table nenhuma: cada "tabela" é um cartão
   (border-radius: 14px; overflow: hidden) com o cabeçalho e as linhas como
   IRMÃOS, cada um um display: grid com o MESMO grid-template. Por isso não
   dá para colapsar as colunas: cabeçalho e linhas são grades independentes
   e sairiam desalinhados. A saída é a mesma que o Even usa para table: a
   tabela mantém a forma e rola de lado dentro da própria caixa, sem
   empurrar a página.

   O cartão vira o rolador... */
/* Dois cartões (a matriz de variações em Produtos e a de permissões em
   Usuários) não têm overflow: hidden e sim padding: 20px 22px — sem os
   incluir aqui, as tabelas deles ganhavam min-width e vazavam 547px e
   367px sem rolador nenhum. */
@media (max-width: 900px) {
  div[style*="border-radius: 14px"][style*="overflow: hidden"],
  div[style*="border-radius: 14px"][style*="padding: 20px 22px"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ...e todas as linhas de uma mesma tabela recebem a MESMA largura
     mínima, senão cada grade calcularia a sua e as colunas deixariam de
     bater entre cabeçalho e linhas. Os valores saem da largura que cada
     tabela ocupa no desktop, medida no DOM — não estimada. */
  [style*="grid-template-columns: 1.7fr 110px 110px 90px 90px 130px 120px"],
  [style*="grid-template-columns: 96px 1.2fr 1fr 104px 104px 104px 132px 128px"],
  [style*="grid-template-columns: 1.4fr 90px 100px 110px 90px 120px 130px"],
  [style*="grid-template-columns: 1.5fr 1fr 160px 90px 200px"] {
    min-width: 1000px !important;
  }
  [style*="grid-template-columns: 150px repeat(5, 1fr)"] {
    min-width: 900px !important;
  }
  [style*="grid-template-columns: 92px 1.3fr 1fr 92px 104px 120px 96px"] {
    min-width: 880px !important;
  }
  [style*="grid-template-columns: 1.5fr 86px 92px 86px 76px 70px 106px"] {
    min-width: 780px !important;
  }
  [style*="grid-template-columns: 1.6fr repeat(4, 1fr)"],
  [style*="grid-template-columns: 118px 1fr 70px 96px 92px 96px"] {
    min-width: 720px !important;
  }
  [style*="grid-template-columns: 1fr 92px 104px 100px 92px"],
  [style*="grid-template-columns: 1fr 96px 88px 100px 92px"] {
    min-width: 700px !important;
  }
  [style*="grid-template-columns: 26px 1fr 90px 120px 62px"] {
    min-width: 640px !important;
  }
  [style*="grid-template-columns: 1fr 100px 90px 110px"] {
    min-width: 620px !important;
  }
}

/* 3e. Spans do painel --------------------------------------------------- */
/* Em Configurações, RAZÃO SOCIAL ocupa 2 das 4 colunas. Com a grade cortada
   para 2 colunas o span continua valendo e vira a linha inteira — o que
   aqui é justamente o desejado; zerado mesmo assim, para o caso de uma tela
   futura vir com span maior que o número de colunas restante. */
@media (max-width: 640px) {
  [style*="grid-template-columns: repeat(4, 1fr)"] > [style*="grid-column: span"],
  [style*="grid-template-columns: repeat(5, 1fr)"] > [style*="grid-column: span"] {
    grid-column: auto !important;
  }
}

/* ==================================================================== */
/* 4. Rede de segurança                                                  */
/* ==================================================================== */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, canvas, video { max-width: 100%; height: auto; }

  /* palavra sem espaço (SKU, e-mail, código de cupom) quebra em vez de
     furar a caixa. break-word só age em quem transbordaria e não mexe na
     largura mínima intrínseca — por isso não desmancha nenhuma grade. */
  body { overflow-wrap: break-word; }
}

/* NÃO existe aqui a regra `span[style*="white-space: nowrap"] -> normal` que
   o Even usa. Foi testada e removida: neste pacote os nowrap são rótulos de
   botão ("Novo produto") e de legenda, e soltá-los partia as palavras em
   duas linhas sem necessidade. Com as grades já desmanchadas, a medição não
   encontrou UM único elemento passando da borda por causa de nowrap — a
   regra só fazia estrago. */