/* BALOKA V31 — catalog-only layout review. No production/backend changes.
   Keep original promotional crops as provisional illustrations until separate
   approved photos for all four flavors are available. */
html body #menu .bl-grid,
html body #menu .bl-coffee {
  align-items: stretch !important;
}
html body #menu .bl-grid > article,
html body #menu .bl-coffee > article {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  height: 100% !important;
}
html body #menu .bl-grid > article .bl26-card-visual,
html body #menu .bl-coffee > article .bl26-card-visual {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
}
html body #menu .bl-grid > article .bl26-card-cover,
html body #menu .bl-coffee > article .bl26-card-cover {
  border-radius: 0 !important;
}
html body #menu .bl-grid > article .bl26-crop {
  background-size: 580% auto !important;
  transform: none !important;
  filter: saturate(1.02) !important;
}
/* Avoid adding product prototype/measurements to the customer menu cards.
   Prototypes remain in source for the Owner product specification. */
html body #menu article .bl30-shape,
html body #menu .bl30-shape-note {
  display: none !important;
}
html body #menu article .bl-body,
html body #menu article .catalog-text,
html body #menu article .cardbody {
  min-width: 0 !important;
}
html body #menu article .bl-body h3,
html body #menu article .catalog-text h3,
html body #menu article .cardbody h3 {
  overflow-wrap: anywhere !important;
}
html body #menu .bl27-disclaimer {
  max-width: 880px !important;
  margin: 14px auto 0 !important;
}
@media (min-width: 721px) {
  html body #menu .bl-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (max-width: 720px) {
  html body #menu .bl-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  html body #menu .bl-coffee {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html body #menu .bl-grid > article .bl26-card-visual {
    aspect-ratio: 1 / 1 !important;
  }
  html body #menu article .bl-body,
  html body #menu article .catalog-text,
  html body #menu article .cardbody {
    padding: 12px !important;
  }
}

/* Show dedicated images only after successful browser load; no blank cards. */
html body #menu article.bl31-photo-ready .bl26-card-visual { position: relative !important; }
html body #menu article.bl31-photo-ready .bl26-card-visual > .bl31-menu-photo {
  display:block !important; width:100% !important; height:100% !important;
  object-fit:contain !important; object-position:center center !important;
  position:absolute !important; inset:0 !important; z-index:35 !important;
  background:#392319 !important; filter:none !important; mask-image:none !important;
  -webkit-mask-image:none !important; border:0 !important;
}
html body #menu article.bl31-photo-ready .bl26-card-visual .bl26-card-cover {display:none !important}

/* V31 square photo frame refinement — review only. */
html body #menu .bl-grid > article.bl31-photo-ready .bl26-card-visual {aspect-ratio:1 / 1 !important;height:auto!important;min-height:0!important}
html body #menu article.bl31-photo-ready .bl26-card-visual > img.bl31-menu-photo {object-fit:cover!important;background:transparent!important}

/* Kopi Hitam: switch only after approved binary has loaded. Preserve all cup text. */
html body #menu .bl-coffee article.bl31-coffee-photo-ready .bl26-card-visual {
  aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important;
  background: #3a2117 !important; position: relative !important;
}
html body #menu .bl-coffee article.bl31-coffee-photo-ready .bl26-card-visual > img.bl31-coffee-photo {
  display: block !important; position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; z-index: 50 !important;
  object-fit: contain !important; object-position: center center !important;
  mask-image: none !important; -webkit-mask-image: none !important;
  filter: none !important; background: #3a2117 !important;
}
html body #menu .bl-coffee article.bl31-coffee-photo-ready .bl26-card-visual::before,
html body #menu .bl-coffee article.bl31-coffee-photo-ready .bl26-card-cover {
  display: none !important;
}

/* Gula Aren photo: activate only after the valid asset is loaded. */
html body #menu .bl-coffee article.bl31-aren-photo-ready .bl26-card-visual {aspect-ratio:1 / 1!important;height:auto!important;min-height:0!important;position:relative!important;background:#52321f!important}
html body #menu .bl-coffee article.bl31-aren-photo-ready .bl26-card-visual > img.bl31-aren-photo {display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:55!important;object-fit:contain!important;object-position:center!important;filter:none!important;mask-image:none!important;-webkit-mask-image:none!important;background:#52321f!important}
html body #menu .bl-coffee article.bl31-aren-photo-ready .bl26-card-visual .bl26-card-cover,
html body #menu .bl-coffee article.bl31-aren-photo-ready .bl26-card-visual::before {display:none!important}