/* ============================================================
   components/button.css — botones del sitio

   Se carga desde el layout, no con @push: hay botones en todas las
   páginas. No tiene componente Blade a propósito — un `<x-button>` que
   solo escribe class="btn btn--primary" agrega una capa sin quitar
   repetición; aquí el componente es la clase.

   `.btn--sm` vivía en components/product-card.css, pero home.blade.php
   también lo usa: una portada sin productos destacados no cargaba ese
   archivo y el botón "Ver todo el catálogo" se quedaba sin estilo.
   ============================================================ */

.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: .02em;
  font-size: 1.02rem;
  padding: .8em 1.6em;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-brand-green);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}

.btn--primary { background: var(--color-brand-green); color: #fff; }
.btn--primary:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 152, 72, .25);
}

.btn--ghost { background: transparent; color: var(--color-brand-green-text); }
.btn--ghost:hover { text-decoration: none; background: var(--color-surface-tint); }

.btn--sm { font-size: .9rem; padding: .6em 1.1em; }