/* Shared container for rank + badge */
.pw-bs-grid ul.products li.product { position: relative; }

.pw-bs-flags {
  position: absolute;
  top: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;                 /* <-- consistent spacing regardless of text width */
  z-index: 3;
}

/* Alignment from setting */
.pw-bs-align-left  { left:  .5rem; flex-direction: row; }
.pw-bs-align-right { right: .5rem; flex-direction: row-reverse; } 
/* row-reverse puts the badge at the outer edge and rank just inside it (like your right-aligned example) */

/* Tokens for each chip */
.pw-bs-badge, .pw-bs-rank {
  font-size: .85rem;
  line-height: 1;
  color: #fff;
  padding: .35rem .5rem;
  background: rgba(77,181,162,.90);
  font-weight: 700;
  /* Optional cosmetics:
  border-radius: .4rem;
  */
}

/* Make digits align nicely (no jitter between #9 and #10) */
.pw-bs-rank { font-variant-numeric: tabular-nums; }

/* Mobile: hide the label, keep the rank and pull it to the corner automatically */
@media (max-width: 767px) {
  .pw-bs-badge { display: none !important; }
  .pw-bs-flags { gap: 0; } /* not necessary but tidy when only rank remains */
  .pw-bs-rank  { font-size: .70rem; padding: .3rem .45rem; }
}