/* ============================================================
   AJUSTE VISUAL MOBILE — MULTIGIRO
   mobile-ajuste-mrcd-v1.css — 25/09/2026  (hotfix sobreposicao)

   1. Mascote + wordmark MULTIGIRO visiveis no header mobile
      SEM margens negativas — usa object-fit:cover para recortar
      o padding transparente da imagem e mostrar so o mascote.
   2. Aumentar botao "Canal de ofertas" no menu inferior mobile

   Carrega DEPOIS de home-mrcd-v36.css e bottomNav-mrcd-v12.css
   para sobrescrever com maior especificidade via !important.

   Desktop inalterado — todas as regras dentro de media queries
   ou aplicadas a componentes exclusivamente mobile.
   ============================================================ */

/* ==========================================================
   1. MASCOTE + WORDMARK NO HEADER MOBILE
   A imagem logo-mascote.webp (160x107 natural) tem ~45% de
   padding transparente horizontal. Em vez de margens negativas
   (que causavam sobreposicao), usamos object-fit:cover com
   aspect-ratio fixo para recortar o excesso e mostrar so o
   mascote real, ocupando apenas seu espaco de layout.
   ========================================================== */

/* 431px–520px — tablet estreito / phone grande
   Mascote visivel: ~44px efetivo */
@media (max-width: 520px) {
  .brand__mascot {
    width: 48px !important;
    min-width: 48px !important;
    height: 44px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
  }
  .brand__wordmark {
    width: 88px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .brand {
    flex-shrink: 0 !important;
    overflow: visible !important;
  }
}

/* 381px–430px — phones padrao (390, 393, 412, 430)
   Mascote visivel: ~40px | Wordmark: ~76px */
@media (max-width: 430px) {
  .brand__mascot {
    width: 44px !important;
    min-width: 44px !important;
    height: 40px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  .brand__wordmark {
    width: 76px !important;
    min-width: 50px !important;
    flex-shrink: 1 !important;
  }
  .brand {
    gap: 4px !important;
    max-width: 130px !important;
  }
  .actions {
    gap: 2px !important;
    flex-shrink: 1 !important;
  }
  .actions .btn {
    padding: 6px 4px !important;
    font-size: 12px !important;
  }
}

/* 321px–380px — phones pequenos (360, 375)
   Mascote visivel: ~36px | Wordmark: ~58px
   Header em duas linhas para garantir que nada sobrepoe */
@media (max-width: 380px) {
  .header__inner {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "actions"
      "search" !important;
    gap: 4px !important;
    text-align: center !important;
  }
  .brand {
    justify-content: center !important;
    gap: 6px !important;
    max-width: none !important;
  }
  .brand__mascot {
    width: 42px !important;
    min-width: 42px !important;
    height: 38px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  .brand__wordmark {
    width: 72px !important;
    min-width: 50px !important;
    display: block !important;
  }
  .actions {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .actions .btn {
    padding: 5px 6px !important;
    font-size: 11px !important;
  }
  .header-orders-label {
    font-size: 10px !important;
  }
}

/* <=320px — telas muito pequenas
   Mascote visivel: ~32px | Wordmark: ~62px
   Tudo em duas linhas, bem compacto */
@media (max-width: 320px) {
  .brand__mascot {
    width: 38px !important;
    min-width: 38px !important;
    height: 34px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  .brand {
    gap: 4px !important;
    justify-content: center !important;
  }
  .brand__wordmark {
    width: 62px !important;
    min-width: 44px !important;
    display: block !important;
  }
  .actions .btn {
    padding: 4px 4px !important;
    font-size: 10px !important;
  }
  .actions {
    gap: 3px !important;
  }
  .btn--offer__pct {
    min-width: 14px !important;
    height: 16px !important;
    font-size: 10px !important;
    padding: 0 2px !important;
  }
  .header-orders-label {
    max-width: 50px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    font-size: 9px !important;
  }
}


/* ==========================================================
   2. BOTAO "CANAL DE OFERTAS" — MENU INFERIOR
   O bottom-nav e exclusivamente mobile, nao precisa de
   media query (desktop nao renderiza o componente).
   ========================================================== */

/* Circulo verde: 46px -> 66px (DESTAQUE principal, maior que IG e WPP) */
.mg-bottomnav__canal-ico {
  width: 66px !important;
  height: 66px !important;
  margin-top: -40px !important;
  border-width: 3px !important;
  box-shadow:
    0 4px 18px rgba(37, 211, 102, 0.5),
    0 0 24px rgba(37, 211, 102, 0.3),
    0 0 8px rgba(32, 189, 90, 0.2) !important;
}

/* Icone SVG interno: 26px -> 34px */
.mg-bottomnav__canal-ico svg {
  width: 34px !important;
  height: 34px !important;
}

/* Texto "Canal de ofertas": 10px -> 11px */
.mg-bottomnav__btn--canal small {
  font-size: 11px !important;
  line-height: 1.1 !important;
}