@media (max-width: 860px) {
  html.maaboza-mobile-app {
    --maaboza-safe-top: max(12px, env(safe-area-inset-top));
    --maaboza-safe-bottom: max(12px, env(safe-area-inset-bottom));
    background: #f6efe7;
  }

  html.maaboza-mobile-app body {
    min-height: calc(var(--maaboza-app-vh, 1vh) * 100);
    overscroll-behavior-y: none;
    background:
      radial-gradient(circle at top center, rgba(255, 201, 144, 0.18), transparent 28%),
      linear-gradient(180deg, #fffaf3 0%, #f7efe6 100%);
  }

  html.maaboza-mobile-app body.has-mobile-dock main {
    padding-bottom: calc(116px + env(safe-area-inset-bottom));
  }

  html.maaboza-mobile-app .site-header {
    top: var(--maaboza-safe-top);
  }

  html.maaboza-mobile-app .site-nav {
    max-height: calc((var(--maaboza-app-vh, 1vh) * 100) - 120px);
    overflow-y: auto;
  }

  html.maaboza-mobile-app .container {
    width: min(calc(100% - 22px), var(--max-width));
  }

  html.maaboza-mobile-app .hero,
  html.maaboza-mobile-app .page-hero,
  html.maaboza-mobile-app .section {
    scroll-margin-top: calc(var(--header-height) + 24px);
  }

  html.maaboza-mobile-app .mobile-dock {
    bottom: var(--maaboza-safe-bottom);
  }

  html.maaboza-mobile-app .mobile-dock-link,
  html.maaboza-mobile-app .btn,
  html.maaboza-mobile-app button,
  html.maaboza-mobile-app a {
    touch-action: manipulation;
  }

  html.maaboza-mobile-app :is(.menu-card, .package-card, .category-card, .service-hero-card, .form-card, .summary-card, .cart-panel, .notice-card) {
    box-shadow: var(--shadow-sm);
  }

  html.maaboza-mobile-app input,
  html.maaboza-mobile-app select,
  html.maaboza-mobile-app textarea {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  html.maaboza-mobile-app .mobile-dock {
    left: 10px;
    right: 10px;
  }
}