/* Подсказка «Скачайте приложение» над шапкой (js/appbar.js): только на телефонах */
.appbar { display: none; }
@media (max-width: 800px) {
  .appbar {
    display: flex; align-items: center; gap: 8px; position: absolute; top: 0; left: 0; right: 0; z-index: 101; height: var(--appbar-h, 58px); box-sizing: border-box;
    padding: 0 10px 0 2px; background: #fff; border-bottom: 1px solid var(--border); transition: opacity .25s ease, transform .25s ease;
  }
  .appbar.is-out { opacity: 0; transform: translateY(-100%); }
  .appbar__x { display: flex; flex: 0 0 auto; width: 32px; height: 44px; align-items: center; justify-content: center; border: 0; background: none; color: var(--ink-soft); font-size: 20px; -webkit-tap-highlight-color: transparent; }
  .appbar__x i { display: flex; }
  .appbar__ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #fff; border: 1px solid var(--border); box-sizing: border-box; }
  .appbar__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .appbar__txt b { font-size: .74rem; font-weight: 600; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .appbar__txt small { font-size: .66rem; font-weight: 300; color: var(--ink-soft); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .appbar__go { flex: 0 0 auto; padding: 9px 14px; border-radius: 100px; background: var(--green); color: #fff; font-size: .74rem; font-weight: 500; -webkit-tap-highlight-color: transparent; }
  .appbar__go:active { transform: scale(.96); }

  /* пока баннер на месте он стоит в потоке, а шапка «липкая» (sticky): прокрутку ведёт браузер, а не скрипт, поэтому шапка не дёргается
     (раньше её положение пересчитывал JS при каждом scroll и она отставала на кадр, особенно на iPhone при возврате наверх) */
  html.has-appbar .appbar { position: relative; overflow: hidden; }
  html.has-appbar .appbar.is-out { height: 0; border-bottom-width: 0; opacity: 0; transform: none; transition: height .25s ease, opacity .2s ease, border-width .25s ease; }
  html.has-appbar body { overflow-x: visible; }   /* overflow-x: hidden на body делает его контейнером прокрутки, и sticky перестаёт прилипать к окну; от бокового сдвига защищает html */
  html.has-appbar .header { position: sticky; top: 0; }
  html.has-appbar .shop { padding-top: 14px; }   /* шапка теперь в потоке и сама занимает своё место */
  html.has-appbar .mmenu { top: calc(var(--header-h) + var(--appbar-off, 0px)); }
}
@supports (height: 100dvh) { @media (max-width: 800px) { html.has-appbar .mmenu { height: calc(100dvh - var(--header-h) - var(--appbar-off, 0px)); } } }
@media (max-width: 340px) { .appbar__txt small { display: none; } }