/* Denos menu: bottom bar shows only panel categories with their images, and the page grows with the screen. */
:root{--frame:460px;--bar-h:104px}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
.phone{width:min(100%,var(--frame));padding-bottom:calc(var(--bar-h) + 12px)}
img{max-width:100%}

/* Bottom category bar */
.categories{width:min(100%,var(--frame));height:auto;min-height:0;max-height:none;padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:6px;justify-content:flex-start;align-items:stretch;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;box-shadow:0 -6px 18px #392d2b14}
.categories[hidden]{display:none!important}
.cat{flex:0 0 auto;width:76px;max-width:none;min-width:0;padding:2px 2px 0;justify-content:flex-start;gap:6px;scroll-snap-align:center;border-radius:14px;-webkit-tap-highlight-color:transparent}
/* Auto margins centre a short list but still let a long list scroll from its first item. */
.cat:first-child{margin-left:auto}.cat:last-child{margin-right:auto}
.cat:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.catIcon{flex:none;width:50px;height:50px;padding:0;overflow:hidden;background:#fff;border:2px solid #eadfd3;box-shadow:0 3px 8px #392d2b1a;transition:border-color .18s,box-shadow .18s,transform .18s}
.catIcon img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.catFallback{font-size:22px;line-height:1;font-weight:800;color:var(--red)}
.cat .catName{flex:none;display:-webkit-box;max-height:2.5em;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center;font:700 10px/1.25 Inter,Arial,sans-serif;overflow-wrap:anywhere;color:#776e67}
.cat.active .catIcon{border-color:var(--red);box-shadow:0 0 0 3px #fff3e4,0 4px 10px #b52d3533;transform:translateY(-2px)}
.cat.active .catName{color:var(--red)}
.toast{bottom:calc(var(--bar-h) + 12px)}

/* Section title never collides with long category names */
.section{min-width:0}.sectionTitle h2{font-size:clamp(18px,5.4vw,24px);line-height:1.2}

/* Very narrow phones */
@media (max-width:360px){
  .menu{padding-left:10px;padding-right:10px}
  .grid{gap:10px 8px}
  .card img{height:118px}
  .details{padding:8px 8px 10px}.details h3{font-size:12px;min-height:30px}
  .card-bottom{padding:0 8px 10px}
  .cat{width:66px}.catIcon{width:44px;height:44px}
  .top .language-select{width:92px}
}

/* Tablets */
@media (min-width:768px){
  :root{--frame:760px}
  body{padding:24px 0}
  .phone{width:min(100% - 48px,var(--frame))}
  .categories{width:min(100% - 48px,var(--frame));bottom:24px;border-radius:0 0 28px 28px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px}
  .card img{height:clamp(170px,22vw,210px)}
  .details h3{font-size:15px}
  .menu{padding:30px 26px 34px}
  .cat{width:88px}.catIcon{width:56px;height:56px}.cat .catName{font-size:11px}
  .info .pill{font-size:12px}
}

/* Desktops */
@media (min-width:1100px){
  :root{--frame:1040px}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .card{transition:transform .18s,box-shadow .18s}
  .card:hover{transform:translateY(-3px);box-shadow:0 10px 24px #392d2b24}
  .cat:hover .catIcon{border-color:var(--red)}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}