/**
 * @file
 * The Buy now button, as it sits inside the theme's purchase card.
 *
 * Unlike the Products block, this form is placed inside markup the public theme
 * owns, so the button wears the theme's own `.cyclein-button--primary` and this
 * file only removes the form chrome around it. The fallbacks keep the button
 * usable under Claro or a bare theme, where those classes carry no styling.
 */

.cyclein-commerce-buy-now {
  margin: 0;
}

.cyclein-commerce-buy-now .form-actions {
  margin: 0;
}

/* The card's own primary link is full width (`.cyclein-buy-box__card >
   .cyclein-button--primary`), but that rule is a direct-child selector and this
   button sits inside a form, so match it here. */
.cyclein-commerce-buy-now__submit {
  cursor: pointer;
  /* A submit input does not inherit the page font the way the card's other
     actions (anchors) do, so ask for it explicitly. */
  font-family: inherit;
  inline-size: 100%;
  justify-content: center;
}

/* Submit inputs cannot render the theme's ::after arrow used by CTA links.
   Paint the same direction cue into the two repeated Training-page controls. */
.cyclein-hero__actions .cyclein-commerce-buy-now__submit,
.paragraph--cta-banner--purchase .cyclein-commerce-buy-now__submit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-position: right var(--space-24, 1.5rem) center;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-inline-end: var(--space-48, 3rem);
}

/* In the desktop hero the form is a shrink-to-fit flex item. Reserve the same
   horizontal room as the original link CTA so its painted arrow cannot sit on
   top of the centred input label. The stacked mobile form still stretches to
   the full actions-column width. */
.cyclein-hero__actions .cyclein-commerce-buy-now__submit {
  min-inline-size: 10.75rem;
}