/* Overlay for cached main.css: phone drawer + safe-area. Loaded after main.css. */
.site-header { padding-top: env(safe-area-inset-top, 0px); }
.nav-actions { margin-left: auto; }

@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
  body.admin-nav-open { overflow: hidden; }
  .admin-menu-toggle { display: inline-flex !important; }
  body.admin-body .admin-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: 100dvh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }
  body.admin-body .admin-side {
    position: fixed !important;
    z-index: 80;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(20rem, 86vw);
    max-height: none !important;
    border-right: 1px solid var(--line);
    border-bottom: 0 !important;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(1.1rem, env(safe-area-inset-bottom, 0px));
  }
  body.admin-nav-open .admin-side {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(18, 26, 23, 0.18);
  }
  body.admin-nav-open .admin-side-mask { display: block; }
  .admin-top-meta,
  .admin-top-home,
  .admin-top-points { display: none; }
  .admin-top:has(.me-role-switch) .admin-top-title { display: none; }
  .me-role-switch { margin-right: auto; flex-wrap: wrap; max-width: calc(100% - 5.5rem); }
  .me-role-switch a { padding: 0.24rem 0.38rem; font-size: 0.72rem; }
  .admin-body .tea-cart-bar { left: 0 !important; }
  .table-scroll .table { min-width: 36rem; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]),
  select,
  textarea { font-size: 16px; }
  .auth-stage {
    grid-template-columns: 1fr;
    width: min(100% - 1.5rem, 56rem);
    align-items: start;
  }
}

@media (max-width: 560px) {
  .footer-grid,
  .stats { grid-template-columns: 1fr; }
  .tea-item { flex-wrap: wrap; }
  .tea-add { width: 100%; }
  .tea-add .btn { width: 100%; justify-content: center; }
}

@media (max-width: 720px) {
  body.has-convert-bar .opc-quick-dock { display: none !important; }
  .hero-cta .btn { min-height: 3rem; }
}

@media (max-height: 700px) and (max-width: 720px) {
  .hero-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}