/* As variáveis-base chegam inline; os modos responsivos precisam prevalecer sobre elas. */
@media (max-width: 900px) {
  .sp-pricing-offer {
    --pricing-background: var(--pricing-background-tablet) !important;
    --pricing-padding-x: var(--pricing-padding-x-tablet) !important;
    --pricing-padding-y: var(--pricing-padding-y-tablet) !important;
    --pricing-badge-background: var(--pricing-badge-background-tablet) !important;
    --pricing-badge-color: var(--pricing-badge-color-tablet) !important;
    --pricing-badge-max: var(--pricing-badge-max-tablet) !important;
    --pricing-badge-size: var(--pricing-badge-size-tablet) !important;
    --pricing-badge-padding-y: var(--pricing-badge-padding-y-tablet) !important;
    --pricing-badge-radius: var(--pricing-badge-radius-tablet) !important;
    --pricing-badge-space: var(--pricing-badge-space-tablet) !important;
    --pricing-heading-color: var(--pricing-heading-color-tablet) !important;
    --pricing-heading-size: var(--pricing-heading-size-tablet) !important;
    --pricing-heading-space: var(--pricing-heading-space-tablet) !important;
    --pricing-gap: var(--pricing-gap-tablet) !important;
    --pricing-columns: var(--pricing-columns-tablet) !important;
  }

  .sp-pricing-offer .sp-builder-pricing article {
    --plan-background: var(--plan-background-tablet) !important;
    --plan-border-color: var(--plan-border-color-tablet) !important;
    --plan-border-width: var(--plan-border-width-tablet) !important;
    --plan-radius: var(--plan-radius-tablet) !important;
    --plan-padding-x: var(--plan-padding-x-tablet) !important;
    --plan-padding-y: var(--plan-padding-y-tablet) !important;
    --plan-width: var(--plan-width-tablet) !important;
    --plan-name-background: var(--plan-name-background-tablet) !important;
    --plan-name-color: var(--plan-name-color-tablet) !important;
    --plan-name-size: var(--plan-name-size-tablet) !important;
    --plan-name-padding-y: var(--plan-name-padding-y-tablet) !important;
    --plan-name-radius: var(--plan-name-radius-tablet) !important;
    --plan-badge-background: var(--plan-badge-background-tablet) !important;
    --plan-badge-color: var(--plan-badge-color-tablet) !important;
    --plan-badge-offset: var(--plan-badge-offset-tablet) !important;
    --plan-badge-radius: var(--plan-badge-radius-tablet) !important;
    --plan-badge-padding-x: var(--plan-badge-padding-x-tablet) !important;
    --plan-badge-padding-y: var(--plan-badge-padding-y-tablet) !important;
    --plan-image-width: var(--plan-image-width-tablet) !important;
    --plan-image-max: var(--plan-image-max-tablet) !important;
    --plan-image-top: var(--plan-image-top-tablet) !important;
    --plan-image-bottom: var(--plan-image-bottom-tablet) !important;
    --plan-list-color: var(--plan-list-color-tablet) !important;
    --plan-list-icon: var(--plan-list-icon-tablet) !important;
    --plan-list-size: var(--plan-list-size-tablet) !important;
    --plan-list-gap: var(--plan-list-gap-tablet) !important;
    --plan-list-icon-gap: var(--plan-list-icon-gap-tablet) !important;
    --plan-separator: var(--plan-separator-tablet) !important;
    --plan-separator-width: var(--plan-separator-width-tablet) !important;
    --plan-separator-opacity: var(--plan-separator-opacity-tablet) !important;
    --plan-old-price-color: var(--plan-old-price-color-tablet) !important;
    --plan-old-price-size: var(--plan-old-price-size-tablet) !important;
    --plan-price-color: var(--plan-price-color-tablet) !important;
    --plan-price-size: var(--plan-price-size-tablet) !important;
    --plan-text-color: var(--plan-text-color-tablet) !important;
    --plan-text-size: var(--plan-text-size-tablet) !important;
    --plan-button-background: var(--plan-button-background-tablet) !important;
    --plan-button-color: var(--plan-button-color-tablet) !important;
    --plan-button-size: var(--plan-button-size-tablet) !important;
    --plan-button-padding-y: var(--plan-button-padding-y-tablet) !important;
    --plan-button-radius: var(--plan-button-radius-tablet) !important;
    --plan-banner-width: var(--plan-banner-width-tablet) !important;
    --plan-banner-top: var(--plan-banner-top-tablet) !important;
    --plan-seal-color: var(--plan-seal-color-tablet) !important;
    --plan-seal-size: var(--plan-seal-size-tablet) !important;
    --plan-seal-gap: var(--plan-seal-gap-tablet) !important;
  }
}

@media (max-width: 720px) {
  .sp-pricing-offer {
    --pricing-background: var(--pricing-background-mobile) !important;
    --pricing-padding-x: var(--pricing-padding-x-mobile) !important;
    --pricing-padding-y: var(--pricing-padding-y-mobile) !important;
    --pricing-badge-background: var(--pricing-badge-background-mobile) !important;
    --pricing-badge-color: var(--pricing-badge-color-mobile) !important;
    --pricing-badge-max: var(--pricing-badge-max-mobile) !important;
    --pricing-badge-size: var(--pricing-badge-size-mobile) !important;
    --pricing-badge-padding-y: var(--pricing-badge-padding-y-mobile) !important;
    --pricing-badge-radius: var(--pricing-badge-radius-mobile) !important;
    --pricing-badge-space: var(--pricing-badge-space-mobile) !important;
    --pricing-heading-color: var(--pricing-heading-color-mobile) !important;
    --pricing-heading-size: var(--pricing-heading-size-mobile) !important;
    --pricing-heading-space: var(--pricing-heading-space-mobile) !important;
    --pricing-gap: var(--pricing-gap-mobile) !important;
    --pricing-columns: var(--pricing-columns-mobile) !important;
  }

  .sp-pricing-offer .sp-builder-pricing article {
    --plan-background: var(--plan-background-mobile) !important;
    --plan-border-color: var(--plan-border-color-mobile) !important;
    --plan-border-width: var(--plan-border-width-mobile) !important;
    --plan-radius: var(--plan-radius-mobile) !important;
    --plan-padding-x: var(--plan-padding-x-mobile) !important;
    --plan-padding-y: var(--plan-padding-y-mobile) !important;
    --plan-width: var(--plan-width-mobile) !important;
    --plan-name-background: var(--plan-name-background-mobile) !important;
    --plan-name-color: var(--plan-name-color-mobile) !important;
    --plan-name-size: var(--plan-name-size-mobile) !important;
    --plan-name-padding-y: var(--plan-name-padding-y-mobile) !important;
    --plan-name-radius: var(--plan-name-radius-mobile) !important;
    --plan-badge-background: var(--plan-badge-background-mobile) !important;
    --plan-badge-color: var(--plan-badge-color-mobile) !important;
    --plan-badge-offset: var(--plan-badge-offset-mobile) !important;
    --plan-badge-radius: var(--plan-badge-radius-mobile) !important;
    --plan-badge-padding-x: var(--plan-badge-padding-x-mobile) !important;
    --plan-badge-padding-y: var(--plan-badge-padding-y-mobile) !important;
    --plan-image-width: var(--plan-image-width-mobile) !important;
    --plan-image-max: var(--plan-image-max-mobile) !important;
    --plan-image-top: var(--plan-image-top-mobile) !important;
    --plan-image-bottom: var(--plan-image-bottom-mobile) !important;
    --plan-list-color: var(--plan-list-color-mobile) !important;
    --plan-list-icon: var(--plan-list-icon-mobile) !important;
    --plan-list-size: var(--plan-list-size-mobile) !important;
    --plan-list-gap: var(--plan-list-gap-mobile) !important;
    --plan-list-icon-gap: var(--plan-list-icon-gap-mobile) !important;
    --plan-separator: var(--plan-separator-mobile) !important;
    --plan-separator-width: var(--plan-separator-width-mobile) !important;
    --plan-separator-opacity: var(--plan-separator-opacity-mobile) !important;
    --plan-old-price-color: var(--plan-old-price-color-mobile) !important;
    --plan-old-price-size: var(--plan-old-price-size-mobile) !important;
    --plan-price-color: var(--plan-price-color-mobile) !important;
    --plan-price-size: var(--plan-price-size-mobile) !important;
    --plan-text-color: var(--plan-text-color-mobile) !important;
    --plan-text-size: var(--plan-text-size-mobile) !important;
    --plan-button-background: var(--plan-button-background-mobile) !important;
    --plan-button-color: var(--plan-button-color-mobile) !important;
    --plan-button-size: var(--plan-button-size-mobile) !important;
    --plan-button-padding-y: var(--plan-button-padding-y-mobile) !important;
    --plan-button-radius: var(--plan-button-radius-mobile) !important;
    --plan-banner-width: var(--plan-banner-width-mobile) !important;
    --plan-banner-top: var(--plan-banner-top-mobile) !important;
    --plan-seal-color: var(--plan-seal-color-mobile) !important;
    --plan-seal-size: var(--plan-seal-size-mobile) !important;
    --plan-seal-gap: var(--plan-seal-gap-mobile) !important;
  }
}