@media (max-width: 980px){
  .container{
    width:min(100%, calc(100% - 24px));
  }

  .hero-inner{
    grid-template-columns:1fr;
  }

  .hero-media{
    justify-content:flex-start;
  }

  .grid-3{
    grid-template-columns:1fr;
  }

  .grid-2{
    grid-template-columns:1fr;
  }

  .about{
    grid-template-columns:1fr;
  }

  .contact{
    grid-template-columns:1fr;
  }

  .order-cta{
    flex-direction:column;
    align-items:flex-start;
  }

  .contact-value{
    text-align:left;
  }

  .header-inner{
    align-items:flex-start;
    flex-wrap:wrap;
    padding:10px 0;
    position:relative;
  }

  .brand{
    width:calc(100% - 56px);
    gap:12px;
    align-items:center;
  }

  .brand-logo{
    width:56px;
    height:56px;
  }

  .brand-name{
    font-size:18px;
    line-height:1.1;
    word-break:break-word;
  }

  .brand-tagline{
    font-size:11px;
    line-height:1.2;
  }

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    padding:0;
    flex-shrink:0;
    font-size:26px;
  }

  .nav{
    display:none !important;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding-top:12px;
    margin-top:10px;
    background:#fff;
    border-top:1px solid var(--line);
  }

  .nav.open{
    display:flex !important;
  }

  .nav a,
  .nav form,
  .nav .btn,
  .nav form button{
    width:100%;
  }

  .nav a,
  .nav .btn,
  .nav form button{
    padding:12px 14px;
    border-radius:12px;
  }

  .site-footer{
    margin-top:36px;
  }

  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .order-page-shell{
    padding:18px 0 32px;
  }

  .order-page-top{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .order-page-title{
    font-size:26px;
  }

  .order-page-sub{
    font-size:14px;
  }

  .order-page-top .btn{
    width:100%;
  }

  .order-offer-card,
  .order-search-card{
    padding:12px;
    margin:12px 0;
  }
  .order-search-card{
    position: sticky;
    top: 72px;
    z-index: 30;
    background: #fff;
  }
  .order-search-card.compact{
    padding:8px 10px;
  }

  .menu-layout{
    display:block;
    margin-top:14px;
  }

  .menu-sidebar{
    position:static;
    top:auto;
    max-height:none;
    overflow:visible;
    padding:12px;
    margin-bottom:14px;
  }

  .menu-sidebar-head h2{
    margin:0 0 10px;
    font-size:18px;
  }

  .menu-category-list{
    display:flex;
    flex-direction:row;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  .menu-category-tab{
    min-width:120px;
    max-width:140px;
    width:auto;
    flex-shrink:0;
    padding:8px;
    gap:8px;
  }

  .menu-category-thumb{
    width:42px;
    height:42px;
  }

  .menu-category-name{
    font-size:13px;
    white-space:normal;
    line-height:1.15;
  }

  .menu-category-panel{
    padding:0;
  }

  .menu-category-hero{
    margin-bottom:14px;
    min-height:auto;
  }

  .menu-category-banner{
    height:140px;
  }

  .menu-category-hero-overlay{
    padding:14px;
  }

  .menu-category-hero-overlay h2{
    font-size:22px;
  }

  .menu-items-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .menu-product-image{
    height:170px;
  }

  .menu-product-body{
    padding:12px;
  }

  .menu-product-top{
    gap:8px;
  }

  .menu-product-title{
    font-size:16px;
  }

  .menu-new-price{
    font-size:16px;
  }

  .menu-product-desc{
    font-size:13px;
    min-height:auto;
  }

  .menu-product-bottom{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .menu-product-bottom form,
  .menu-product-bottom .btn{
    width:100%;
  }

  .kds-scroll{
    height:auto;
    max-height:none;
    padding-right:0;
  }

  .order-card{
    padding:16px;
  }

  .order-card h3{
    font-size:20px;
  }

  .order-items li{
    font-size:16px;
  }

  .order-actions .btn{
    width:100%;
  }

  .display-shell{
    padding:16px;
  }

  .display-logo-wrap{
    height:160px;
  }

  .display-logo-moving{
    width:120px;
    height:120px;
  }

  .display-idle-text{
    font-size:32px;
  }

  .display-idle-sub{
    font-size:18px;
  }

  .display-order-header h1{
    font-size:28px;
  }

  .display-item-row{
    padding:14px 16px;
  }

  .display-item-name{
    font-size:20px;
  }

  .display-item-meta{
    font-size:14px;
  }

  .display-item-right{
    font-size:20px;
  }

  .display-total-bar{
    font-size:22px;
    padding:14px 16px;
  }

  .display-thankyou-main{
    font-size:42px;
  }

  .display-thankyou-sub{
    font-size:18px;
  }

  .display-processing-main,
  .display-failed-main{
    font-size:38px;
  }

  .display-processing-sub,
  .display-failed-sub{
    font-size:18px;
  }
}

@media (max-width: 640px){
  .container{
    width:min(100%, calc(100% - 20px));
  }

  .brand-logo{
    width:48px;
    height:48px;
  }

  .brand-name{
    font-size:16px;
  }

  .brand-tagline{
    font-size:10px;
  }

  .hero{
    padding:28px 0 20px 0;
  }

 .hero-title{
   font-size:30px;
 }

  .hero-sub{
    font-size:15px;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-actions .btn,
  .hero-actions .btn-outline{
    width:100%;
  }

  .hero-meta{
    grid-template-columns:1fr;
  }

  .menu-category-tab{
    min-width:110px;
  }

  .menu-product-image{
    height:150px;
  }

  .image-modal-content{
    width:min(96vw, 900px);
    margin:16px auto;
  }

  .image-modal-title{
    padding:12px 14px;
    font-size:14px;
  }

  .display-idle-text{
    font-size:28px;
  }

  .display-thankyou-main{
    font-size:34px;
  }
  .menu-product-title-row{
    align-items:flex-start;
  }

  .chilli-icon{
    width:10px;
    height:10px;
  }
}