/* Identidade visual da pizzaria: logo no lugar do nome, foto de capa e filetes verde-branco-vermelho.
   Carregado depois de app.css; as cores vêm das variáveis da marca (--gold, --ink, --terra, --brand-cover...). */

.brand-logo{display:block; height:40px; width:auto; max-width:100%; object-fit:contain;}
#scr-cardapio .appbar .brand-logo{height:50px;}

/* Faixa da loja: foto do ambiente com véu escuro, selo da logo e filete tricolor da logo na base. */
.storehead{
  position:relative; overflow:hidden; isolation:isolate; min-height:92px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--ink) 90%, transparent) 0%, color-mix(in srgb, var(--ink) 62%, transparent) 55%, color-mix(in srgb, var(--ink) 38%, transparent) 100%),
    var(--brand-cover, none) center 38%/cover, var(--ink);
}
.storehead::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--pine) 0 33.3%, #F4EFE6 33.3% 66.6%, var(--wine) 66.6% 100%);
}
.storehead-badge{color:var(--terra);}
/* a logo já aparece no topo; a faixa fica com a foto do ambiente e o status da loja */
.storehead-badge.has-logo{display:none;}
.storehead{min-height:96px;}
.chips{scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}

.loginhero{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 86%, transparent), color-mix(in srgb, var(--ink) 94%, transparent)),
    var(--brand-cover, none) center/cover, var(--ink);
}
.loginhero .brand-logo{height:64px; background:#fff; border-radius:14px; padding:6px 12px; box-shadow:0 8px 22px -10px rgba(0,0,0,.55);}
body.has-logo .loginhero-badge{display:none;}

.catpills .chip.active{background:var(--gold); color:#fff;}

@media (min-width:860px){
  #scr-cardapio .appbar .brand-logo{height:62px;}
  .storehead{min-height:120px;}
}