/* ==========================================================================
   Product Card Styles
   ========================================================================== */

.af-product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  border: 1px solid var(--surface-color-alt);
}

.af-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Image Wrapper */
.af-product-image-wrapper {
  position: relative;
  width: 100%;
  height: 220px; /* Fixed height to keep cards uniform */
  overflow: hidden;
  background-color: var(--surface-color-alt);
}

.af-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.af-product-card:hover .af-product-image {
  transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Category Badge overlay */
.af-badge-category {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background-color: var(--secondary-color);
  color: var(--surface-color);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
  box-shadow: var(--shadow-sm);
}

/* Content Area */
.af-product-content {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  flex-grow: 1; /* Pushes the actions to the bottom if names wrap */
}

.af-product-title {
  margin-bottom: var(--spacing-xs);
  color: var(--primary-color-dark);
}

.af-product-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-lg);
  font-style: italic;
}

/* Action Buttons Container */
.af-product-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: auto; /* Aligns buttons to the bottom of the card */
}

.af-action-btn {
  width: 100%;
  font-size: 0.875rem;
  padding: 0.5rem;
}

/* Tablet and up: put buttons side-by-side if they fit */
@media (min-width: 768px) {
  .af-product-actions {
    flex-direction: row;
  }
  .af-action-btn {
    flex: 1;
  }
}