@media (max-width: 767px) {
  body {
    padding-bottom: calc(76px + max(10px, env(safe-area-inset-bottom)));
  }

  .mobile-action-bar {
    left: 12px;
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
    max-width: calc(100vw - 24px);
    margin-inline: auto;
  }

  .mobile-action-bar a,
  .mobile-action-bar button {
    border-radius: 14px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  }

  .mobile-action-bar a:active,
  .mobile-action-bar button:active {
    transform: scale(0.93);
  }

  .mobile-action-bar svg {
    display: block;
    width: 26px;
    height: 26px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-action-bar a.active {
    color: #a13f29;
    background: rgba(161, 63, 41, 0.1);
  }

  .mobile-action-bar a.active svg {
    stroke-width: 2.2;
  }

  .mobile-search-sheet.open {
    animation: searchFadeIn 0.2s ease both;
  }

  .mobile-search-sheet.open .mobile-search-card {
    animation: searchSlideUp 0.28s cubic-bezier(.22,.8,.25,1) both;
  }
}

@keyframes searchFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes searchSlideUp {
  from { transform: translateY(28px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}