/* Phase 56 - Mobile Dish Image Fit Fix
   Purpose: keep existing menu card size while showing the full dish photo on mobile.
   Fixes cropped/half-visible photos by using a contained image frame instead of cover/crop behavior.
*/
:root{
  --sk56-mobile-img-h: 168px;
  --sk56-tablet-img-h: 182px;
  --sk56-desktop-img-h: 194px;
  --sk56-img-bg: rgba(255,255,255,.86);
}

/* Customer home/menu dish image frame */
.sk-dish-card39 .sk-dish-img39,
.dish-card .sk-dish-img39,
.menu-card .sk-dish-img39,
.product-card .sk-dish-img39,
.food-card .sk-dish-img39,
.sk43-img,
.dish-img,
.menu-card .image-wrap,
.product-card .image-wrap,
.food-card .image-wrap{
  height: var(--sk56-desktop-img-h) !important;
  min-height: var(--sk56-desktop-img-h) !important;
  max-height: var(--sk56-desktop-img-h) !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: var(--sk56-img-bg) !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}

/* Always show the full uploaded dish image without stretching or cropping */
.sk-dish-card39 .sk-dish-img39 img,
.dish-card .sk-dish-img39 img,
.menu-card .sk-dish-img39 img,
.product-card .sk-dish-img39 img,
.food-card .sk-dish-img39 img,
.sk43-img img,
.dish-img img,
.menu-card .image-wrap img,
.product-card .image-wrap img,
.food-card .image-wrap img,
.dish-card img,
.menu-card img,
.product-card img,
.food-card img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  aspect-ratio: auto !important;
  display: block !important;
  background: transparent !important;
}

/* Keep card proportions neat and prevent images from taking over the phone screen */
.sk-dish-card39,
.dish-card,
.menu-card,
.product-card,
.food-card{
  overflow: hidden !important;
}

.sk-dish-card39 .sk-dish-body39{
  padding-top: 14px !important;
}

/* Tablet */
@media (max-width: 900px){
  .sk-dish-card39 .sk-dish-img39,
  .dish-card .sk-dish-img39,
  .menu-card .sk-dish-img39,
  .product-card .sk-dish-img39,
  .food-card .sk-dish-img39,
  .sk43-img,
  .dish-img,
  .menu-card .image-wrap,
  .product-card .image-wrap,
  .food-card .image-wrap{
    height: var(--sk56-tablet-img-h) !important;
    min-height: var(--sk56-tablet-img-h) !important;
    max-height: var(--sk56-tablet-img-h) !important;
    padding: 10px !important;
  }
}

/* Mobile phone */
@media (max-width: 640px){
  .sk-dish-grid39,
  .dish-grid,
  .menu-grid,
  .product-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .sk-dish-card39 .sk-dish-img39,
  .dish-card .sk-dish-img39,
  .menu-card .sk-dish-img39,
  .product-card .sk-dish-img39,
  .food-card .sk-dish-img39,
  .sk43-img,
  .dish-img,
  .menu-card .image-wrap,
  .product-card .image-wrap,
  .food-card .image-wrap{
    height: var(--sk56-mobile-img-h) !important;
    min-height: var(--sk56-mobile-img-h) !important;
    max-height: var(--sk56-mobile-img-h) !important;
    padding: 9px !important;
  }

  .sk-dish-card39 .sk-dish-img39 img,
  .dish-card .sk-dish-img39 img,
  .menu-card .sk-dish-img39 img,
  .product-card .sk-dish-img39 img,
  .food-card .sk-dish-img39 img,
  .sk43-img img,
  .dish-img img,
  .menu-card .image-wrap img,
  .product-card .image-wrap img,
  .food-card .image-wrap img,
  .dish-card img,
  .menu-card img,
  .product-card img,
  .food-card img{
    object-fit: contain !important;
    object-position: center center !important;
  }

  .sk-dish-body39{
    padding: 15px 16px 18px !important;
  }
}