/* 1.2.18: constrain the page and restore the bottom navigation on phones. */
@media (max-width: 900px) {
  body#coop-modern:not(.coop-modern-admin) {
    width: 100%; min-width: 0; max-width: 100%; overflow-x: clip;
  }
  body#coop-modern:not(.coop-modern-admin) .modern-header-inner {
    width: 100%; min-width: 0; max-width: 100%; gap: 12px;
  }
  /* This specificity also beats the later rural-canvas position:relative rule. */
  body#coop-modern:not(.coop-modern-admin) .modern-header-inner > .modern-mobile-nav {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; max-width: 100%; min-width: 0; margin: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
    border: 0; border-top: 1px solid var(--line); border-radius: 0;
    background: #fff; z-index: 1000; box-shadow: 0 -4px 20px #23252809;
  }
  body#coop-modern:not(.coop-modern-admin) .modern-mobile-nav button {
    width: 100%; min-width: 0; min-height: 56px; padding: 6px 2px;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; font-size: 10px; line-height: 1.3;
  }
  body#coop-modern:not(.coop-modern-admin) .modern-mobile-nav button > span { max-width: 100%; }
  body#coop-modern:not(.coop-modern-admin) .modern-mobile-nav svg { width: 22px; height: 22px; }
  body#coop-modern:not(.coop-modern-admin) .modern-more-menu { margin-left: auto; }
  body#coop-modern:not(.coop-modern-admin) .modern-service-bar {
    width: 100%; min-width: 0; max-width: 100%; flex-wrap: wrap;
  }
  body#coop-modern:not(.coop-modern-admin) .modern-point-trigger,
  body#coop-modern:not(.coop-modern-admin) .modern-search-trigger {
    width: 100%; min-width: 0; max-width: 100%; flex: 1 1 100%;
  }
  body#coop-modern:not(.coop-modern-admin) .modern-point-trigger > span:first-of-type {
    min-width: 0; flex: 1 1 auto;
  }
  body#coop-modern:not(.coop-modern-admin) .modern-point-trigger strong {
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body#coop-modern:not(.coop-modern-admin) .modern-point-trigger .modern-change {
    flex: 0 0 auto; margin-left: auto;
  }
  body#coop-modern:not(.coop-modern-admin) .modern-search-trigger > span {
    min-width: 0; white-space: normal; overflow-wrap: anywhere;
  }
  body#coop-modern:not(.coop-modern-admin) .screen {
    width: 100% !important; min-width: 0; max-width: 100% !important;
  }
  body#coop-modern:not(.coop-modern-admin) .app-header,
  body#coop-modern:not(.coop-modern-admin) .header-row,
  body#coop-modern:not(.coop-modern-admin) .header-title-block,
  body#coop-modern:not(.coop-modern-admin) .top-tabs,
  body#coop-modern:not(.coop-modern-admin) .categories-grid,
  body#coop-modern:not(.coop-modern-admin) .products-container {
    min-width: 0; max-width: 100%;
  }
  body#coop-modern:not(.coop-modern-admin) .app-header,
  body#coop-modern:not(.coop-modern-admin) .top-tabs,
  body#coop-modern:not(.coop-modern-admin) .categories-grid,
  body#coop-modern:not(.coop-modern-admin) .products-container { width: 100%; }
  body#coop-modern:not(.coop-modern-admin) .top-tabs {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  }
  body#coop-modern:not(.coop-modern-admin) .header-row { flex-wrap: wrap; }
  body#coop-modern:not(.coop-modern-admin) .header-title {
    max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  }
  body#coop-modern:not(.coop-modern-admin) .modern-main-interface {
    max-width: 100%; white-space: normal;
  }
  body#coop-modern:not(.coop-modern-admin) .category-card h3,
  body#coop-modern:not(.coop-modern-admin) .modern-product-card .product-name,
  body#coop-modern:not(.coop-modern-admin) .modern-farmer-profile h2 {
    overflow-wrap: anywhere;
  }
  body#coop-modern:not(.coop-modern-admin) .modern-farmer-profile,
  body#coop-modern:not(.coop-modern-admin) .profile-container,
  body#coop-modern:not(.coop-modern-admin) .orders-container,
  body#coop-modern:not(.coop-modern-admin) .cart-container,
  body#coop-modern:not(.coop-modern-admin) .pd-container { min-width: 0; max-width: 100%; }
  body#coop-modern:not(.coop-modern-admin) .modern-repeat-tabs { flex-wrap: wrap; }
}