/*
 * Plakietki na kartach produktów — Figma `7962:30742` (promocja: czerwony obrys)
 * i `7962:30768` („bestseller” na białym, „Kod -25%” na zielonym).
 * Rząd w prawym górnym rogu zdjęcia, 12 px od krawędzi, kilka pod sobą.
 */

.bgshop-card__media,
.bghp-produkt__media {
  position: relative;
}

.bgpb {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: calc(100% - 24px);
  pointer-events: none;
}

.bgpb__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 2px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-variation-settings: "opsz" 24;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Promocja z CPT: czerwony obrys i tekst, bez tła. */
.bgpb__badge--promo {
  border-color: #ac0000;
  color: #ac0000;
}

/* Ręczne plakietki: pełne tło, Work Sans SemiBold, 6 × 12 px. */
.bgpb__badge--new,
.bgpb__badge--sale {
  padding: 6px 12px;
  border-radius: 24px;
  font-family: "work-sans", "Work Sans", sans-serif;
  font-variation-settings: normal;
  line-height: normal;
}

/* „Nowość”, „Bestseller”: białe tło, czerwony tekst. */
.bgpb__badge--new {
  background: #fff;
  color: #ac0000;
  font-weight: 600;
}

/* Kod rabatowy: zielone tło i tekst, bez wersalików (jak „Kod -25%”). */
.bgpb__badge--sale {
  background: #d9f8d3;
  color: #227613;
  font-weight: 600;
  text-transform: none;
}

/* Telefon: karty mają ok. 170 px szerokości. */
@media (max-width: 799px) {
  .bgpb {
    top: 8px;
    right: 8px;
    max-width: calc(100% - 16px);
    gap: 3px;
  }

  .bgpb__badge {
    padding: 2px 8px;
    font-size: 10px;
    line-height: 12px;
  }

  .bgpb__badge--new,
  .bgpb__badge--sale {
    padding: 4px 8px;
    line-height: normal;
  }
}