/* Products Page Specific Styles */

.products-hero {
  background: var(--soft-beige);
  padding: 150px 0 80px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.products-hero .section-title {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.products-hero .section-subtitle {
  font-size: 1.2rem;
  color: #666;
}

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

.filter-btn {
  padding: 0.8rem 1.8rem;
  border-radius: 50px;
  background: var(--bg-color);
  border: 2px solid var(--soft-beige);
  color: var(--secondary-color);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.filter-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-2px);
}

.filter-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--secondary-color);
  font-weight: 600;
  box-shadow: var(--shadow-md);
}

/* Product Grid Adjustments */
.cake-item {
  display: none; /* Handled by JS, defaults to none unless initialized */
}

/* Animation for filtering */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Make sure the initial load shows 'all' */
.cake-item {
  display: block; 
}