/* =============================================================================
   Gamers Escape — the menu list row, shared by index.html and menu.html.
   -----------------------------------------------------------------------------
   These classes existed twice, as two independent implementations kept in sync
   by hand (index.html and menu.html), which had already drifted: 64px vs 66px
   thumbnails, auto-fit vs auto-fill grids, different sub-heading sizes.

   PROMOTED, NOT RENAMED. Four JS template functions emit this markup, the
   detail-popup click delegation matches `.mitem,.pick` and reads `img.mthumb`,
   and twelve rules in site-mobile.css target these names — renaming them means
   touching all of that at once for no user-visible gain.

   Loaded by index.html and menu.html only. Each page keeps its genuine
   differences as a small override AFTER this file.
   ============================================================================= */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.menu-subhead {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin: 18px 2px 4px;
  font-family: 'Russo One';
  color: var(--cyan);
  font-size: 1.1rem;
}
.menu-subhead::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(34,211,238,.4), transparent);
}

.mitem {
  display: flex; gap: 14px; align-items: center;
  padding: 12px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--panel-brd);
  transition: all .2s;
}
.mitem:hover {
  border-color: rgba(34,211,238,.45);
  background: rgba(34,211,238,.05);
  transform: translateY(-2px);
}

.mthumb {
  width: 66px; height: 66px; border-radius: 11px;
  object-fit: cover; flex: 0 0 auto;
  border: 1px solid var(--panel-brd);
}
.mthumb.ph {
  display: grid; place-items: center;
  font-family: 'Russo One'; color: #fff; font-size: 1.4rem;
  background: linear-gradient(135deg, var(--purple), var(--pink));
}

.mbody { flex: 1; min-width: 0; }
.mn { font-weight: 600; display: block; }
.md { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; line-height: 1.35; }
.mp {
  font-family: 'Russo One'; color: var(--cyan);
  white-space: nowrap; font-size: 1rem;
  flex: 0 0 auto; align-self: center;
}

.mitem.soldout { opacity: .5; }
.soldtag {
  display: inline-block; margin-left: 8px;
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 20px;
  background: rgba(244,63,94,.2); color: #ff8fa3; border: 1px solid rgba(244,63,94,.4);
  vertical-align: middle;
}

/* `hidden` is only display:none in the UA sheet (0,0,1), so .md above beat it
   and the description a "Most ordered" card carries purely for the popup was
   rendering on the card. */
[hidden] { display: none !important; }