/* Empty category page - see catalog/controller/journal3/category_empty.php.
   The card uses the same pale teal as the category icons on the home page, so an
   empty category reads as part of the shop rather than an error. */

.category-empty {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 8px;
}

/* The Trending strip under the card runs the card's full width rather than the
   shared 1140px cap, and the gap above is the flex gap alone (its own 34px top
   margin made 66px of white between the two). */
.category-empty > .reco-section--row {
  max-width: none;
  margin: 0 0 10px;
  padding: 0;
}

/* Cards share the width left over, so a strip that fits ends at the card's right
   edge instead of leaving a blank band; below 190px a card it scrolls as before.
   Phones keep the 158px column set in recommendations.css. */
@media (min-width: 481px) {
  .category-empty > .reco-section--row .reco-row {
    grid-auto-columns: minmax(190px, 1fr);
  }
}

.category-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 20px;
  border-radius: 8px;
  background-color: #E8F2F1;
}

.category-empty-title {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.3;
  color: #195C5B;
}

.category-empty-text {
  max-width: 520px;
  margin: 0 0 20px;
  color: #3d4a49;
}

.category-empty-card .category-empty-sell {
  min-width: 220px;
}

@media (max-width: 480px) {
  .category-empty-card {
    padding: 28px 16px;
  }

  .category-empty-title {
    font-size: 19px;
  }

  .category-empty-card .category-empty-sell {
    width: 100%;
    min-width: 0;
  }
}