/* Shared spacing for text actions. Component selectors retain control of
   icon buttons, quantity steppers, segmented controls and compact table tools. */
.btn {
  gap: var(--button-content-gap, 8px);
  padding: var(--button-padding-block, 10px) var(--button-padding-inline, 16px);
  line-height: 1.4;
  max-width: 100%;
  white-space: normal;
}

/* Reusable action layouts; use a container gap rather than button margins so
   wrapped rows keep the same spacing and edge buttons stay aligned. */
.button-row,
.button-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--button-group-gap, 12px);
}
.button-stack { display: grid; gap: var(--button-group-gap, 12px); }
:is(
  .actions, .form-actions, .modal-actions, .dialog-actions, .card-actions,
  .invite-actions, .cart-page-actions, .custom-checkout-actions,
  .cart-footer, .post-actions, .goal-card-actions, .home-hero__actions,
  .code-actions, .classifieds-filter-actions, .notifications-card__actions
) {
  column-gap: var(--button-group-gap, 12px);
  row-gap: var(--button-group-gap, 12px);
  flex-wrap: wrap;
}
:is(.form-actions, .modal-actions, .dialog-actions) {
  margin-block-start: var(--button-section-gap, 16px);
}
.button-row > :is(button, .btn),
.button-actions > :is(button, .btn) { min-width: 0; }

@media (max-width: 480px) {
  :is(.button-row, .button-actions, .form-actions, .dialog-actions) > .btn {
    flex: 1 1 160px;
  }
}