/* ===========================================================================
   A marca no telemovel e no tablet.
   1) O menu lateral (tres barras) mostrava "BLACKLIST" escrito a letra, em vez
      do logotipo da casa.
   2) Na capa o logotipo aparecia grande, no meio, por cima do menu
      DISCOVER / CATALOG. Passa para o canto superior esquerdo, pequeno.
   Só mexe em <=1024px; no computador fica tudo como estava.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   FORA: o "BLACKLIST" escrito a letra no canto superior esquerdo.
   Nao e o logotipo da casa — e texto na fonte Permanent Marker (#logoTxt),
   que o site punha por cima da capa. Fica so o logotipo oficial (img.logo).
   --------------------------------------------------------------------------- */
#logoTxt{font-size:0 !important;line-height:0 !important;color:transparent !important}
#logoTxt img.blp-marca-txt{
  display:block;width:auto;height:46px;max-width:238px;object-fit:contain;object-position:left center;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))
}
@media (max-width:1024px){ #logoTxt img.blp-marca-txt{height:34px;max-width:168px} }
@media (max-width:420px){ #logoTxt img.blp-marca-txt{height:30px;max-width:148px} }

@media (max-width: 1024px) {

  /* ---- 1. cabecalho do menu lateral: logotipo em vez do texto -----------
     A imagem e colocada pelo blp-marca.js (o endereco do logotipo leva um
     bilhete que muda a cada visita; em CSS fixo o servidor devolve 429).
     O texto "BLACKLIST" so e escondido depois de a imagem estar la. */
  #mobDrawer .mob-drawer-h img.blp-marca-mm {
    display: block;
    width: 158px;
    height: auto;
    max-height: 38px;
    object-fit: contain;
    object-position: left center;
    margin: 0;
  }

  /* ---- 2. capa: logotipo pequeno e discreto no canto superior esquerdo --
     O site trava este logotipo no meio do painel com regras !important
     (#capa:not(.entered) .logo { position:static!important } e
     #capa.blp-logo-meio .mob-menu-panel > img.logo { margin:0 auto }),
     por isso aqui a pontaria tem de ser mais fina do que a delas. */
  html body #capa .mob-menu-panel > img.logo.logo,
  html body #capa.blp-logo-meio .mob-menu-panel > img.logo.logo {
    position: fixed !important;
    top: 14px !important;
    left: 16px !important;
    right: auto !important;
    bottom: auto !important;
    width: 124px !important;
    max-width: 124px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    order: -1 !important;
    flex: 0 0 auto !important;
    z-index: 9 !important;
    opacity: .92;
    pointer-events: none;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .65));
  }
  /* o painel deixa de guardar espaco para ele */
  html body #capa .mob-menu-panel { padding-top: 0 !important }

  /* com o menu lateral aberto o logotipo da capa sai da frente */
  html body.mob-drawer-open #capa .mob-menu-panel > img.logo.logo,
  html body.menu-open #capa .mob-menu-panel > img.logo.logo { opacity: 0 !important }
}

@media (max-width: 420px) {
  html body #capa .mob-menu-panel > img.logo.logo,
  html body #capa.blp-logo-meio .mob-menu-panel > img.logo.logo {
    width: 104px !important; max-width: 104px !important; top: 12px !important; left: 14px !important }
  #mobDrawer .mob-drawer-h img.blp-marca-mm { width: 138px; max-height: 32px }
}