/* =====================
   Menu バリアントB: menu--grid
   3列固定グリッド（横スクロールなし）
===================== */
.menu--grid .menu-scroll-wrapper {
  overflow: visible;
}

.menu--grid .menu-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  flex-wrap: unset;
}

.menu--grid .menu-card {
  flex: none;
  width: 100%;
}

/* 768px以下は1列固定。2列だと商品数が偶数でない限り最後の行が片側だけ埋まって
   空白が目立つため（テスト案件のパン工房むぎで発覚、2026-09-20）、商品数に関わらず
   余りが出ない1列に統一する */
@media (max-width: 768px) {
  .menu--grid .menu-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .menu--grid .menu-card {
    flex: none;
  }
}