/* ===== Gutenberg image ribbon (your exact markup) ===== */

/* Make the  the positioning anchor and clip its contents */
figure.wp-block-image.promo-ribbon{
  position: relative;
  display: inline-block;   /* shrink-wrap to image size */
  overflow: hidden;        /* clips ribbon + rounds corners */
  border-radius: 14px;
}

/* Ensure the image respects the same rounding */
figure.wp-block-image.promo-ribbon img{
  display: block;
  border-radius: 14px;
}

/* Diagonal ribbon */
figure.wp-block-image.promo-ribbon::before{
  content: "50% OFF" !important;
  position: absolute;
  z-index: 9999;
  top: 16px;
  right: -56px;
  width: 210px;
  text-align: center;
  padding: 10px 0;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #db2777);
  transform: rotate(45deg);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
  border-radius: 999px;
  pointer-events: none;
}

/* Mobile tweak */
@media (max-width: 600px){
  figure.wp-block-image.promo-ribbon::before{
    width: 150px;
    right: -42px;
    font-size: 12px;
    padding: 8px 0;
  }
}


.offer-pill{
  display: inline-flex;            /* shrink to content */
  align-items: center;             /* vertical centering */
  justify-content: center;         /* horizontal centering */
  gap: 10px;

  min-height: 56px;               /* controls how “tall” it is */
  padding: 10px 14px;             /* reduce if still too tall */
  width: auto;                    /* don’t stretch */

  background: #fff5f7;
  border: 1px solid #fecdd3;
  border-radius: 14px;
  box-sizing: border-box;
}

/* Keep text compact */
.offer-pill strong{ font-weight: 900; }
.offer-pill small{
  margin: 0;
  display: inline-block;          /* don’t force new line */
  font-size: 12px;
  color: #6b7280;
}

/* If your editor wraps the content in  tags, kill their default margins */
.offer-pill p{
  margin: 0 !important;
}