/**
 * Product badges + ribbons (Products → Badges / Ribbons) on shop and category cards.
 * Proportions follow the product card artboard, scaled to the ~320px shop card.
 * Selectors are kept low-specificity so the Bestsellers block can restyle them.
 */

ul.products li.product:has(.bem-bs__badge, .bem-bs__ribbon) {
  position: relative;
}

/* A badge chosen here replaces the theme's category-driven badge. */
li.product:has(.bem-bs__badge) .pop-flash-circle {
  display: none !important;
}

.bem-bs__badge {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  padding: 6px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-family: var(--brand-font, "Montserrat"), sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.bem-bs__ribbon {
  --bem-ribbon-point: 29px;
  position: absolute;
  top: 0;
  right: 23px;
  z-index: 2;
  box-sizing: border-box;
  width: 35px;
  padding: 13px 0 calc(var(--bem-ribbon-point) + 10px);
  background: #cc9b70;
  color: #fff;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--bem-ribbon-point)),
    50% 100%,
    0 calc(100% - var(--bem-ribbon-point))
  );
  pointer-events: none;
}

.bem-bs__ribbon > span {
  display: block;
  margin: 0 auto;
  font-family: var(--brand-font, "Montserrat"), sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.bem-bs__ribbon--white {
  background: #fff;
  color: #000;
}

.bem-bs__ribbon--black {
  background: #000;
  color: #fff;
}

/* White fill inset by the border width, same pointed shape. */
.bem-bs__ribbon--outline {
  width: 38px;
  padding-top: 16px;
  background: #12110b;
  color: #000;
}

.bem-bs__ribbon--outline::before {
  content: "";
  position: absolute;
  inset: 0 1px 1.5px;
  background: #fff;
  clip-path: inherit;
}

.bem-bs__ribbon--outline > span {
  position: relative;
}

@media (max-width: 768px) {
  .bem-bs__badge {
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    padding: 3px;
    font-size: 7px;
  }

  .bem-bs__ribbon {
    --bem-ribbon-point: 16px;
    right: 12px;
    width: 22px;
    padding: 8px 0 calc(var(--bem-ribbon-point) + 6px);
  }

  .bem-bs__ribbon--outline {
    width: 24px;
  }

  .bem-bs__ribbon > span {
    font-size: 7.5px;
  }
}