@layer components {
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 2.5rem; padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-primary); border-radius: var(--radius-md);
    background: var(--color-primary); color: var(--color-on-primary);
    font-weight: 500; line-height: var(--leading-tight); text-decoration: none; white-space: nowrap;
  }
  .btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

  .btn--secondary { background: var(--color-surface); color: var(--color-primary); }
  .btn--secondary:hover { background: var(--color-surface-muted); color: var(--color-primary-hover); }

  .btn--danger { background: var(--color-surface); color: var(--color-error-text); border-color: var(--color-error-text); }
  .btn--danger:hover { background: var(--color-error-bg); color: var(--color-error-text); border-color: var(--color-error-text); }

  .btn--link { min-height: 0; padding: 0; border: 0; background: none; color: var(--color-primary); text-decoration: underline; }
  .btn--link:hover { background: none; color: var(--color-primary-hover); }

  .btn--block { width: 100%; }
  .btn--sm { min-height: 2rem; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }

  /* Admin buttons are at least 44px tall, the small ones too (SHOP-RULES 15.2). The storefront keeps its own sizes. The shop's dialog
     (AdminConfirmDialog) is mounted after the shell, outside it, so the rule reaches the shell's later siblings too. */
  .admin-shell .btn, .admin-shell ~ * .btn { min-height: var(--touch-target); }

  /* An icon-only button: a square of the touch target. */
  .btn--icon {
    width: var(--touch-target); min-width: var(--touch-target); height: var(--touch-target);
    padding: 0; justify-content: center;
  }
}