.h001ProcessingPhone--has-data .h001ProcessingDish--filled {
  overflow: hidden;
}

.h001ProcessingCategories {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  min-width: 0;
  overflow: hidden;
}

.h001ProcessingCategories span {
  animation: h001ProcessingRevealCategory 0.3s ease forwards;
  animation-delay: calc(0.18s + var(--category-delay));
  background: #eef2f7;
  border-radius: 999px;
  color: #111827;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 900;
  max-width: 145px;
  opacity: 0;
  overflow: hidden;
  padding: 9px 13px;
  text-overflow: ellipsis;
  transform: translateY(6px);
  white-space: nowrap;
}

.h001ProcessingCategories .isActive {
  background: linear-gradient(135deg, #ff5a0a, #ff2f7d);
  color: #fff;
}

.h001ProcessingDish__photo {
  aspect-ratio: 1;
  border-radius: 14px;
  display: block;
  overflow: hidden;
  position: relative;
  width: 82px;
}

.h001ProcessingDish__photo::before {
  animation: h001ProcessingShimmer 1.18s ease-in-out infinite;
  background: linear-gradient(100deg, #f1f5f9 0%, #fff3e8 45%, #f1f5f9 100%);
  background-size: 220% 100%;
  content: "";
  inset: 0;
  position: absolute;
}

.h001ProcessingDish__photo img,
.h001ProcessingDish__photo .h001DishArt {
  border-radius: inherit;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  width: 100%;
}

.h001ProcessingDish--filled b,
.h001ProcessingDish--filled p,
.h001ProcessingDish--filled strong {
  animation: h001ProcessingRevealText 0.34s ease forwards;
  background: linear-gradient(100deg, #f1f5f9 0%, #fff3e8 45%, #f1f5f9 100%);
  border-radius: 999px;
  color: transparent;
  display: block;
}

.h001ProcessingDish--filled b {
  animation-delay: calc(1.05s + var(--item-delay));
  font-size: 0.94rem;
  line-height: 1.18;
  margin: 6px 0 10px;
  min-height: 17px;
  width: 82%;
}

.h001ProcessingDish--filled p {
  animation-delay: calc(2.45s + var(--item-delay));
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.28;
  margin: 0;
  min-height: 32px;
  width: 96%;
}

.h001ProcessingDish--filled strong {
  animation-delay: calc(1.75s + var(--item-delay));
  bottom: 12px;
  font-size: 0.8rem;
  height: auto;
  min-height: 12px;
  position: absolute;
  right: 12px;
  text-align: right;
  width: 74px;
}

.h001ProcessingDish--filled .h001ProcessingDish__photo.hasImage::before {
  animation:
    h001ProcessingShimmer 1.18s ease-in-out infinite,
    h001ProcessingPhotoSkeletonOut 0.22s ease forwards;
  animation-delay: 0s, calc(3.55s + var(--photo-delay));
}

.h001ProcessingDish--filled .h001ProcessingDish__photo.hasImage img,
.h001ProcessingDish--filled .h001ProcessingDish__photo.hasImage .h001DishArt {
  animation: h001ProcessingRevealPhoto 0.42s ease forwards;
  animation-delay: calc(3.55s + var(--photo-delay));
}

.h001ProcessingDish--filled .h001ProcessingDish__photo.hasImage.isDynamic::before {
  animation-delay: 0s, 0s;
}

.h001ProcessingDish--filled .h001ProcessingDish__photo.hasImage.isDynamic img {
  animation-delay: 0s;
}

.h001ProcessingDish__copy {
  min-width: 0;
}

@keyframes h001ProcessingRevealText {
  0% {
    color: transparent;
  }

  96% {
    color: transparent;
  }

  100% {
    background: transparent;
    border-radius: 0;
    color: #111827;
  }
}

@keyframes h001ProcessingRevealCategory {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes h001ProcessingPhotoSkeletonOut {
  100% {
    opacity: 0;
  }
}

@keyframes h001ProcessingRevealPhoto {
  100% {
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .h001ProcessingDish__photo {
    width: 74px;
  }

  .h001ProcessingDish--filled b {
    font-size: 0.88rem;
  }

  .h001ProcessingDish--filled p {
    font-size: 0.72rem;
  }
}
