.clx-product-badges{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:18;
}

.clx-product-badges__left{
  position:absolute;
  top:10px;
  left:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  z-index:2;
}

.clx-product-badges__right{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  z-index:3;
}

.clx-product-badge{
  --clx-pill-h: 35px;
  --clx-pill-w: 109px;
  --clx-pill-bg: none;
  position:relative;
  width:var(--clx-pill-w);
  min-width:var(--clx-pill-w);
  max-width:var(--clx-pill-w);
  height:var(--clx-pill-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:0 8px;
  margin:0;
  background-image:var(--clx-pill-bg);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:100% 100%;
  color:#fff;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 1px 1px rgba(0,0,0,.28);
  border:none;
  border-radius:0;
  white-space:nowrap;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1;
  vertical-align:top;
}

.clx-product-badge__text{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  line-height:1;
  transform:translateY(-2px);
}

.clx-product-badge--sm{font-size:10px;}
.clx-product-badge--md{font-size:10px;}
.clx-product-badge--lg{font-size:10px;}

@media (max-width: 767px){
  .clx-product-badge{
    --clx-pill-h: 33px;
  }
  .clx-product-badge--sm,
  .clx-product-badge--md,
  .clx-product-badge--lg{font-size:9px;}
  .clx-product-badge--sm{width:70px;min-width:70px;max-width:70px;}
  .clx-product-badge--md{width:90px;min-width:90px;max-width:90px;}
  .clx-product-badge--lg{width:120px;min-width:120px;max-width:120px;}
}