/* =========================================
 *  Etiquetas promo Ietres_PromoLabels
 * ========================================= */

/* Las tarjetas son el punto de referencia */
.product-item-info{
  position: relative;
}

/* Por defecto: etiqueta dentro del borde (para plantillas que no tocaremos) */
.ietres-promo-labels{
  position: absolute;
  top: 8px;
  left: 14px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
}

/* Etiqueta compacta (cabemos 2 sin problema) */
.ietres-promo-labels .ietres-promo-label{
  pointer-events: auto;
  display: inline-block;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  background: #333;
  border: 1px solid rgba(255,255,255,.6);
}

/* Cuando solo hay UNA etiqueta, la hacemos un poco mas grande y visible */
.ietres-promo-labels .ietres-promo-label:only-child{
  font-size: 12px;
  padding: 5px 10px;
}


/* Colores base */
.ietres-promo-label.is-super{   background:#e74c3c; }
.ietres-promo-label.is-bf{      background:#000000; }
.ietres-promo-label.is-new{     background:#27ae60; }
.ietres-promo-label.is-volume{  background:#0AA8DC; }
.ietres-promo-label.is-extra{   background:#8e44ad; }

/* Responsive: un pelín más compactas en móvil */
@media (max-width: 640px){
  .ietres-promo-labels{
    top: 6px;
    left: 10px;
    gap: 2px;
  }

  .ietres-promo-labels .ietres-promo-label{
    font-size: 10px;
    padding: 3px 7px;
  }
}

@media (max-width: 640px){
  .ietres-promo-labels .ietres-promo-label:only-child{
    font-size: 11px;
    padding: 4px 9px;
  }
}


.ietres-promo-label__icon{
  width: 10px;
  height: 10px;
  margin-right: 4px;
  vertical-align: middle;
}
.ietres-promo-label__text{
  vertical-align: middle;
}