.affiliate-promo {
  box-sizing: border-box;
  width: 100%;
  min-height: 268px;
  margin: 32px 0;
  padding: 20px;
  overflow: hidden;
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, #d0d7e0);
  border-radius: 10px;
  box-shadow: var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.08));
}

/* The browser's hidden state wins over layout styles and reserved height. */
.affiliate-promo[hidden] {
  display: none !important;
}

.affiliate-promo__label {
  margin: 0 0 14px;
  color: var(--color-text-secondary, #5a6a7a);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 700;
  line-height: 1.5;
}

.affiliate-promo__content {
  position: relative;
  width: 100%;
  min-height: 220px;
}

/* Do not alter, move, or rebuild the original Moshimo markup. This only
   prevents a partially-rendered card from flashing over the placeholder. */
.affiliate-promo:not(.is-ready) .affiliate-promo__content > :not(.affiliate-promo__placeholder) {
  visibility: hidden !important;
}

.affiliate-promo.is-ready .affiliate-promo__content > :not(.affiliate-promo__placeholder) {
  visibility: visible !important;
}

.affiliate-promo__content > * {
  max-width: 100%;
}

.affiliate-promo__content > div[id^="msmaflink-"] {
  width: 100%;
}

.affiliate-promo__content img {
  max-width: 100%;
  height: auto;
}

.affiliate-promo.is-ready .affiliate-promo__placeholder {
  display: none;
}

.affiliate-promo__placeholder {
  width: 100%;
  min-height: 180px;
  border-radius: 8px;
  background: linear-gradient(
    100deg,
    var(--color-bg, #f4f6f9) 30%,
    var(--color-accent-light, #e8f1fd) 50%,
    var(--color-bg, #f4f6f9) 70%
  );
  background-size: 300% 100%;
  animation: affiliate-placeholder 1.5s ease-in-out infinite;
}

@keyframes affiliate-placeholder {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (max-width: 600px) {
  .affiliate-promo {
    min-height: 428px;
    margin: 24px 0;
    padding: 16px;
  }

  .affiliate-promo__content {
    min-height: 380px;
  }

  .affiliate-promo__placeholder {
    min-height: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .affiliate-promo__placeholder {
    animation: none;
  }
}