.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mrev-hero-desktop-gap, 14px);
}

/*
 * Hero CTA supports two usage patterns:
 * 1) Wrapper mode: add .hero-cta to the parent and use Flatsome/MREV button classes.
 * 2) Standalone mode: add .hero-cta-primary / .hero-cta-secondary directly to a Button.
 * Standalone aliases keep existing UX Builder content working without a wrapper.
 */
.hero-cta .button,
.button.hero-cta-primary,
.button.hero-cta-secondary,
.button.mrev-cta-primary,
.button.mrev-cta-secondary {
  min-height: var(--mrev-hero-desktop-height, 40px);
  padding-left: var(--mrev-hero-desktop-padding, 18px);
  padding-right: var(--mrev-hero-desktop-padding, 18px);
  border-radius: var(--mrev-hero-radius, 3px);
  font-size: var(--mrev-hero-desktop-font, 13px);
  white-space: nowrap;
}

.hero-cta .button::after,
.button.hero-cta-primary::after,
.button.hero-cta-secondary::after,
.button.mrev-cta-primary::after,
.button.mrev-cta-secondary::after {
  content: "→";
  margin-left: var(--mrev-hero-arrow-margin, 10px);
}

.hero-cta .button.primary,
.hero-cta .button.mrev-cta-primary,
.hero-cta .button.hero-cta-primary,
.hero-cta .button.is-primary,
.hero-cta .mrev-cta-primary.button,
.hero-cta .hero-cta-primary.button,
.button.mrev-cta-primary,
.button.hero-cta-primary {
  background: var(--mrev-hero-primary-bg, #ef2929);
  border-color: var(--mrev-hero-primary-border, #ef2929);
  color: var(--mrev-hero-primary-text, #fff);
}

.hero-cta .button.primary:hover,
.hero-cta .button.mrev-cta-primary:hover,
.hero-cta .button.hero-cta-primary:hover,
.hero-cta .button.is-primary:hover,
.hero-cta .mrev-cta-primary.button:hover,
.hero-cta .hero-cta-primary.button:hover,
.button.mrev-cta-primary:hover,
.button.hero-cta-primary:hover {
  background: var(--mrev-hero-primary-hover, #d91f1f);
  border-color: var(--mrev-hero-primary-hover, #d91f1f);
}

.hero-cta .button.secondary,
.hero-cta .button.mrev-cta-secondary,
.hero-cta .button.hero-cta-secondary,
.hero-cta .button.is-outline,
.hero-cta .mrev-cta-secondary.button,
.hero-cta .hero-cta-secondary.button,
.button.mrev-cta-secondary,
.button.hero-cta-secondary {
  background: var(--mrev-hero-secondary-bg, #fff);
  border-color: var(--mrev-hero-secondary-border, #b7b7b7);
  color: var(--mrev-hero-secondary-text, #555);
}

.hero-cta .button.secondary:hover,
.hero-cta .button.mrev-cta-secondary:hover,
.hero-cta .button.hero-cta-secondary:hover,
.hero-cta .button.is-outline:hover,
.hero-cta .mrev-cta-secondary.button:hover,
.hero-cta .hero-cta-secondary.button:hover,
.button.mrev-cta-secondary:hover,
.button.hero-cta-secondary:hover {
  background: var(--mrev-hero-secondary-hover-bg, #f5f5f5);
  border-color: var(--mrev-hero-secondary-hover-border, #999);
  color: var(--mrev-hero-secondary-hover-text, #222);
}

@media (min-width: 550px) and (max-width: 1023px) {
  .hero-cta { gap: var(--mrev-hero-tablet-gap, 10px); }
  .hero-cta .button,
  .button.hero-cta-primary,
  .button.hero-cta-secondary,
  .button.mrev-cta-primary,
  .button.mrev-cta-secondary {
    min-height: var(--mrev-hero-tablet-height, 38px);
    padding-left: var(--mrev-hero-tablet-padding, 15px);
    padding-right: var(--mrev-hero-tablet-padding, 15px);
    font-size: var(--mrev-hero-tablet-font, 12px);
  }
}

@media (max-width: 549px) {
  .hero-cta { gap: var(--mrev-hero-mobile-gap, 8px); }
  .hero-cta .button,
  .button.hero-cta-primary,
  .button.hero-cta-secondary,
  .button.mrev-cta-primary,
  .button.mrev-cta-secondary {
    min-height: var(--mrev-hero-mobile-height, 36px);
    padding-left: var(--mrev-hero-mobile-padding, 12px);
    padding-right: var(--mrev-hero-mobile-padding, 12px);
    font-size: var(--mrev-hero-mobile-font, 11px);
  }
  .hero-cta .button::after,
  .button.hero-cta-primary::after,
  .button.hero-cta-secondary::after,
  .button.mrev-cta-primary::after,
  .button.mrev-cta-secondary::after {
    margin-left: var(--mrev-hero-arrow-margin-mobile, 7px);
  }
}

/*
 * Flatsome can apply button/text color with higher specificity (and in some
 * configurations !important). Hero CTA is explicitly opt-in, so enforce only
 * the text color for MREV-scoped CTA classes. Background/border remain normal
 * cascade rules to avoid unnecessary !important usage.
 */
.hero-cta .button.primary,
.hero-cta .button.primary > span,
.hero-cta .button.mrev-cta-primary,
.hero-cta .button.mrev-cta-primary > span,
.hero-cta .button.hero-cta-primary,
.hero-cta .button.hero-cta-primary > span,
.hero-cta .button.is-primary,
.hero-cta .button.is-primary > span,
.button.mrev-cta-primary,
.button.mrev-cta-primary > span,
.button.hero-cta-primary,
.button.hero-cta-primary > span {
  color: var(--mrev-hero-primary-text, #fff) !important;
}

.hero-cta .button.secondary,
.hero-cta .button.secondary > span,
.hero-cta .button.mrev-cta-secondary,
.hero-cta .button.mrev-cta-secondary > span,
.hero-cta .button.hero-cta-secondary,
.hero-cta .button.hero-cta-secondary > span,
.hero-cta .button.is-outline,
.hero-cta .button.is-outline > span,
.button.mrev-cta-secondary,
.button.mrev-cta-secondary > span,
.button.hero-cta-secondary,
.button.hero-cta-secondary > span {
  color: var(--mrev-hero-secondary-text, #555) !important;
}

.hero-cta .button.secondary:hover,
.hero-cta .button.secondary:hover > span,
.hero-cta .button.mrev-cta-secondary:hover,
.hero-cta .button.mrev-cta-secondary:hover > span,
.hero-cta .button.hero-cta-secondary:hover,
.hero-cta .button.hero-cta-secondary:hover > span,
.hero-cta .button.is-outline:hover,
.hero-cta .button.is-outline:hover > span,
.button.mrev-cta-secondary:hover,
.button.mrev-cta-secondary:hover > span,
.button.hero-cta-secondary:hover,
.button.hero-cta-secondary:hover > span {
  color: var(--mrev-hero-secondary-hover-text, #222) !important;
}

.button.hero-cta-primary::after,
.button.hero-cta-secondary::after,
.button.mrev-cta-primary::after,
.button.mrev-cta-secondary::after,
.hero-cta .button::after {
  color: currentColor;
}