@layer components {
  /* o segundo seletor pega os botões que o WooCommerce imprime sem passar por template nosso */
  .btn,
  .woocommerce .button:not(.btn) {
    --btn-bg: var(--color-brand-green);
    --btn-bg-hover: var(--color-brand-green-dark);
    --btn-fg: var(--color-cream);
    --btn-fg-hover: var(--btn-fg);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.9rem 2rem;
    border: 2px solid transparent;
    border-radius: var(--radius-blob);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
      transform 150ms ease,
      background-color 150ms ease;

    &:hover {
      transform: translateY(-2px);
      background: var(--btn-bg-hover);
      color: var(--btn-fg-hover);
    }

    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 3px;
    }
  }

  .btn--magenta {
    --btn-bg: var(--color-brand-magenta);
    --btn-bg-hover: var(--color-brand-magenta-dark);
    --btn-fg: var(--color-cream);
  }

  .btn--green {
    --btn-bg: var(--color-brand-green);
    --btn-bg-hover: var(--color-brand-green-dark);
    --btn-fg: var(--color-cream);
  }

  .btn--ghost,
  .woocommerce .button:not(.btn) {
    --btn-bg: transparent;
    --btn-bg-hover: var(--color-brand-green);
    --btn-fg: var(--color-brand-green);
    --btn-fg-hover: var(--color-cream);

    border-color: var(--color-brand-green);
    white-space: nowrap;
  }

  .btn--cream {
    --btn-bg: var(--color-cream);
    --btn-bg-hover: var(--color-brand-green);
    --btn-fg: var(--color-brand-green);
    --btn-fg-hover: var(--color-cream);
  }

  @media (max-width: 768px) {
    .btn,
    .woocommerce .button:not(.btn) {
      padding: 0.7rem 1.4rem;
    }
  }
}