/* Container et cartes (inchangé) */
.swms-upsell {
  display: flex;
  gap: 2em;
  margin: 2em 0;
  flex-wrap: wrap;
}
.swms-upsell-item {
  flex: 1;
  padding: 1em;
  border: 1px solid #ccd0d4;
  text-align: center;
  background: #f9f9f9;
}
.swms-upsell-item h3 {
  margin-top: 0;
}
.swms-upsell-item p {
  /* Espace sous le texte */
  margin-bottom: 0.5em;
}

.swms-upsell-item .button {
  /* Même espace au-dessus du bouton */
  margin-top: 0.5em;
}

/* -----------------------------
   Boutons “Purchase Pro” et “Purchase Admin”
   ----------------------------- */
/* On cible à la fois button-primary et button-secondary */
.swms-upsell-item a.button.button-primary,
.swms-upsell-item a.button.button-secondary {
  background-color: #547cd9 !important;
  border-color:     #547cd9 !important;
  color:            #ffffff !important;
  padding:          0.75em 1.5em !important;
  border-radius:    4px !important;
  font-weight:      500 !important;
  display:          inline-flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  text-decoration:  none !important;
  transition:       background-color 0.2s ease, border-color 0.2s ease !important;
}
/* Icône à droite du texte (si tu utilises <svg>, dashicon ou <img>) */
.swms-upsell-item a.button.button-primary svg,
.swms-upsell-item a.button.button-secondary svg,
.swms-upsell-item a.button.button-primary .dashicons,
.swms-upsell-item a.button.button-secondary .dashicons,
.swms-upsell-item a.button.button-primary img,
.swms-upsell-item a.button.button-secondary img {
  margin-left: 0.5em;
  height:      1.2em;
  width:       auto;
}

/* État hover */
.swms-upsell-item a.button.button-primary:hover,
.swms-upsell-item a.button.button-secondary:hover {
  background-color: #ffb400 !important;
  border-color:     #ffb400 !important;
  color:            #ffffff !important;
}