/* RiCO! web menu: the side-by-side layout for computers (900px and up) and tablets (700px and up,
   at least 500px tall, so phones turned sideways keep the phone layout). Loaded with a media
   attribute so phones never block on it; menu.js uses the same query. */
/* ---------- Full-width layout with a sticky order panel ---------- */
@media (min-width:900px),(min-width:700px) and (min-height:500px){
  .app{max-width:none;border:0;background:transparent}
  .app--narrow{max-width:var(--col);background:#fff;border-left:2px solid var(--green-800);border-right:2px solid var(--green-800)}
  .band{display:block;position:fixed;z-index:0;pointer-events:none;width:38vw;height:11vh;max-height:120px}
  .band::before,.band::after{content:"";position:absolute;inset:0}
  .band--tl{left:-3vw;top:0}
  .band--tl::before{background:var(--green-300);clip-path:polygon(0 0,100% 0,0 100%)}
  .band--tl::after{width:74%;height:66%;background:var(--green-800);clip-path:polygon(0 0,100% 0,0 100%)}
  .band--br{right:-3vw;bottom:0}
  .band--br::before{background:var(--green-300);clip-path:polygon(100% 100%,100% 0,0 100%)}
  .band--br::after{left:auto;top:auto;width:74%;height:66%;background:var(--green-800);clip-path:polygon(100% 100%,100% 0,0 100%)}
  .hdr__in{max-width:var(--wide);margin:0 auto;padding:14px 32px;gap:16px}
  .hdr__wordmark{height:40px;flex:0 1 200px}
  .hdr__title{display:none}
  .hdr__spacer{flex:1}
  .hdr__nav{display:flex;gap:8px;align-items:center}
  .layout{max-width:var(--wide);margin:0 auto;padding:24px 32px 48px;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start}
  .layout__main{min-width:0}
  .layout__main .screen{padding:0}
  .hero{gap:24px;padding:12px 0 8px}
  .hero .pop{font-size:64px}
  .hero__tag{font-size:24px;margin-top:10px}
  .hero__logo{width:160px;height:160px}
  .pills{font-size:14px}
  .tabs{max-width:360px}
  .items{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .item{align-items:flex-start}
  .item__img{width:112px;height:112px}
  .cat-title{font-size:30px}
  /* A tall order (form, calendar and totals) scrolls inside the panel instead of hiding below the screen. */
  .side{display:block;position:sticky;top:96px;max-height:calc(100vh - 112px);max-height:calc(100dvh - 112px);overflow-y:auto;overscroll-behavior:contain;margin-right:-8px;padding:0 8px 8px 4px;scrollbar-width:thin;scrollbar-color:var(--green-300) transparent}
  .side__title{margin:0 0 14px;font-family:var(--font-poster);font-weight:400;font-size:30px;letter-spacing:.03em;text-transform:uppercase;line-height:1;text-shadow:var(--shadow-pop-sm)}
  .side .screen{padding:0;gap:16px}
  .side .bar{position:static;padding:0;border:0;background:transparent;margin:0;max-width:none}
  .faq{max-width:var(--wide);margin:0 auto;padding:0 32px 48px}
  .faq__title{font-size:32px;margin-bottom:16px}
  .faq__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;align-items:start}
  .faq__item{margin:0}
  .site-foot{padding:28px 32px 36px}
  .site-foot__in{max-width:var(--wide);margin:0 auto}
  .toast-wrap{bottom:40px}
  .scrim--modal{place-items:start center;overflow:auto;padding:48px 24px}
  .modal{position:relative;width:100%;max-width:820px;background:var(--white);border:3px solid var(--green-800);border-radius:var(--radius-xl);box-shadow:var(--shadow-pop-lg)}
  .modal__close{position:absolute;top:14px;right:14px;z-index:2}
  .modal .screen--item{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px 28px;padding:28px;align-items:start}
  .modal .photo{height:300px}
  .modal .photo>img{height:260px}
  .modal .bar{grid-column:1/-1;position:static;padding:0;border:0;margin:0;max-width:none}
  .modal .pop--poster{font-size:40px}
}
/* ---------- Upright tablets (700 to 899px): the same layout, a little tighter ---------- */
@media (min-width:700px) and (max-width:899px) and (min-height:500px){
  .band{display:none}
  .hdr__in{padding:12px 24px;gap:12px}
  .hdr__wordmark{height:36px;flex:0 1 170px}
  .layout{grid-template-columns:minmax(0,1fr) 316px;gap:20px;padding:20px 24px 40px}
  .side{top:84px;max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px)}
  .side__title{font-size:26px;margin-bottom:12px}
  .hero{gap:16px}
  .hero .pop{font-size:clamp(40px,5.6vw,48px)}
  .hero__tag{font-size:21px;margin-top:8px}
  .hero__logo{width:clamp(96px,13vw,118px);height:clamp(96px,13vw,118px)}
  .tabs{max-width:none}
  .items{grid-template-columns:minmax(0,1fr);gap:12px}
  .item{align-items:center}
  .item__img{width:104px;height:104px}
  .cat-title{font-size:28px}
  .faq,.areas{padding-left:24px;padding-right:24px}
  .faq__title,.areas__title{font-size:28px}
  .site-foot{padding:24px 24px 32px}
  .scrim--modal{padding:28px 16px}
  .modal .screen--item{grid-template-columns:236px minmax(0,1fr);gap:18px 22px;padding:22px}
  .modal .photo{height:236px}
  .modal .photo>img{height:204px}
  .modal .pop--poster{font-size:34px}
  .areas__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- iPads on their side and small laptops (900 to 1199px): cards with the photo on top ---------- */
@media (min-width:900px) and (max-width:1199px){
  .layout{grid-template-columns:minmax(0,1fr) 360px;gap:24px;padding:24px 28px 44px}
  .item{flex-direction:column;align-items:stretch;gap:10px}
  .item__img{width:100%;height:132px}
  .areas__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1200px){
  .items{grid-template-columns:repeat(3,minmax(0,1fr))}
  .item{flex-direction:column;align-items:stretch;gap:10px}
  .item__img{width:100%;height:150px}

  /* Delivery map dialog: map beside the searchable list */
  .mapdlg__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
  .tmap{aspect-ratio:4/5;max-height:none}
  .zlist{max-height:300px}
  .slots{grid-template-columns:repeat(5,1fr)}
  .areas{max-width:var(--wide);margin:0 auto;padding:0 32px 48px}
  .areas__title{font-size:32px}
  .areas__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .rider{height:330px}
  .rider__bike{width:280px}
}