/* Post-purchase offer card: a centred panel whose own color scheme paints the surface, a flag bar in
   a second scheme, and a two-track media/body grid that collapses to one column on narrow screens.
   Type, pills and the quiet text button are the shared theme primitives; only the card geometry,
   the flag bar and the body rhythm are section-owned. */
.post-purchase-offer {
  display: block;
  background: rgba(var(--color-background));
  color: rgba(var(--color-text));
  padding-top: var(--ppo-pad-top, 50px);
  padding-bottom: var(--ppo-pad-bottom, 110px);
}

/* The contract keys the card, so the page rhythm stays on the section root and the wrap. */
.post-purchase-offer__card {
  display: block;
  max-width: var(--ppo-card-width, 900px);
  margin-inline: auto;
  background: rgba(var(--color-background));
  color: rgba(var(--color-text));
  border-radius: var(--ppo-card-radius, 28px);
  overflow: hidden;
}

/* ---------- Flag bar ---------- */
.post-purchase-offer__flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ppo-flag-gap, 14px);
  background: rgba(var(--color-background));
  color: rgba(var(--color-text));
  padding: var(--ppo-flag-pad-block, 16px) var(--ppo-flag-pad-inline, 28px);
  font: 700 var(--ppo-flag-size, 12px) / 1.4 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Both halves are flex items, so they blockify and wrap onto their own lines together. */
.post-purchase-offer__flag-note,
.post-purchase-offer__flag-timer { display: block; }

/* ---------- Media / body grid ---------- */
.post-purchase-offer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ppo-grid-min, 280px), 1fr));
}
/* height:100% lets the cover image follow the body column; min-height keeps it readable when the
   body column is the shorter of the two. */
.post-purchase-offer__media {
  width: 100%;
  height: 100%;
  min-height: var(--ppo-media-min, 300px);
  object-fit: cover;
}
.post-purchase-offer__body { padding: var(--ppo-body-pad, 36px); }

.post-purchase-offer__text { margin-top: var(--ppo-text-gap, 16px); }

.post-purchase-offer__prices {
  margin-top: var(--ppo-price-gap, 24px);
  align-items: baseline;
  gap: var(--ppo-price-row-gap, 12px);
}
.post-purchase-offer__price { font-size: var(--ppo-price-size, 36px); }
.post-purchase-offer__compare { font-size: var(--ppo-compare-size, 15px); }

.post-purchase-offer__perks {
  margin-top: var(--ppo-perks-gap, 20px);
  gap: var(--ppo-perk-gap, 9px);
  font-size: var(--ppo-perk-size, 15px);
  line-height: 1.5;
  color: rgba(var(--color-light-text));
}

.post-purchase-offer__cta { margin-top: var(--ppo-cta-gap, 24px); }
/* The quiet button spans the column like the pill above it; the source leaves its label at the
   inline start (a flex container with no justification), so do not centre it. */
.post-purchase-offer__skip {
  display: flex;
  width: 100%;
  text-align: center;
  margin-top: var(--ppo-skip-gap, 10px);
}

@media (max-width: 900px) {
  .post-purchase-offer__media { min-height: var(--ppo-media-min-narrow, 220px); }
}

@media (max-width: 760px) {
  .post-purchase-offer__body { padding: var(--ppo-body-pad-narrow, 26px); }
  .post-purchase-offer__flag {
    padding: var(--ppo-flag-pad-block-narrow, 14px) var(--ppo-flag-pad-inline-narrow, 20px);
    font-size: var(--ppo-flag-size-narrow, 11px);
  }
}