@import url('admin-mrroy-layout.css');
.mobile-nav { display: none; }
.mobile-menu {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 23px;
  align-items: center;
  justify-content: center;
}
@media (max-width: 850px) {
  .mobile-menu { display: inline-flex; }
  .mobile-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 10px 16px 18px;
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(0,0,0,.12);
  }
  .mobile-nav.open { display: grid; }
  .mobile-nav a {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    font-weight: 800;
  }
  .mobile-nav a:last-child { border-bottom: 0; }
  .mobile-nav .mobile-logout { color: var(--red); background: #fff4f4; border-radius: 10px; margin-top: 6px; }
  .mobile-nav .pwa-install { min-height:46px;width:100%;display:flex;align-items:center;padding:8px 12px;border:0;border-radius:10px;background:#fff4f4;color:var(--red);font-weight:900;text-align:left;cursor:pointer;margin-top:6px; }
  .mobile-nav .pwa-install[hidden] { display:none; }
  .nav { height: auto; min-height: 76px; padding: 5px 0 6px; gap: 8px; }
  .header .logo { width: 80px; }
  .nav-actions { gap: 6px; }
  .nav-actions .club-cta { display: inline-flex; padding: 10px 13px; min-height: 44px; font-size: 13px; border-radius: 999px; }
  .nav-actions .delivery-cta { width: 44px; min-width: 44px; height: 44px; padding: 0; font-size: 20px; border-radius: 50%; flex-shrink: 0; }
  .nav-actions .delivery-cta span { display:none; }
  .cart-button { min-height: 44px; }
  .admin-top, .section-head { flex-wrap: wrap; }
  .checkout { padding: 28px 0; }
  .panel { padding: 18px; }
  .table { min-width: 620px; }
  .loyalty-hero .points { font-size: 42px; }
  .btn, button, select, input { min-height: 44px; }
}
@media (max-width: 540px) {
  .topbar { padding: 7px 10px; font-size: 12px; }
  .nav { min-height: 72px; padding: 4px 0 5px; }
  .header .logo { width: 70px; }
  .nav-actions .club-cta { padding: 9px 11px; font-size: 12px; }
  .nav-actions .delivery-cta { width: 42px; min-width: 42px; height: 42px; padding: 0; font-size: 20px; }
  .nav-actions .cart-button { padding: 9px 11px; }
  .drawer { width: 100%; max-width: 100vw; padding: 18px 16px; }
  .drawer .cart-line { min-width: 0; align-items: flex-start; }
  .drawer .cart-line b:first-child { min-width: 0; overflow-wrap: anywhere; }
  .drawer .cart-line b:last-child { white-space: nowrap; }
  .drawer .points-estimate { min-width: 0; }
  .drawer .points-estimate small { overflow-wrap: anywhere; }
  .hero { min-height: auto; }
  .hero-grid { min-height: auto; padding: 28px 0 38px; gap: 26px; }
  .hero h1 { font-size: 32px; line-height: 1.05; margin: 10px 0; }
  .hero p { font-size: 16px; line-height: 1.45; margin: 12px 0 18px; }
  .hero .eyebrow { font-size: 12px; }
  .admin-top > div:last-child { width: 100%; }
  .admin-top > div:last-child .btn { flex: 1; }
  .loyalty-hero { padding: 20px; }
  .loyalty-hero > div:last-child { display: flex; justify-content: center; width: 100%; }
  .loyalty-hero .qr { width: min(230px, 72vw); margin: 8px auto 0; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 29px; }
  .hero-grid { padding-top: 22px; }
}