.food-gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 0;
  scroll-snap-type: x mandatory;
}

.food-gallery figure {
  flex: 0 0 min(90%, 290px);
  margin: 0;
  scroll-snap-align: start;
}

.food-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}

.food-gallery figcaption,
.food-image-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.food-card {
  scroll-margin-top: 90px;
}

.food-card details {
  margin: 16px 0;
  line-height: 1.8;
}

#food-region {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 14px 16px;
  border: 1px solid #afc5b8;
  border-radius: 12px;
  background: #fff;
  font: inherit;
}

/* Explicit CSS height beats source width/height attributes without stretching photos. */
.food-photo { aspect-ratio: 4 / 3; overflow: hidden; }
.food-photo img { width: 100%; height: 100%; max-height: 320px; aspect-ratio: auto; object-fit: contain; background: #F0F3F7; }
.food-gallery img { height: auto; max-height: 280px; aspect-ratio: auto; object-fit: contain; }
.food-photo-unavailable { padding: 22px 20px; background: #F0F3F7; border-bottom: 1px solid #E3E4E7; }
.food-photo-unavailable p { margin: 8px 0 0; color: #566276; font-size: 13px; }
.food-kind-label { display: inline-block; color: #11223D; font-weight: 800; font-size: 12px; }
@media(max-width:600px) { .food-photo { aspect-ratio: 16 / 10; max-height: 260px; } .food-photo img { aspect-ratio: auto; max-height: 260px; } }