/* HealthyFoodKH V7.6 — Premium menu cards (post V7.5).
   Keeps every original uploaded image intact and fully visible.
   Styling only for public menu/favorites: no changes to prices, cart, APIs or checkout. */
:root{
  --hf-menu-ink:#193b2c;
  --hf-menu-green:#177e48;
  --hf-menu-line:#deeadf;
}
/* More consistent rhythm on desktop and mobile, including favorite results. */
#productGrid.product-grid,#favoritesGrid.product-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px!important;
  align-items:stretch;
}
#productGrid .food-card,#favoritesGrid .food-card{
  box-sizing:border-box;
  min-width:0;
  overflow:hidden;
  border:1px solid #dce9df!important;
  border-radius:19px!important;
  background:#fff;
  box-shadow:0 5px 22px rgba(16,52,30,.065)!important;
  transition:box-shadow .2s ease,transform .2s ease;
}
@media(hover:hover){
  #productGrid .food-card:hover,#favoritesGrid .food-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(16,52,30,.11)!important;
  }
}
/* A softly blurred duplicate of the SAME uploaded photograph fills the unused sides.
   Foreground is always object-fit:contain: original photo is never cropped. */
#productGrid .food-image-wrap,#favoritesGrid .food-image-wrap{
  box-sizing:border-box;
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(100% - 18px)!important;
  max-height:none!important;
  height:auto!important;
  aspect-ratio:1/1!important;
  margin:9px 9px 0;
  overflow:hidden;
  border-radius:13px;
  background:linear-gradient(130deg,#ebf2e8,#f6f1e8);
}
#productGrid .food-image-wrap .hf-photo-blur,
#favoritesGrid .food-image-wrap .hf-photo-blur{
  position:absolute!important;
  inset:-15px!important;
  z-index:0!important;
  display:block!important;
  width:calc(100% + 30px)!important;
  height:calc(100% + 30px)!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  filter:blur(17px) saturate(.8);
  opacity:.38;
  pointer-events:none;
  transform:none!important;
}
#productGrid .food-image-wrap > img.food-image,
#favoritesGrid .food-image-wrap > img.food-image{
  position:relative;
  z-index:1;
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:100%;max-height:100%;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0;
  background:transparent!important;
  transform:none!important;
  transition:none!important;
}
#productGrid .food-card:hover img.food-image,
#favoritesGrid .food-card:hover img.food-image{transform:none!important}
/* Keep small overlays unobtrusive; badges move away from top text baked into photos. */
#productGrid .food-badge,#favoritesGrid .food-badge{
  position:absolute;
  z-index:3;
  top:auto!important;
  bottom:8px!important;
  left:8px!important;
  max-width:calc(100% - 52px);
  min-width:0;
  box-sizing:border-box;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:5px 9px!important;
  background:rgba(255,255,255,.96)!important;
  color:#226b43;
  border:1px solid rgba(221,238,222,.85);
  border-radius:999px;
  font-size:10px!important;
  line-height:1.25;
  font-weight:750;
  box-shadow:0 3px 12px #0e302b16;
}
#productGrid .food-badge[hidden],#favoritesGrid .food-badge[hidden]{display:none!important}
#productGrid .favorite-heart,#favoritesGrid .favorite-heart{
  position:absolute;z-index:4;
  top:9px!important;right:9px!important;
  display:grid;place-items:center;
  width:36px!important;height:36px!important;
  border:1px solid #e2eae1!important;
  border-radius:50%;
  background:rgba(255,255,255,.97)!important;
  box-shadow:0 2px 12px #193b2c22;
  color:#1e8051;
}
#productGrid .favorite-heart .hf-icon,#favoritesGrid .favorite-heart .hf-icon{
  width:19px;height:19px;stroke-width:1.85;
}
#productGrid .favorite-heart.is-saved,#favoritesGrid .favorite-heart.is-saved{
  color:#d54a5c;background:#fff8f8!important;
}
#productGrid .food-body,#favoritesGrid .food-body{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:5px!important;
  flex:1;
  min-height:0!important;
  padding:14px 14px 15px!important;
}
#productGrid .food-category,#favoritesGrid .food-category{
  font-size:10px!important;
  line-height:1.4;
  font-weight:800;
  letter-spacing:.12em;
  color:#558e64;
}
#productGrid .food-name,#favoritesGrid .food-name{
  font-family:inherit;
  color:var(--hf-menu-ink);
  font-size:15px!important;
  font-weight:800;
  line-height:1.38!important;
  min-height:2.75em!important;
  max-height:2.75em;
  margin:1px 0 0!important;
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
#productGrid .food-description,#favoritesGrid .food-description{
  font-size:11px!important;
  line-height:1.5!important;
  color:#799084;
  min-height:3em!important;
  max-height:3em;
  margin:1px 0 0!important;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
#productGrid .food-purchase,#favoritesGrid .food-purchase{
  box-sizing:border-box;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-end!important;
  gap:10px!important;
  min-width:0;
  width:100%;
  margin-top:auto!important;
  padding-top:8px;
}
#productGrid .food-price,#favoritesGrid .food-price{
  font-weight:850;
  font-size:19px!important;
  line-height:1.2;
  color:#173d2c;
  white-space:nowrap;
}
#productGrid .add-button,#favoritesGrid .add-button{
  box-sizing:border-box;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:43px!important;
  margin:0!important;
  padding:10px 8px!important;
  border-radius:11px!important;
  border:1px solid #12703f!important;
  background:#167e49!important;
  color:white!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:800!important;
  box-shadow:0 4px 12px #1b764320;
  cursor:pointer;
  transition:background .18s ease;
}
#productGrid .add-button:hover,#favoritesGrid .add-button:hover{background:#116738!important}
#productGrid .add-button:disabled,#favoritesGrid .add-button:disabled{
  cursor:not-allowed;background:#dfe9e0!important;border-color:#dfe9e0!important;color:#627f6b!important;box-shadow:none;
}
/* Give category controls the light, refined chip treatment in the reference. */
#categoryList.category-list{gap:8px!important;align-items:center}
#categoryList .category-chip{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px!important;
  border-radius:12px!important;
  border:1px solid #e0eae0!important;
  box-shadow:none!important;
  padding:9px 12px!important;
  white-space:nowrap;
}
#categoryList .category-chip.is-active{background:#173c2d!important;color:white!important;border-color:#173c2d!important}
#categoryList .hf-category-icon{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1120px){
 #productGrid.product-grid,#favoritesGrid.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:790px){
 #productGrid.product-grid,#favoritesGrid.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important}
 #productGrid .food-card,#favoritesGrid .food-card{border-radius:16px!important;box-shadow:0 3px 12px #133b2b12!important}
 #productGrid .food-image-wrap,#favoritesGrid .food-image-wrap{width:calc(100% - 12px)!important;margin:6px 6px 0;border-radius:11px}
 #productGrid .food-body,#favoritesGrid .food-body{padding:10px 10px 12px!important;gap:4px!important}
 #productGrid .food-name,#favoritesGrid .food-name{font-size:12.5px!important;min-height:2.65em!important;max-height:2.65em}
 #productGrid .food-description,#favoritesGrid .food-description{font-size:10px!important;min-height:3em!important;max-height:3em}
 #productGrid .food-price,#favoritesGrid .food-price{font-size:17px!important}
 #productGrid .food-category,#favoritesGrid .food-category{font-size:9px!important}
 #productGrid .food-purchase,#favoritesGrid .food-purchase{gap:8px!important}
 #productGrid .add-button,#favoritesGrid .add-button{min-height:41px!important;border-radius:10px!important;font-size:11.5px!important}
 #productGrid .favorite-heart,#favoritesGrid .favorite-heart{width:34px!important;height:34px!important;right:7px!important;top:7px!important}
 #productGrid .food-badge,#favoritesGrid .food-badge{font-size:9px!important;bottom:6px!important;left:6px!important;padding:4px 7px!important}
 #categoryList .category-chip{min-height:37px!important;font-size:12px!important;padding:7px 9px!important}
}
@media(max-width:370px){
 #productGrid.product-grid,#favoritesGrid.product-grid{gap:9px!important}
 #productGrid .food-body,#favoritesGrid .food-body{padding:9px 8px 10px!important}
 #productGrid .food-name,#favoritesGrid .food-name{font-size:11.5px!important}
 #productGrid .food-description,#favoritesGrid .food-description{font-size:9.5px!important}
 #productGrid .food-price,#favoritesGrid .food-price{font-size:16px!important}
 #productGrid .add-button,#favoritesGrid .add-button{font-size:10px!important;min-height:39px!important}
}
@media(prefers-reduced-motion:reduce){#productGrid .food-card,#favoritesGrid .food-card,#productGrid .add-button,#favoritesGrid .add-button{transition:none!important}}