.mealz-catalog__title {
  color: var(--mealz-ds-color-neutral-black, #0F191F);
}

.mealz-catalog__title-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mealz-catalog__content,
.mealz-catalog__title-container {
  padding: 0 80px;
  box-sizing: border-box;

  .mealz-catalog__category-title-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mealz-catalog__title-icon:not(.ghost):not(.disabled):not([disabled]) {
    width: 18px;
    height: 18px;
    background-color: var(--mealz-ds-color-primary-100, #E4EAEC);

    img {
      cursor: pointer;
      width: 13px;
      height: 13px;
    }
  }

  .mealz-catalog__link {
    cursor: pointer;
    width: fit-content;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }

  .mealz-catalog__subtitle {
    margin: 0;
    color: var(--mealz-ds-color-neutral-500, #8C96A2);
  }

  .mealz-catalog__list__empty:not(.hidden),
  .mealz-catalog-favorites__list__not-logged:not(.hidden),
  .mealz-catalog-history__empty:not(.hidden) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 36px;
    margin-bottom: 8px;

    .mealz-catalog__list__empty__icon,
    .mealz-catalog-favorites__list__not-logged__icon,
    .mealz-catalog-history__empty__icon {
      width: 200px;
      height: 150px;
    }

    .mealz-catalog__list__empty__title,
    .mealz-catalog-favorites__list__not-logged__title,
    .mealz-catalog-history__empty__title {
      display: block;
      text-align: center;
      white-space: pre-line;
    }

    .mealz-catalog__list__empty__title,
    .mealz-catalog-favorites__list__not-logged__title {
      margin-top: 36px;
    }

    .mealz-catalog-history__empty__title {
      margin: 16px 0;
    }

    .mealz-catalog-history__empty__button {
      text-decoration: none;
    }
  }

  .mealz-catalog__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--mealz-recipe-card-width, 227px));
    justify-content: center;
    gap: 16px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 16px;

    .mealz-catalog__load-more-sentinel {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 1px;
      height: 1px;
      visibility: hidden;
      pointer-events: none;
    }
  }


  @media (min-width: 375px) and (max-width: 712px) {
    .mealz-catalog__list {
      grid-template-columns: repeat(auto-fill, calc((100% - 16px) / 2));
    }

    .mealz-recipe-card {
      width: 100%;
      height: 272px;
    }
  }

  @media (max-width: 374px) {
    .mealz-catalog__list {
      grid-template-columns: repeat(auto-fill, 100%);
    }

    .mealz-recipe-card {
      width: 100%;
      height: 272px;
    }
  }

  .mealz-ds-loader {
    justify-self: center;
  }
}

@media (max-width: 1023px) {
  .mealz-catalog__content,
  .mealz-catalog__title-container {
    padding: 0 24px;
  }
}

@media (max-width: 700px) {
  .mealz-catalog__content,
  .mealz-catalog__title-container {
    padding: 0 16px;
  }
}

.mealz-loader {
  margin-top: 80px;
  margin-bottom: 16px;
  margin-left: calc(50% - 40px);
  height: 80px;
  width: 80px;
  border: var(--mealz-loader-thickness, 5px) solid var(--mealz-ds-color-primary-100, #e4eaec);
  border-top:  var(--mealz-loader-thickness, 5px) solid var(--mealz-ds-color-primary-900, #10323f);
  border-radius: var(--mealz-border-radius-circle, 50%);
  animation: 0.5s linear infinite mealz-loader-spin;
}

@keyframes mealz-loader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

p, h1, h2, h3, h4 {
  &.mealz-ds-text {
    margin: 0;
  }
}

/* Hide the "meal idea" recipe-card badge on every catalog surface (all recipe-card variants). */
:is(mealz-catalog-home, mealz-catalog-category, mealz-catalog-list, mealz-catalog-favorites, mealz-catalog-history)
  :is(.mealz-recipe-card__badge-container--meal-idea, .mealz-recipe-card__badge-container img.mealz-recipe-card__badge) {
  display: none !important;
}