/* kind badge */
.kind-badge{
  display:inline-flex;align-items:center;
  padding:.35rem .75rem;border-radius:999px;
  font-size:.75rem;font-weight:800;
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  line-height:1;
}
.kind-berries{background: rgba(236,72,153,.18);color: rgba(255,255,255,.95);}
.kind-vegetables{background: rgba(16,185,129,.18);color: rgba(255,255,255,.95);}
.kind-fruits{background: rgba(251,146,60,.18);color: rgba(255,255,255,.95);}

/* ✅ NEW: broths badge */
.kind-broths{background: rgba(2,6,23,.38);color: rgba(255,255,255,.95);border-color: rgba(255,255,255,.18);}

/* cut badge */
.cut-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .7rem;border-radius:999px;
  background: rgba(0,0,0,.45);color:#fff;
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  font-size:.75rem;font-weight:700;line-height:1;
}
.cut-badge .cut-svg{opacity:.95;}

#modalCutsWrap .cut-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .65rem;border-radius:999px;
  border:1px solid rgba(2,6,23,.12);
  background: rgba(2,6,23,.03);
  color: rgba(2,6,23,.85);
  font-size:.75rem;font-weight:700;line-height:1;
}
#modalCutsWrap .cut-pill .cut-svg{opacity:.95;}

/* media sizing */
.media-box{ height: 12rem; }
.media-box.is-canned{ height: 22.5rem; background: linear-gradient(180deg, #f8fafc, #eef2f7); }
.media-box.is-frozen{ height: 12rem; }

/* ✅ NEW: broths - делаем выше, чтобы картинка не “резалась” */
.media-box.is-broths{
  height: 18rem;
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
}

/* чуть лучше кадрирование на бульонах */
.product-card[data-kind="broths"] .media-box img{
  object-position: center 35%;
}

@media (max-width:768px){
  .mixbar{gap:12px;}
  .media-box.is-canned{ height: 15.5rem; }
  .media-box.is-broths{ height: 17rem; }
}

/* tailwind-like class (оставим) */
.bg-emerald-950\/55 { background-color: rgb(2 44 34 / 0.35); }

/* ✅ БУЛЬОНЫ: показываем упаковку целиком (как на левой карточке) */
.media-box.is-broths{
  height: 18rem;                 /* можешь 17-20rem подобрать */
  background: #f3f4f6;           /* аккуратная подложка */
}

/* было object-cover в разметке Tailwind, поэтому переопределяем точечно */
.product-card[data-kind="broths"] .media-box.is-broths img{
  object-fit: contain !important;     /* НЕ режем */
  object-position: center !important;
  padding: 18px;                      /* воздух вокруг упаковки */
  background: linear-gradient(180deg, #f8fafc, #eef2f7); /* как у canned */
}

/* на мобиле можно чуть меньше отступ */
@media (max-width: 768px){
  .media-box.is-broths{ height: 17rem; }
  .product-card[data-kind="broths"] .media-box.is-broths img{ padding: 14px; }
}
/* =========================
   BROTHS: как “левая карточка”
   (заполняем блок, без полей, но с правильным кадром)
========================= */

/* высота верхнего медиа-блока для бульонов */
.media-box.is-broths{
  height: 27.5rem;                 /* можно 16–18rem */
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
}

/* ВАЖНО: без padding/contain — только cover */
.product-card[data-kind="broths"] .media-box.is-broths img{
  object-fit: cover !important;
  object-position: center 25% !important; /* ✅ ключ: сдвигаем кадр вверх */
  padding: 0 !important;
  background: transparent !important;
}

@media (max-width: 768px){
  .media-box.is-broths{ height: 15.5rem; }
  .product-card[data-kind="broths"] .media-box.is-broths img{
    object-position: center 22% !important;
  }
}