/* Store — Buttons */

/* ============================================
   BUTTONS - Premium Styling
   ============================================ */
/* Button base styles — canonical source: css/components/buttons.css */

/* Accent variant (purple gradient) — store-specific */
.btn-accent {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
  color: white;
  box-shadow: 0 4px 15px color-mix(in oklch, var(--secondary-color) 25%, transparent);
}

.btn-accent:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px color-mix(in oklch, var(--secondary-color) 35%, transparent);
}

.whatsapp-order-btn {
  background: linear-gradient(135deg, var(--whatsapp-color) 0%, var(--whatsapp-dark) 100%);
  color: #064e3b;
  box-shadow: 0 4px 15px color-mix(in oklch, var(--whatsapp-color) 30%, transparent);
}

.whatsapp-order-btn:hover {
  box-shadow: 0 8px 25px color-mix(in oklch, var(--whatsapp-color) 40%, transparent);
  transform: translateY(-3px);
}

.add-to-cart-btn {
  background: var(--primary-gradient);
  color: white;
  box-shadow: 0 4px 15px color-mix(in oklch, var(--primary-color) 25%, transparent);
}

.add-to-cart-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px color-mix(in oklch, var(--primary-color) 40%, transparent);
}

.add-to-cart-btn.success {
  background: linear-gradient(135deg, var(--success-color) 0%, var(--success-light) 100%);
  box-shadow: 0 4px 15px color-mix(in oklch, var(--success-color) 30%, transparent);
}