/* =============================================================================
   Buttons & Interactive Components
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  -webkit-appearance: none;
}

.btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.btn-pill {
  --bs-btn-padding-y: .62rem;
  --bs-btn-padding-x: 1.05rem;
  --bs-btn-font-weight: 800;
  border-radius: 999px;
  letter-spacing: .3px;
}

.btn-green {
  background: linear-gradient(135deg, #7c9277, var(--green), #6a7c65);
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(112, 134, 108, .22);
}

.btn-green:hover {
  filter: brightness(1.05);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(112, 134, 108, .3);
}

.btn-green:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(112, 134, 108, .25);
}

.btn-green svg {
  transition: transform var(--transition-slow);
}

.btn-green:hover svg {
  transform: translateX(3px);
}

/* Cards */
.pottery-card {
  background: white;
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-slow);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.pottery-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.pottery-card:focus-within {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}