/* The original image stays intact. Only the virtual pack cover gets a quantity overlay. */
.card-picture:has(img[src*="#bf-pack-cover"]),
.main-photo:has(img[src*="#bf-pack-cover"]),
.thumbnails button:has(img[src*="#bf-pack-cover"]),
#photo-dialog:has(img[src*="#bf-pack-cover"]) {
  position: relative;
}

.card-picture:has(img[src*="#bf-pack-cover"])::after,
.main-photo:has(img[src*="#bf-pack-cover"])::after,
.thumbnails button:has(img[src*="#bf-pack-cover"])::after,
#photo-dialog:has(img[src*="#bf-pack-cover"])::after {
  content: "×10";
  position: absolute;
  right: 6%;
  bottom: 7%;
  z-index: 2;
  padding: .06em .18em .08em;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: .06em;
  color: rgba(78, 28, 44, .76);
  background: rgba(255, 255, 255, .46);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(34px, 4.6vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .6);
  pointer-events: none;
}

.main-photo:has(img[src*="#bf-pack-cover"])::after {
  font-size: clamp(60px, 9vw, 124px);
  bottom: 10%;
  right: 7%;
}

.thumbnails button:has(img[src*="#bf-pack-cover"])::after {
  font-size: 15px;
  right: 3%;
  bottom: 4%;
  padding: .02em .1em;
}

#photo-dialog:has(img[src*="#bf-pack-cover"])::after {
  font-size: clamp(64px, 12vw, 150px);
  bottom: 8%;
  right: 8%;
}