/* Mobile final fit — compact, non-conflicting, and tuned for narrow phones. */
html,body,#root{width:100%;max-width:100%;min-width:0;overflow-x:hidden!important}
body{margin:0}
img,svg,video{max-width:100%}
.hero-wordmark{width:min(390px,78vw)!important;max-width:78vw!important;min-width:0!important;overflow:visible!important}
/* Keep the primary search usable. Older revisions accidentally hid it globally. */
.hero-search{display:flex!important;visibility:visible!important}
.premium-nav-actions,.premium-dietary-row,.sticky-nav{display:none!important}
.hero{min-height:0!important}
@media(max-width:700px){
  .hero{min-height:420px!important;padding:10px 8px 22px!important}
  .hero nav{gap:4px!important}
  .nav-actions{min-width:0;max-width:52vw}
  .lang-switch{min-width:72px!important;width:72px!important;font-size:11px!important;padding-inline:6px!important;white-space:nowrap}
  .hero-copy>p{max-width:100%;font-size:14px!important;line-height:1.45!important}
  .hero-wordmark{width:min(390px,78vw)!important;max-width:78vw!important}

  /* Compact premium bottom navigation: all five actions are equal UI buttons. */
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom))!important}
  .mobile-bottom-nav{
    left:10px!important;
    right:10px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    height:64px!important;
    min-height:64px!important;
    padding:5px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:4px!important;
    border-radius:18px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  .mobile-bottom-nav button,
  .mobile-bottom-nav .nav-order{
    width:auto!important;
    min-width:0!important;
    height:54px!important;
    min-height:54px!important;
    margin:0!important;
    padding:5px 3px!important;
    border-radius:13px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    position:relative!important;
    box-sizing:border-box!important;
    transform:none!important;
  }
  .mobile-bottom-nav .nav-icon,
  .mobile-bottom-nav .nav-order .nav-icon{
    width:21px!important;
    height:21px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .mobile-bottom-nav svg,
  .mobile-bottom-nav .nav-order svg{
    width:20px!important;
    height:20px!important;
  }
  .mobile-bottom-nav .nav-label{
    font-size:9px!important;
    line-height:1!important;
    font-weight:700!important;
    letter-spacing:.15px!important;
    white-space:nowrap!important;
  }
  /* My Order is highlighted, but deliberately the same compact footprint as the other buttons. */
  .mobile-bottom-nav .nav-order{
    border-radius:13px!important;
    box-shadow:none!important;
    border:1px solid rgba(255,255,255,.16)!important;
  }
  .mobile-bottom-nav .nav-order-badge{
    position:absolute!important;
    top:2px!important;
    right:7px!important;
    min-width:16px!important;
    width:auto!important;
    height:16px!important;
    padding:0 4px!important;
    border-radius:999px!important;
    font-size:8px!important;
    line-height:16px!important;
    z-index:3!important;
  }
  .mobile-bottom-nav button.active:not(.nav-order){
    border-radius:13px!important;
  }
  .mobile-bottom-nav .nav-order.active{
    transform:none!important;
  }
}
@media(max-width:360px){
  .hero{min-height:390px!important;padding-inline:7px!important}
  .hero-wordmark{width:min(330px,74vw)!important;max-width:74vw!important}
  .lang-switch{min-width:68px!important;width:68px!important}
  .menu-section{padding-inline:7px!important}
  .menu-section .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .menu-section .featured{grid-column:1/-1}
  .menu-section .card-image{height:106px!important}
  .menu-section .featured .card-image{height:145px!important}
  .menu-section .card-info h3{font-size:11px!important}
  .menu-section .price{font-size:11px!important}
  .menu-section .add{font-size:9px!important;min-height:35px!important}
  .mobile-bottom-nav{height:60px!important;min-height:60px!important;left:8px!important;right:8px!important;padding:4px!important;gap:3px!important;border-radius:16px!important}
  .mobile-bottom-nav button,.mobile-bottom-nav .nav-order{height:52px!important;min-height:52px!important;border-radius:12px!important;padding-inline:2px!important}
  .mobile-bottom-nav .nav-icon{width:19px!important;height:19px!important}
  .mobile-bottom-nav svg{width:18px!important;height:18px!important}
  .mobile-bottom-nav .nav-label{font-size:8px!important}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}