/* Cabeçalho em 2 estados.
   No topo da página: logo no centro, carrinho à direita, busca grande embaixo e categorias.
   Rolando para baixo (classe .compacto, posta pelo cabecalho.js): uma linha só,
   logo à esquerda, busca no meio, carrinho à direita. Sobra mais tela para os produtos. */
.top-row{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;grid-template-areas:"vazio marca carrinho" "busca busca busca";align-items:center;column-gap:12px;row-gap:12px;padding:14px 16px 12px}
.top-row .brand{grid-area:marca;flex:none;justify-self:center;justify-content:center;max-width:100%}
.top-row .cart-btn{grid-area:carrinho}
.top-row .search-row{grid-area:busca;padding:0;margin:0;max-width:none;width:100%;min-width:0}
.top-row .brand-text{align-items:center;text-align:center}

/* Celular: com logo, ela sozinha no centro (o nome fica apertado ao lado) */
@media(max-width:599px){.top-row .brand-logo:not([hidden]) + .brand-text{display:none}}

/* Estado compacto */
.top.compacto .top-row{grid-template-columns:auto minmax(0,1fr) 46px;grid-template-areas:"marca busca carrinho";padding-top:8px;padding-bottom:8px;animation:cab-entra .22s var(--ease)}
.top.compacto .brand{justify-self:start;justify-content:flex-start;max-width:30vw}
.top.compacto .brand-text{align-items:flex-start;text-align:left}
.top.compacto .brand-logo{height:40px;min-width:40px;max-width:min(120px,26vw);border-radius:10px;padding:3px}
.top.compacto .brand-logo.clear{height:42px;max-width:min(130px,28vw);padding:0;border-radius:0}
.top.compacto .brand-logo:not([hidden]) + .brand-text{display:none}
.top.compacto .brand-text strong{font-size:18px}
.top.compacto .brand-text small{display:none}
.top.compacto .search{height:44px}
.top.compacto .chips{display:none}
@keyframes cab-entra{from{opacity:.6}to{opacity:1}}

@media(min-width:960px){
  .top-row{padding:18px 24px 14px;row-gap:14px}
  .top.compacto .top-row{padding-top:10px;padding-bottom:10px;column-gap:24px}
  .top.compacto .brand{max-width:260px}
  .top.compacto .brand-logo{height:44px;max-width:170px}
  .top.compacto .brand-logo.clear{height:48px;max-width:190px}
  .top.compacto .search{height:46px}
}