/* Estilos locais do bloco de cartões salvos. O CSS compartilhado permanece inalterado. */
    .saved-cards-section {
      margin-top: clamp(2.25rem, 5vw, 4rem);
      scroll-margin-top: 92px;
    }

    .saved-cards-panel {
      overflow: hidden;
      border: 1px solid var(--color_border_default);
      border-radius: var(--library-radius-lg, var(--card-radius-lg));
      background: var(--color_surface_card_bg);
      box-shadow: var(--library-shadow-soft, var(--card-shadow));
    }

    .saved-cards-panel__intro {
      display: flex;
      gap: .85rem;
      align-items: flex-start;
      padding: 1rem 1.15rem;
      border-bottom: 1px solid var(--color_border_default);
      background: var(--card-surface-soft);
    }

    .saved-cards-panel__intro > i {
      flex: 0 0 auto;
      display: grid;
      width: 2rem;
      height: 2rem;
      place-items: center;
      border-radius: 50%;
      color: var(--color_cta_base_blue);
      background: color-mix(in srgb, var(--color_cta_base_blue) 9%, var(--color_surface_card_bg));
      font-size: 1rem;
    }

    .saved-cards-panel__intro p {
      max-width: 900px;
      margin: 0;
      color: var(--color_text_notes);
      font-size: .82rem;
      line-height: 1.5;
    }

    .saved-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      padding: 1.15rem;
    }

    .saved-cards-grid[hidden] {
      display: none;
    }

    .saved-card {
      position: relative;
      min-width: 0;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--saved-card-accent, var(--color_cta_base_blue)) 24%, var(--color_border_default));
      border-radius: var(--card-radius);
      background:
        radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--saved-card-accent, var(--color_cta_base_blue)) 14%, transparent), transparent 34%),
        linear-gradient(145deg, var(--color_surface_card_bg), var(--card-surface-soft));
      box-shadow: 0 1px 2px rgba(25, 38, 58, .035), 0 7px 20px rgba(25, 38, 58, .055);
      transition: var(--card-transition);
    }

    .saved-card:hover {
      border-color: color-mix(in srgb, var(--saved-card-accent, var(--color_cta_base_blue)) 40%, var(--color_border_default));
      box-shadow: var(--card-shadow-hover);
      transform: translateY(-2px);
    }

    .saved-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 4px;
      background: var(--saved-card-accent, var(--color_cta_base_blue));
    }

    .saved-card__body {
      display: grid;
      gap: 1rem;
      min-height: 168px;
      padding: 1rem 1rem .85rem 1.15rem;
    }

    .saved-card__head,
    .saved-card__number,
    .saved-card__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
    }

    .saved-card__brand {
      overflow: hidden;
      color: var(--color_text_heading);
      font-size: .8rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .saved-card__token {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      color: var(--color_text_muted);
      font-size: .65rem;
      font-weight: 700;
      white-space: nowrap;
    }

    .saved-card__chip {
      display: grid;
      width: 2.15rem;
      height: 1.55rem;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--color_cta_base) 45%, #8a5a00);
      border-radius: .28rem;
      color: #7a5200;
      background: linear-gradient(135deg, #ffe4a3, #e9b84f);
      font-size: .82rem;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
    }

    .saved-card__digits {
      color: var(--color_text_heading);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: clamp(1rem, .85rem + .4vw, 1.25rem);
      font-weight: 800;
      letter-spacing: .08em;
      white-space: nowrap;
    }

    .saved-card__label {
      display: block;
      margin-bottom: .12rem;
      color: var(--color_text_muted);
      font-size: .61rem;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .saved-card__ending {
      color: var(--color_text_heading);
      font-size: .78rem;
      font-weight: 700;
    }

    .saved-card__delete-form {
      margin-left: auto;
    }

    .saved-card__delete {
      display: inline-flex;
      gap: .35rem;
      align-items: center;
      padding: .35rem .45rem;
      border: 0;
      border-radius: .35rem;
      color: #8d3131;
      background: transparent;
      font-size: .7rem;
      font-weight: 800;
      line-height: 1.1;
      transition: color .15s, background .15s;
      cursor: pointer;
    }

    .saved-card__delete:hover,
    .saved-card__delete:focus-visible {
      color: #712626;
      background: #fdeaea;
      outline: 0;
    }

    .saved-card__delete:focus-visible {
      box-shadow: 0 0 0 .18rem rgba(141, 49, 49, .18);
    }

    .saved-card.is-removing {
      pointer-events: none;
      animation: savedCardRemove .24s ease forwards;
    }

    .saved-card__delete.is-waiting {
      opacity: .65;
      pointer-events: none;
    }

    .saved-card__delete.is-waiting i {
      animation: savedCardSpin .7s linear infinite;
    }

    .saved-cards-empty {
      display: grid;
      gap: .35rem;
      place-items: center;
      padding: 2rem 1rem;
      color: var(--color_text_muted);
      text-align: center;
    }

    .saved-cards-empty[hidden] {
      display: none;
    }

    .saved-cards-empty i {
      color: var(--color_brand_primary_light);
      font-size: 1.8rem;
    }

    .saved-cards-empty strong {
      color: var(--color_text_heading);
      font-size: .9rem;
    }

    .saved-cards-empty span {
      max-width: 52ch;
      font-size: .76rem;
      line-height: 1.45;
    }

    @keyframes savedCardRemove {
      to {
        opacity: 0;
        transform: scale(.97) translateY(-4px);
      }
    }

    @keyframes savedCardSpin {
      to { transform: rotate(360deg); }
    }

    @media (max-width: 991.98px) {
      .saved-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 575.98px) {
      .saved-cards-panel__intro {
        padding: .9rem;
      }

      .saved-cards-grid {
        grid-template-columns: 1fr;
        padding: .9rem;
      }

      .saved-card__body {
        min-height: 156px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .saved-card,
      .saved-card__delete {
        transition: none;
      }

      .saved-card.is-removing,
      .saved-card__delete.is-waiting i {
        animation-duration: .01ms;
      }
    }

        /* Reduz o espaço vertical ocupado pela seção. */
        .saved-cards-section {
          margin-top: clamp(1.5rem, 3vw, 2.5rem);
        }

        /* Mantém o agrupamento, mas com menos peso visual. */
        .saved-cards-panel {
          border-radius: var(--card-radius);
          box-shadow: 0 1px 2px rgba(25, 38, 58, .025),
                      0 4px 12px rgba(25, 38, 58, .04);
        }

        .saved-cards-panel__intro {
          gap: .6rem;
          padding: .65rem .8rem;
        }

        .saved-cards-panel__intro > i {
          width: 1.65rem;
          height: 1.65rem;
          font-size: .78rem;
        }

        .saved-cards-panel__intro p {
          max-width: 80ch;
          font-size: .75rem;
          line-height: 1.4;
        }

        /*
         * As colunas têm largura controlada. Assim, poucos cartões não se alargam
         * excessivamente e cinco cartões podem caber em uma única linha em telas largas.
         */
        .saved-cards-grid {
          grid-template-columns: repeat(auto-fill, minmax(210px, 245px));
          justify-content: start;
          gap: .7rem;
          padding: .8rem;
        }

        .saved-card {
          width: 100%;
          border-color: var(--color_border_default);
          border-radius: .6rem;
          background:
            radial-gradient(
              circle at 92% 10%,
              color-mix(
                in srgb,
                var(--saved-card-accent, var(--color_cta_base_blue)) 22%,
                transparent
              ),
              transparent 42%
            ),
            var(--color_surface_card_bg);
          box-shadow: 0 1px 2px rgba(25, 38, 58, .03),
                      0 4px 10px rgba(25, 38, 58, .035);
        }

        .saved-card:hover {
          border-color: color-mix(
            in srgb,
            var(--saved-card-accent, var(--color_cta_base_blue)) 28%,
            var(--color_border_default)
          );
          box-shadow: 0 2px 5px rgba(25, 38, 58, .045),
                      0 7px 15px rgba(25, 38, 58, .06);
          transform: translateY(-1px);
        }

        /* Troca a faixa lateral dominante por um detalhe superior discreto. */
        .saved-card::before {
          inset: 0 0 auto;
          width: auto;
          height: 3px;
          background: color-mix(
            in srgb,
            var(--saved-card-accent, var(--color_cta_base_blue)) 62%,
            var(--color_surface_card_bg)
          );
        }

        .saved-card__body {
          gap: .55rem;
          min-height: 112px;
          padding: .7rem .72rem .62rem;
        }

        .saved-card__head,
        .saved-card__number,
        .saved-card__footer {
          gap: .5rem;
        }

        .saved-card__brand {
          font-size: .7rem;
          letter-spacing: .045em;
        }

        .saved-card__token {
          gap: .22rem;
          font-size: .56rem;
        }

        .saved-card__chip {
          width: 1.65rem;
          height: 1.18rem;
          border-radius: .22rem;
          font-size: .62rem;
        }

        .saved-card__digits {
          font-size: .95rem;
          letter-spacing: .065em;
        }

        .saved-card__label {
          margin-bottom: .05rem;
          font-size: .52rem;
        }

        .saved-card__ending {
          font-size: .68rem;
        }

        .saved-card__delete {
          gap: .25rem;
          padding: .25rem .3rem;
          font-size: .61rem;
          font-weight: 750;
        }

        .saved-cards-empty {
          padding: 1.35rem .8rem;
        }

        .saved-cards-empty i {
          font-size: 1.4rem;
        }

        /* Em telas estreitas, o cartão volta a ocupar a largura disponível. */
        @media (max-width: 575.98px) {
          .saved-cards-grid {
            grid-template-columns: 1fr;
            gap: .6rem;
            padding: .7rem;
          }

          .saved-card {
            max-width: none;
          }

          .saved-card__body {
            min-height: 108px;
          }
        }

.subscription-configurator .plan-choice__full-price {
  display: block;
  width: max-content;
  margin: 0 0 0.1rem;
  color: var(--color_text_heading);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.15;
  opacity: 0.58;
  text-decoration-line: line-through;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
}

.subscription-configurator .plan-choice__full-price[hidden] {
  display: none !important;
}

.subscription-configurator .subscription-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  width: 100%;
  min-width: 0;
}

.subscription-configurator
.subscription-sidebar
> .subscription-summary,
.subscription-configurator
.subscription-sidebar
> .subscription-adjustments {
  width: 100%;
  min-width: 0;
}

@media (min-width: 1200px) and (min-height: 821px) {
  .subscription-configurator .subscription-sidebar {
    position: sticky !important;
    top: 92px !important;
    align-self: start;

    max-height: none !important;
    overflow: visible !important;
  }

  .subscription-configurator
  .subscription-sidebar
  > .subscription-summary {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  .subscription-configurator
  .subscription-sidebar
  > .subscription-adjustments {
    display: grid !important;
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;

    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .subscription-configurator .subscription-sidebar {
    position: static !important;
    top: auto !important;
    align-self: start;

    max-height: none !important;
    overflow: visible !important;
  }

  .subscription-configurator
  .subscription-sidebar
  > .subscription-summary {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  .subscription-configurator
  .subscription-sidebar
  > .subscription-adjustments {
    display: grid !important;
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;

    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }
}

@media (min-width: 1200px) and (max-height: 820px) {
  .subscription-configurator .subscription-sidebar {
    position: static !important;
    top: auto !important;
    align-self: start;

    max-height: none !important;
    overflow: visible !important;
  }

  .subscription-configurator
  .subscription-sidebar
  > .subscription-summary {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  .subscription-configurator
  .subscription-sidebar
  > .subscription-adjustments {
    display: grid !important;
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;

    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }
}

@media (max-width: 991.98px) {
  .subscription-configurator .subscription-sidebar {
    position: static !important;
    top: auto !important;
    align-self: auto !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .75rem;

    width: 100%;
    min-width: 0;
    max-height: none !important;

    overflow: visible !important;
    padding-right: 0 !important;
  }

  .subscription-configurator
  .subscription-sidebar
  > .subscription-summary {
    position: static !important;
    top: auto !important;
    z-index: auto !important;

    width: 100%;
    min-width: 0;
  }

  .subscription-configurator
  .subscription-sidebar
  > .subscription-adjustments {
    display: grid !important;
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;

    width: 100%;
    min-width: 0;
    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
    transform: none !important;
  }
}

@media (max-width: 575.98px) {
  .subscription-configurator .subscription-adjustments {
    display: grid !important;
    gap: .75rem;

    width: 100%;
    min-width: 0;
    padding: .72rem;
  }

  .subscription-configurator
  .subscription-adjustments
  .subscription-currency--compact {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .4rem;

    width: 100%;
    min-width: 0;
  }

  .subscription-configurator
  .subscription-adjustments
  .subscription-currency--compact
  .form-select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .subscription-configurator
  .subscription-coupon {
    display: grid !important;
    width: 100%;
    min-width: 0;
  }

  .subscription-configurator
  .subscription-coupon__control {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;

    width: 100%;
    min-width: 0;
  }

  .subscription-configurator
  .subscription-coupon__control
  > .form-control {
    display: block;
    flex: 1 1 auto !important;

    width: 1% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .subscription-configurator
  .subscription-coupon__control
  > .btn {
    flex: 0 0 auto !important;

    width: auto;
    min-width: 76px;
    padding-inline: .8rem;

    white-space: nowrap;
  }
}


@media (max-width: 359.98px) {
  .subscription-configurator
  .subscription-coupon__control
  > .btn {
    min-width: 68px;
    padding-inline: .55rem;
    font-size: .78rem;
  }
}

.subscription-configurator .plan-choice__features {
  margin: .7rem 0 0;
  align-content: start;
}


/* ==========================================================================
   PERÍODOS — GRID DE ATÉ 3 COLUNAS
   Mantém o visual original e altera somente dimensões e tipografia.
   ========================================================================== */

.subscription-configurator .period-choice-grid {
  /*
   * AJUSTES RÁPIDOS:
   *
   * Aumente ou diminua estes valores para testar visualmente.
   */
  --period-card-height: 90px;
  --period-title-size: 0.94rem;
  --period-saving-size: 0.65rem;
  --period-badge-size: 0.7rem;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.75rem;
  align-items: stretch;
}

.subscription-configurator .period-choice {
  display: flex;
  min-width: 0;
  height: 100%;
}

.subscription-configurator .period-choice__label,
.subscription-configurator
.period-choice--bonus
.period-choice__label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-width: 0;
  min-height: var(--period-card-height);
  height: 100%;

  padding: 0.82rem 0.8rem;
}

.subscription-configurator .period-choice__label > span {
  width: 100%;
  min-width: 0;
  text-align: center;
}

/* Nome do período: Mensal, 3 meses, 1 ano etc. */
.subscription-configurator .period-choice__months {
  font-size: var(--period-title-size);
  line-height: 1.15;
}

/* Texto secundário: economia, promoção e meses grátis. */
.subscription-configurator .period-choice__saving {
  font-size: var(--period-saving-size);
  line-height: 1.3;
}

/* Selo superior dos períodos com bônus. */
.subscription-configurator .period-choice__bonus-badge {
  font-size: var(--period-badge-size);
}


/* Tablets e telas intermediárias: duas colunas. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .subscription-configurator .period-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    --period-card-height: 100px;
  }
}


/* Celulares: uma coluna. */
@media (max-width: 575.98px) {
  .subscription-configurator .period-choice-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;

    --period-card-height: 88px;
    --period-title-size: 1rem;
    --period-saving-size: 0.75rem;
  }
}


.purchase-progress {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 900px;
  gap: .5rem;
}

.purchase-progress__item {
  flex: 1 1 0;
  min-width: 0;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Sobrescreve a largura mais restrita usada nas páginas de pagamento. */
.payment-flow-hero .purchase-progress {
  width: 100%;
  max-width: 900px;
}

/* Ajustes para telas pequenas, mantendo todas as etapas na mesma linha. */
@media (max-width: 575.98px) {
  .purchase-progress {
    gap: .22rem;
  }

  .purchase-progress__item {
    padding-top: .62rem;
    font-size: .6rem;
    line-height: 1.15;
  }

  .purchase-progress__item::before {
    right: .08rem;
    left: .08rem;
    height: 3px;
  }
}