/* Card container */
.card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    display:flex;
    flex-direction:column;
  }
  
  /* Image area with responsive height */
  .card.drinks figure {
  height: clamp(120px, 38vw, 180px);  /* ✅ More compact than default */
}

  /* Drinks section tweak */
.card.drinks figure img {
  object-fit: contain;   /* ✅ Show the full image */
  padding: 4px;          /* Optional: small padding so it doesn't touch edges */
  background: #fff;      /* Keeps it neat */
}
  
  /* Price badge */
  .card .badge{
    position:absolute;
    top:10px;
    right:10px;
    background:var(--accent);
    color:#fff;
    padding:6px 10px;
    border-radius:10px;
    font-size:13px;
    font-weight:800;
  }
  
  /* Special cases */
  .card.snowmonster figure{
    background:#fff;
  }
  .card.snowmonster figure img{
    object-fit:contain;
  }
  .card.picapica figure{
    height:clamp(140px,44vw,200px);
  }
  
  /* Content */
  .card .content{
    padding:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .card .title{
    font-size:15px;
    font-weight:700;
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  
  /* Quantity controls */
  .qty{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .qty button{
    width:34px;
    height:34px;
    border-radius:10px;
    border:none;
    background:var(--accent-light);
    font-weight:800;
    font-size:18px;
    cursor:pointer;
  }
  .qty .count{
    font-weight:800;
  }
  
  /* Extra mobile tuning */
  @media (max-width:380px){
    .card figure{
      height:clamp(150px,58vw,210px);
    }
    .card .title{
      font-size:14px;
    }
    .qty button{
      width:32px;
      height:32px;
    }
  }

  .menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto 90px;
  }

  @media (max-width: 768px){
    .menu-grid{grid-template-columns:1fr;padding:12px 10px}
  }

  /* Lunch menu layout */
.menu-grid.lunch-mode {
  display: grid;
  grid-template-columns: 1fr 1fr; /* ✅ wider, 2 columns */
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto 90px;
}

/* Disabled menu item look */
.card.disabled {
  opacity: 0.92;
}

.card.disabled figure img,
.card.disabled figure {
  filter: grayscale(100%);
}

.card.disabled .badge {
  background: #aab7b1; /* muted tag */
}

.card.disabled .title {
  color: #6e7c74;
}

.card.disabled .qty button {
  pointer-events: none;
  opacity: 0.45;
}

.card.disabled .qty .count {
  color: #8a978f;
}

.card figure {
  width: 100%;
  max-height: 220px;       /* 🔒 cap height */
  background: var(--accent-light);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card figure img {
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;     /* ⚡ show full image */
}