/**
 * 1:1 z main.min.css (static.biedronka.pl) — selektory #dashboard-new .menu-main-mobile …
 * Jedyna zmiana: logo → ../../images/logo_2026_mobile.webp (lokalnie).
 * Postęp ankiety: cieńszy pasek na końcu pliku.
 */
@media (max-width: 989px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  /* На мобильном иногда появляется 1-2px горизонтального overflow из-за full-width блоков и subpixel rounding */
  #dashboard-new,
  #head,
  #container {
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  #container .baner-homeBiedronkPl.bied-quiz-sklep-strip {
    overflow: hidden;
  }

  /* stable mobile header (approved): keep geometry close to main.min */
  #dashboard-new .menu-main-mobile .mobile-nav-bar {
    display: flex !important;
    padding: 2.8vw 4.4vw !important;
    padding-left: max(4.4vw, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(4.4vw, env(safe-area-inset-right, 0px)) !important;
    justify-content: space-between !important;
    align-items: center !important;
    align-self: stretch !important;
    background: #fff !important;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.5) !important;
  }

  /* Dokładnie jak w main.min (bez flex:1 na link-icon — tam go nie ma) */
  #dashboard-new .menu-main-mobile .link-icon {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-around !important;
  }

  #dashboard-new .menu-main-mobile .link-icon > a {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ta sama specyficzność co .link-icon img.icon w CSS z www — inaczej width:33px wygrywa nad samym .icon */
  #dashboard-new .menu-main-mobile .link-icon img.icon,
  #dashboard-new .menu-main-mobile .icon {
    width: 8vw !important;
    aspect-ratio: 29 / 30 !important;
    margin: 0 6.7vw !important;
    object-fit: contain !important;
    display: block !important;
    max-width: 36px !important;
    height: auto !important;
  }

  /* ico_sklepy ma naturalnie 50x60 (węższy od pozostałych 58x60), lekko poszerzamy by optycznie zrównać */
  #dashboard-new .menu-main-mobile .link-icon img.icon[src*="ico_sklepy"] {
    width: 9.28vw !important;
    max-width: 41px !important;
  }

  #dashboard-new .menu-main-mobile .logo-biedronka-sygnet {
    width: 8vw !important;
    aspect-ratio: 29 / 40 !important;
    max-width: 36px !important;
    min-width: 26px !important;
    background: url("../../images/logo_2026_mobile.webp") no-repeat center !important;
    background-size: 100% !important;
    flex-shrink: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  #dashboard-new .menu-main-mobile .menu-default {
    display: flex !important;
    padding: 2.1vw 1.94vw !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50% !important;
    background: #eb212e !important;
    flex-shrink: 0 !important;
  }

  #dashboard-new .menu-main-mobile .hamburger-dashboard {
    display: flex !important;
    width: 4.44vw !important;
    max-width: 22px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.83vw !important;
    flex-shrink: 0 !important;
  }

  #dashboard-new .menu-main-mobile .hamburger-dashboard span {
    height: 0.83vw !important;
    max-height: 4px !important;
    align-self: stretch !important;
    border-radius: 99px !important;
    background: #fff !important;
  }

  /* Strip: layout w biedronka-app.css (main.min); tu tylko gdyby remote CSS nadpisywał display */
  #container .baner-homeBiedronkPl.visible-mobile.bied-quiz-sklep-strip {
    display: block !important;
  }
}

@media (min-width: 990px) {
  #container .baner-homeBiedronkPl.bied-quiz-sklep-strip {
    display: none !important;
  }
}

#quizPageInner .quiz-progress-wrap {
  height: 4px !important;
  background: #e4e6e8 !important;
  box-shadow: none !important;
}

#quizPageInner .quiz-progress-bar {
  min-height: 4px !important;
}