
/* Button standard: capsule actions. Tabs, filters, pagination and calendar cells
   are independent components, not action-button aliases. */
:root {
  --ds-button-accent: var(--color-accent);
  --ds-button-accent-hover: var(--color-accent-hover);
  --ds-button-height: 48px;
  --ds-button-radius: 999px;
  --ds-button-icon-size: 44px;
}
.moto-design :is(
  .ds-button,
  .button,
  .about-button,
  .news-article__back,
  .article-detail__nav > a,
  .gallery-back,
  .calendar-event__nav > a,
  .calendar-event__hero .calendar-event__actions > a,
  .calendar-event__hero .calendar-event__actions > button,
  .calendar-event__hero .calendar-event__calendar-toggle,
  .calendar-add-event,
  .calendar-reset,
  .calendar-application__account-action,
  .calendar-application__form button,
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-studio__save,
  .moto-studio__back,
  .moto-studio__form-actions button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__reset,
  .moto-catalog__volume button,
  .moto-store-card__action,
  .moto-product__favorite,
  .moto-product__zoom,
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
):not([hidden]) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 8px;
  min-width: 0;
  min-height: var(--ds-button-height);
  height: auto;
  max-width: 100%;
  padding: 12px 24px;
  border: 1px solid var(--button-border, var(--ds-button-accent));
  border-radius: var(--ds-button-radius);
  background: var(--button-bg, transparent);
  color: var(--button-fg, var(--ds-button-accent));
  box-shadow: none;
  font: 700 14px/1.3 Manrope, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: middle;
  cursor: pointer;
  appearance: none;
  transform: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease;
}
.moto-design :is(
  .ds-button--primary,
  .button.primary,
  .about-button:not(.about-button--outline),
  .calendar-event__calendar-toggle,
  .calendar-application__account-action,
  .calendar-application__form button[type="submit"],
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__volume button
) {
  --button-bg: var(--ds-button-accent);
  --button-fg: var(--color-text-inverse);
  --button-border: var(--ds-button-accent);
  --button-hover-bg: var(--ds-button-accent-hover);
  --button-hover-fg: var(--color-text-inverse);
  --button-hover-border: var(--ds-button-accent-hover);
}
.moto-design :is(
  .ds-button--inverse,
  .button.ghost:not(.dark),
  .calendar-hostcms-form__reset
) {
  --button-bg: transparent;
  --button-fg: var(--color-text-inverse);
  --button-border: var(--color-border-inverse-strong);
  --button-hover-bg: rgba(var(--color-white-rgb), 0.12);
  --button-hover-fg: var(--color-text-inverse);
  --button-hover-border: var(--color-text-inverse);
}
.moto-design :is(
  .ds-button--secondary,
  .button.button--outline,
  .about-button.about-button--outline,
  .button.ghost.dark,
  .moto-studio__save
) {
  --button-bg: transparent;
  --button-fg: var(--ds-button-accent);
  --button-border: var(--ds-button-accent);
  --button-hover-bg: rgba(var(--color-accent-rgb), 0.08);
  --button-hover-fg: var(--ds-button-accent-hover);
  --button-hover-border: var(--ds-button-accent-hover);
}
.moto-design :is(
  .ds-button,
  .button,
  .about-button,
  .news-article__back,
  .article-detail__nav > a,
  .gallery-back,
  .calendar-event__nav > a,
  .calendar-event__hero .calendar-event__actions > a,
  .calendar-event__hero .calendar-event__actions > button,
  .calendar-event__hero .calendar-event__calendar-toggle,
  .calendar-add-event,
  .calendar-reset,
  .calendar-application__account-action,
  .calendar-application__form button,
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-studio__save,
  .moto-studio__back,
  .moto-studio__form-actions button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__reset,
  .moto-catalog__volume button,
  .moto-store-card__action,
  .moto-product__favorite,
  .moto-product__zoom,
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-loading) {
  background: var(--button-hover-bg, rgba(var(--color-accent-rgb), 0.08));
  color: var(--button-hover-fg, var(--ds-button-accent-hover));
  border-color: var(--button-hover-border, var(--ds-button-accent-hover));
  transform: none;
  box-shadow: none;
}
.moto-design :is(
  .ds-button,
  .button,
  .about-button,
  .news-article__back,
  .article-detail__nav > a,
  .gallery-back,
  .calendar-event__nav > a,
  .calendar-event__hero .calendar-event__actions > a,
  .calendar-event__hero .calendar-event__actions > button,
  .calendar-event__hero .calendar-event__calendar-toggle,
  .calendar-add-event,
  .calendar-reset,
  .calendar-application__account-action,
  .calendar-application__form button,
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-studio__save,
  .moto-studio__back,
  .moto-studio__form-actions button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__reset,
  .moto-catalog__volume button,
  .moto-store-card__action,
  .moto-product__favorite,
  .moto-product__zoom,
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
):active:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-loading) {
  box-shadow: inset 0 0 0 2px currentColor;
}
.moto-design :is(
  .ds-button,
  .button,
  .about-button,
  .news-article__back,
  .article-detail__nav > a,
  .gallery-back,
  .calendar-event__nav > a,
  .calendar-event__hero .calendar-event__actions > a,
  .calendar-event__hero .calendar-event__actions > button,
  .calendar-event__hero .calendar-event__calendar-toggle,
  .calendar-add-event,
  .calendar-reset,
  .calendar-application__account-action,
  .calendar-application__form button,
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-studio__save,
  .moto-studio__back,
  .moto-studio__form-actions button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__reset,
  .moto-catalog__volume button,
  .moto-store-card__action,
  .moto-product__favorite,
  .moto-product__zoom,
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
):focus-visible {
  outline: 3px solid var(--button-fg, var(--ds-button-accent));
  outline-offset: 4px;
}
.moto-design :is(
  .ds-button--primary,
  .button.primary,
  .about-button:not(.about-button--outline),
  .calendar-event__calendar-toggle,
  .calendar-application__account-action,
  .calendar-application__form button[type="submit"],
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__volume button
):focus-visible {
  outline-color: var(--ds-button-accent);
}
.moto-design :is(
  .ds-button,
  .button,
  .about-button,
  .news-article__back,
  .article-detail__nav > a,
  .gallery-back,
  .calendar-event__nav > a,
  .calendar-event__hero .calendar-event__actions > a,
  .calendar-event__hero .calendar-event__actions > button,
  .calendar-event__hero .calendar-event__calendar-toggle,
  .calendar-add-event,
  .calendar-reset,
  .calendar-application__account-action,
  .calendar-application__form button,
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-studio__save,
  .moto-studio__back,
  .moto-studio__form-actions button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__reset,
  .moto-catalog__volume button,
  .moto-store-card__action,
  .moto-product__favorite,
  .moto-product__zoom,
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
):is(:disabled, [aria-disabled="true"]) {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.moto-design :is(
  .ds-button--icon,
  .moto-store-card__action,
  .moto-product__favorite,
  .moto-product__zoom,
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
) {
  width: var(--ds-button-icon-size);
  height: var(--ds-button-icon-size);
  min-width: var(--ds-button-icon-size);
  min-height: var(--ds-button-icon-size);
  flex: 0 0 var(--ds-button-icon-size);
  align-self: center;
  padding: 0;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
}
.moto-design :is(
  .ds-button,
  .button,
  .about-button,
  .news-article__back,
  .article-detail__nav > a,
  .gallery-back,
  .calendar-event__nav > a,
  .calendar-event__hero .calendar-event__actions > a,
  .calendar-event__hero .calendar-event__actions > button,
  .calendar-event__hero .calendar-event__calendar-toggle,
  .calendar-add-event,
  .calendar-reset,
  .calendar-application__account-action,
  .calendar-application__form button,
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-studio__save,
  .moto-studio__back,
  .moto-studio__form-actions button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__reset,
  .moto-catalog__volume button,
  .moto-store-card__action,
  .moto-product__favorite,
  .moto-product__zoom,
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
):is(.ds-button--icon, .moto-store-card__action, .moto-product__favorite, .moto-product__zoom, .moto-studio__item-actions > a, .moto-studio__item-actions > button) {
  width: var(--ds-button-icon-size);
  height: var(--ds-button-icon-size);
  min-width: var(--ds-button-icon-size);
  min-height: var(--ds-button-icon-size);
  padding: 0;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
}
.moto-design :is(
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
) {
  --ds-button-height: 44px;
}
.moto-design :is(
  .ds-button,
  .button,
  .about-button,
  .news-article__back,
  .article-detail__nav > a,
  .gallery-back,
  .calendar-event__nav > a,
  .calendar-event__hero .calendar-event__actions > a,
  .calendar-event__hero .calendar-event__actions > button,
  .calendar-event__hero .calendar-event__calendar-toggle,
  .calendar-add-event,
  .calendar-reset,
  .calendar-application__account-action,
  .calendar-application__form button,
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-studio__save,
  .moto-studio__back,
  .moto-studio__form-actions button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__reset,
  .moto-catalog__volume button,
  .moto-store-card__action,
  .moto-product__favorite,
  .moto-product__zoom,
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
) > :is(svg, .moto-icon, .calendar-event__action-icon) {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.moto-design .calendar-add-event span { color: inherit; line-height: 1; }
.moto-design :is(
  .ds-button,
  .button,
  .about-button,
  .news-article__back,
  .article-detail__nav > a,
  .gallery-back,
  .calendar-event__nav > a,
  .calendar-event__hero .calendar-event__actions > a,
  .calendar-event__hero .calendar-event__actions > button,
  .calendar-event__hero .calendar-event__calendar-toggle,
  .calendar-add-event,
  .calendar-reset,
  .calendar-application__account-action,
  .calendar-application__form button,
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-studio__save,
  .moto-studio__back,
  .moto-studio__form-actions button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__reset,
  .moto-catalog__volume button,
  .moto-store-card__action,
  .moto-product__favorite,
  .moto-product__zoom,
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
):is([aria-busy="true"], .is-loading) {
  color: transparent;
  opacity: .75;
  cursor: wait;
  transform: none;
}
.moto-design :is(
  .ds-button,
  .button,
  .about-button,
  .news-article__back,
  .article-detail__nav > a,
  .gallery-back,
  .calendar-event__nav > a,
  .calendar-event__hero .calendar-event__actions > a,
  .calendar-event__hero .calendar-event__actions > button,
  .calendar-event__hero .calendar-event__calendar-toggle,
  .calendar-add-event,
  .calendar-reset,
  .calendar-application__account-action,
  .calendar-application__form button,
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-studio__save,
  .moto-studio__back,
  .moto-studio__form-actions button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__reset,
  .moto-catalog__volume button,
  .moto-store-card__action,
  .moto-product__favorite,
  .moto-product__zoom,
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
):is([aria-busy="true"], .is-loading) > * { visibility: hidden; }
.moto-design :is(
  .ds-button,
  .button,
  .about-button,
  .news-article__back,
  .article-detail__nav > a,
  .gallery-back,
  .calendar-event__nav > a,
  .calendar-event__hero .calendar-event__actions > a,
  .calendar-event__hero .calendar-event__actions > button,
  .calendar-event__hero .calendar-event__calendar-toggle,
  .calendar-add-event,
  .calendar-reset,
  .calendar-application__account-action,
  .calendar-application__form button,
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-studio__save,
  .moto-studio__back,
  .moto-studio__form-actions button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__reset,
  .moto-catalog__volume button,
  .moto-store-card__action,
  .moto-product__favorite,
  .moto-product__zoom,
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
):is([aria-busy="true"], .is-loading)::after {
  content: "";
  position: absolute;
  top: calc(50% - 9px);
  left: calc(50% - 9px);
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid var(--button-fg, var(--ds-button-accent));
  border-right-color: transparent;
  border-radius: 50%;
  pointer-events: none;
  animation: ds-button-spin 700ms linear infinite;
}
@keyframes ds-button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.moto-design :is(
  .ds-button,
  .button,
  .about-button,
  .news-article__back,
  .article-detail__nav > a,
  .gallery-back,
  .calendar-event__nav > a,
  .calendar-event__hero .calendar-event__actions > a,
  .calendar-event__hero .calendar-event__actions > button,
  .calendar-event__hero .calendar-event__calendar-toggle,
  .calendar-add-event,
  .calendar-reset,
  .calendar-application__account-action,
  .calendar-application__form button,
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-studio__save,
  .moto-studio__back,
  .moto-studio__form-actions button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__reset,
  .moto-catalog__volume button,
  .moto-store-card__action,
  .moto-product__favorite,
  .moto-product__zoom,
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
) { transition: none; }
.moto-design :is(
  .ds-button,
  .button,
  .about-button,
  .news-article__back,
  .article-detail__nav > a,
  .gallery-back,
  .calendar-event__nav > a,
  .calendar-event__hero .calendar-event__actions > a,
  .calendar-event__hero .calendar-event__actions > button,
  .calendar-event__hero .calendar-event__calendar-toggle,
  .calendar-add-event,
  .calendar-reset,
  .calendar-application__account-action,
  .calendar-application__form button,
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-studio__save,
  .moto-studio__back,
  .moto-studio__form-actions button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__reset,
  .moto-catalog__volume button,
  .moto-store-card__action,
  .moto-product__favorite,
  .moto-product__zoom,
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
)::after { animation: none; }
}
.moto-design .moto-studio__item-actions { gap: 8px; }
.moto-design .moto-product__controls { align-items: stretch; }
.moto-design .calendar-event__hero .calendar-event__actions > button[data-event-share] { font-size: 14px; }

/* Mobile action buttons fill their immediate content container. */
@media (max-width: 720px) {
  .moto-design :is(
  .ds-button,
  .button,
  .about-button,
  .news-article__back,
  .article-detail__nav > a,
  .gallery-back,
  .calendar-event__nav > a,
  .calendar-event__hero .calendar-event__actions > a,
  .calendar-event__hero .calendar-event__actions > button,
  .calendar-event__hero .calendar-event__calendar-toggle,
  .calendar-add-event,
  .calendar-reset,
  .calendar-application__account-action,
  .calendar-application__form button,
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-studio__save,
  .moto-studio__back,
  .moto-studio__form-actions button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__reset,
  .moto-catalog__volume button,
  .moto-store-card__action,
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
,
  .subscribe-form button[type="submit"],
  .request-form button[type="submit"]
):not([hidden], .ds-button--icon) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    flex-shrink: 0;
    align-self: stretch;
    justify-self: stretch;
    grid-column: 1 / -1;
  }
  .moto-design :has(> :is(
  .ds-button,
  .button,
  .about-button,
  .news-article__back,
  .article-detail__nav > a,
  .gallery-back,
  .calendar-event__nav > a,
  .calendar-event__hero .calendar-event__actions > a,
  .calendar-event__hero .calendar-event__actions > button,
  .calendar-event__hero .calendar-event__calendar-toggle,
  .calendar-add-event,
  .calendar-reset,
  .calendar-application__account-action,
  .calendar-application__form button,
  .calendar-photo-report__link,
  .gallery-event-link__action,
  .club-ownership__action,
  .club-change-form button,
  .moto-cart-button,
  .moto-product__cart,
  .moto-auth__submit,
  .moto-studio__create-card button,
  .moto-studio__save,
  .moto-studio__back,
  .moto-studio__form-actions button,
  .moto-profile__application-grid button,
  .profile-application-form > button,
  .moto-catalog__reset,
  .moto-catalog__volume button,
  .moto-store-card__action,
  .moto-studio__item-actions > a,
  .moto-studio__item-actions > button
,
  .subscribe-form button[type="submit"],
  .request-form button[type="submit"]
):not([hidden], .ds-button--icon)) { flex-wrap: wrap; }
  .moto-design .calendar-event__hero .calendar-event__actions { grid-template-columns: minmax(0, 1fr); }
  .moto-design .calendar-event__calendar { width: 100%; }
  .moto-design :is(.calendar-section-heading, .calendar-results__header) { display: flex; flex-direction: column; align-items: stretch; }
}
