.plm-badge-thumb-wrap {
  position: relative;
  display: inline-block;
}

.image-wrap {
  position: relative;
}

.plm-product-badges {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}

.single-product .plm-product-badges {
  display: none !important;
}

.plm-badge {
  --enter-delay: 0ms;
  --sheen-delay: 0s;
  --accent1: #05b7ab;
  --accent2: #10b361;
  --fill1: rgba(255, 255, 255, 0.22);
  --fill2: rgba(255, 255, 255, 0.08);
  --text: #052f2c;
  --glow1: rgba(5, 183, 171, 0.45);
  --glow2: rgba(16, 179, 97, 0.35);

  position: relative;
  z-index: 0;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: min(100%, 170px);
  overflow: hidden;
  padding: 6px 10px;
  border-radius: 0;
  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: clamp(10px, 0.72vw, 11px);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  background:
    linear-gradient(135deg, var(--fill1), var(--fill2)) padding-box,
    linear-gradient(135deg, var(--accent1), var(--accent2)) border-box;
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);

  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  transform: translate3d(0, 0, 0);
  animation: plmBadgeEnter 520ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  animation-delay: var(--enter-delay);
}

.plm-badge__label{
  display: inline-block;
  transform: translateY(0.5px);
}

.plm-badge--promo {
  --accent1: #aa9268;
  --accent2: #ccb88a;
  background: linear-gradient(135deg, #aa9268, #ccb88a) !important;
  --fill1: rgba(0, 0, 0, 0.22);
  --fill2: rgba(0, 0, 0, 0.08);
  --text: #ffffff;
  --glow1: rgba(255, 59, 48, 0.5);
  --glow2: rgba(255, 122, 89, 0.42);
}

.plm-badge--new {
  --accent1: #223532;
  --accent2: #2a6057;
  background: linear-gradient(135deg, #223532, #2a6057) !important;
  --fill1: rgba(255, 255, 255, 0.22);
  --fill2: rgba(255, 255, 255, 0.08);
  --text: #052f2c;
  --glow1: rgba(5, 183, 171, 0.45);
  --glow2: rgba(16, 179, 97, 0.35);
}

.plm-badge::before {
  content: '';
  position: absolute;
  inset: -14px -18px -14px -14px;
  border-radius: inherit;
  background: transparent;
  filter: blur(12px);
  opacity: 0.6;
  z-index: -1;
  pointer-events: none;
}

.plm-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.65) 42%, transparent 58%);
  transform: translateX(-140%);
  opacity: 0.58;
  mix-blend-mode: overlay;
  animation: plmBadgeSheen 6.8s ease-in-out infinite;
  animation-delay: var(--sheen-delay);
  pointer-events: none;
}

.plm-product-badges .plm-badge:nth-child(1){
  --enter-delay: 0ms;
  --sheen-delay: 1.2s;
}

.plm-product-badges .plm-badge:nth-child(2){
  --enter-delay: 90ms;
  --sheen-delay: 2.2s;
}

@keyframes plmBadgeEnter {
  0% {
    opacity: 0;
    transform: translate3d(-6px, -6px, 0) scale(0.96);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes plmBadgeSheen {
  0%, 55% {
    transform: translateX(-140%);
  }
  65%, 100% {
    transform: translateX(140%);
  }
}

.plm-badge-thumb-wrap:hover .plm-product-badges .plm-badge {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.plm-badge-thumb-wrap:hover .plm-product-badges .plm-badge::after {
  animation-duration: 3.4s;
}

@media (prefers-reduced-motion: reduce) {
  .plm-badge { animation: none; }
  .plm-badge::after { animation: none; }
}