/* MayMay consistent card media — 4:3 everywhere */
:root { --mm-card-ratio: 4 / 3; --mm-grid-gap: 18px; }
.mm-img-box,
.food-image,
.team-img,
.gallery-img,
.mmk-card > .mm-img-box {
  aspect-ratio: var(--mm-card-ratio);
  overflow: hidden;
  width: 100%;
  background: #efeae2;
  display: block;
  position: relative;
}
.mm-img-box > a,
.food-image > a,
.team-img > a {
  display: block;
  width: 100%;
  height: 100%;
}
.food-image img,
.team-img img,
.gallery-img img,
.mm-img-box img,
.mmk-card img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  aspect-ratio: unset !important;
  display: block;
}
/* Equal-height cards */
.vs-food-box.food-box1,
.vs-team.team-style3,
.mmk-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
}
.vs-food-box .food-content,
.vs-team .team-content,
.mmk-card .mmk-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.vs-food-box .food-title,
.vs-team .team-member-name {
  min-height: 3.2em;
  line-height: 1.25;
}
.vs-food-box .food-price {
  margin-top: auto;
}
/* Grid gaps + stretch */
.vs-food-box-wrapper .row {
  align-items: stretch;
  /* do NOT set gap on Bootstrap rows — percentage cols + gap collapses to 2-up */
}
.vs-food-box-wrapper .row > [class*="col-"] {
  display: flex;
  margin-bottom: var(--mm-grid-gap);
}
.vs-food-box-wrapper .row > [class*="col-"] > .vs-food-box {
  width: 100%;
}
.mmk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--mm-grid-gap);
  align-items: stretch;
}
@media (max-width: 575.98px) {
  :root { --mm-grid-gap: 14px; }
  .vs-food-box .food-title,
  .vs-team .team-member-name { min-height: 2.8em; font-size: 18px !important; }
}
/* Gallery carousel items: same 4:3 box */
.vs-gallery .gallery-img { aspect-ratio: var(--mm-card-ratio); }


/* Dish gallery — tidy grid (replaces broken slick col-auto strip) */
.mm-gallery-fixed { overflow: hidden; }
.mm-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mm-grid-gap, 14px);
  width: 100%;
  max-width: 100%;
  margin: 0 auto 8px;
  padding: 0;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .mm-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 1200px) {
  .mm-gallery-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.mm-gal-card {
  min-width: 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
}
.mm-gal-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.mm-gal-card .mm-img-box,
.mm-gal-card .gallery-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  width: 100%;
  background: #efeae2;
}
.mm-gal-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
}
.mm-gal-title {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  color: #2a2118;
  min-height: 2.6em;
}
@media (min-width: 768px) {
  .mm-gal-title { font-size: 16px; padding: 12px 14px 14px; }
}

/* Kill page-wide horizontal overflow */
html, body {
  max-width: 100%;
  overflow-x: clip;
}
body { position: relative; }
.container, .container-fluid, .row, section, .vs-gallery-wrapper, .vs-food-box-wrapper {
  max-width: 100%;
}
.container-fluid { padding-left: 12px; padding-right: 12px; }
/* Slick tracks that escape */
.slick-list { max-width: 100%; }
.slick-track { max-width: none; /* track may be wide by design inside clipped list */ }