/* ============================================================
   RESPONSIVO
   Media queries da base. O que veio depois mora em refinamentos.css.
   ============================================================ */

@media (max-width:1240px){
  .social{display:none}
}
@media (max-width:1140px){
  .hsearch{display:none}
}
@media (max-width:1080px){
  .hero .wrap>.gridtop{grid-template-columns:1fr}
  .listwrap{grid-template-columns:1fr;gap:24px}
  .facets{position:static;flex-direction:row;flex-wrap:wrap;gap:26px}
  .fg{min-width:180px}
  .sheet{grid-template-columns:1fr}
  /* A margem lateral da .wrap volta. .listwrap, .sheet e .nores
     declaram `padding:… 0 …` no paginas.css e, sendo a mesma
     caixa da .wrap, ZERAM a lateral dela: a listagem e a ficha
     encostavam na borda da tela, enquanto a migalha logo acima
     ficava no lugar. Na tela larga não aparece — a caixa é
     centrada e sobra folga dos dois lados —, e por isso o
     conserto fica só aqui, onde a página já virou uma coluna. */
  .listwrap,.sheet,.nores{padding-left:var(--px);padding-right:var(--px)}
  .cbgrid{grid-template-columns:1fr}
  .cathero .wrap{grid-template-columns:1fr;gap:26px}
}
@media (max-width:860px){
  nav.main{display:none}
  .fcols{grid-template-columns:1fr 1fr}
  .prow{grid-template-columns:minmax(0,1fr);gap:14px}
  .prow .thumb{display:none}
  /* Código numa linha, nome da peça na de baixo. Lado a lado, na
     largura do celular, o nome começava colado no fim do código e
     quebrava no meio — "TK 1000 + Kit Eixo 9045Tomada de força". */
  .prow .code,.prow .nm{display:block}
  .prow .act{flex-direction:row;grid-column:1/-1}
  .prow .act .btn{flex:1;justify-content:center}
  .mobile-bar{display:block}
  body{padding-bottom:56px}
}
@media (max-width:560px){.fcols{grid-template-columns:1fr}}