/* ==========================================================================
   MY WELL — Products Catalogue
   ========================================================================== */

.catalogue {
  background: var(--charcoal);
}

/* ---- Filter bar ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 3rem;
}

.filter-btn {
  padding: 0.6rem 1.4rem;
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-pill);
  transition: all var(--dur-fast) var(--ease);
}

.filter-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.filter-btn.is-active {
  color: var(--black);
  background: var(--gold-gradient);
  border-color: transparent;
  box-shadow: var(--shadow-gold);
}

/* ---- Filtering animation ---- */
.product-card.is-hidden {
  display: none;
}

.product-card.is-filtering {
  animation: card-in 0.5s var(--ease-out) both;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.catalogue__empty {
  text-align: center;
  color: var(--muted);
  padding: 3rem 0;
  display: none;
}

.catalogue__empty.is-visible {
  display: block;
}

/* ---- Detailed product card (taller for catalogue) ---- */
.product-card--detailed .product-card__media {
  aspect-ratio: 1 / 1;
}

.product-card--detailed .product-card__benefits {
  flex-direction: column;
  gap: 0.45rem;
}

.product-card--detailed .product-card__benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border: none;
  padding: 0;
  border-radius: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.product-card--detailed .product-card__benefits li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}