.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; padding: 17px 22px; font-size: 16px; line-height: 24px; font-weight: 500; text-transform: uppercase; text-align: center; transition: color .2s, background-color .2s, border-color .2s; }
.button--accent { color: var(--color-light); background: var(--color-accent); }
.button--text { padding: 0 0 5px; border: 0; border-bottom: 1px solid currentColor; font-size: 18px; line-height: 25px; background: transparent; color: inherit; }
.button--compact { padding: 12px 20px; }
.button--outline { color: var(--color-dark); background: transparent; border-color: var(--color-accent); }
.button--newsletter { padding: 9px; background: transparent; color: var(--color-accent); }
.button__icon { flex: none; width: 18px; transition: filter .2s; }
.button__icon--arrow { width: 24px; }
.button__label--icon { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.button__label { min-width: 0; }
.button:disabled { cursor: default; }
.button--text:focus-visible { color: var(--color-accent); }
.button--accent:focus-visible, .button--outline:focus-visible { color: var(--color-light); background: var(--color-dark); border-color: var(--color-accent); }
.button--outline:focus-visible .button__icon, .button--newsletter:focus-visible .button__icon { filter: brightness(0) invert(1); }
.button--newsletter:focus-visible { color: var(--color-light); background: var(--color-accent); outline-offset: -4px; }
@media (hover: hover) {
  .button--text:hover { color: var(--color-accent); }
  .button--accent:hover:not(:disabled), .button--outline:hover:not(:disabled) { color: var(--color-light); background: var(--color-dark); border-color: var(--color-accent); }
  .button--outline:hover:not(:disabled) .button__icon, .button--newsletter:hover:not(:disabled) .button__icon { filter: brightness(0) invert(1); }
  .button--newsletter:hover:not(:disabled) { color: var(--color-light); background: var(--color-accent); }
}
@media (prefers-reduced-motion: reduce) { .button, .button__icon { transition: none; } }
@media (max-width: 639px) { .button { padding-block: 12px; } .button--text { padding-block: 0 5px; } }