/* Product Labels - Responsive */
.product-label{
  position:absolute;top:0;left:0;
  font-weight:bold;color:#fff;z-index:2;
  font-size:14px;padding:4px 8px;margin:5px;
  box-shadow:1px 1px 3px rgba(0,0,0,.2)
}
.product-label i{margin-right:4px;font-size:14px}

/* Specific label styles */
.label-hot{
  background:#ff5252;
  clip-path:polygon(0 0,90% 0,100% 50%,90% 100%,0 100%,10% 50%);
  padding-left:12px;padding-right:16px;margin:0
}

.label-ribbon{
  background:#2196F3;
  transform:rotate(-45deg);
  max-width:100px;
  text-align:center;
  left:-15px;top:15px;
  display:inline-block;          /* ➕ lets us measure width */
}
.label-ribbon i{
  display:inline-block;
  transform:rotate(-45deg);      /* ➕ tilt the icon */
  margin-left:10px
}
/* ➕ wrapper the JS will scale */
.label-ribbon .ribbon-text{
  display:inline-block;
  white-space:nowrap;
  transform-origin:left top;
}

.label-fire{
  background:#FF9800;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);
  padding:6px 12px
}

.label-flag{
  background:#E91E63;
  clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);
  padding-right:12px;padding-bottom:8px
}

.label-seal{
  background:#FFC107;color:#333;
  border-radius:3px;
  box-shadow:0 0 0 2px #fff,0 2px 4px rgba(0,0,0,.1)
}

/* Responsive adjustments */
@media(max-width:767px){
  .product-label{font-size:10px;padding:2px 4px}
  .label-hot{padding-left:10px;padding-right:12px}
  .label-ribbon{max-width:160px}          /* ➕ phone cap */
  .label-fire{padding:4px 8px;padding-top:2px}
  .label-flag{padding-right:8px;padding-bottom:6px}
}