/* Base style for all automatic benefit flags */
.product-flags .product-flag[class*='ssbf-'] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.75rem;
  padding-left: 2.1rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  background-repeat: no-repeat;
  background-position: 0.6rem 50%;
  background-size: 1.1rem 1.1rem;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  opacity: .96;
  z-index: 2;
}

/* Hover animation when user passes mouse over product card */
.js-product-miniature:hover .product-flags .product-flag[class*='ssbf-'],
.product-miniature:hover .product-flags .product-flag[class*='ssbf-'] {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  opacity: 1;
}

/* Slight breathing animation on focus (accessibility) */
.product-flags .product-flag[class*='ssbf-']:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.8);
}

/* Compatibility helpers for common premium themes */
.thumb-grid .product-flags .product-flag[class*='ssbf-'],
.product-miniature .product-flags .product-flag[class*='ssbf-'],
.product-list .product-flags .product-flag[class*='ssbf-'] {
  margin-bottom: .15rem;
}

/* Individual default colors (can be overridden by dynamic CSS) */
.product-flags .product-flag.ssbf-promo       { background-color:#e53935; }
.product-flags .product-flag.ssbf-bestseller  { background-color:#ff9800; }
.product-flags .product-flag.ssbf-freeship    { background-color:#4caf50; }
.product-flags .product-flag.ssbf-pix         { background-color:#00bcd4; }

/* Position helpers (optional – can be used via custom CSS)
   Example usage in theme: ul.product-flags { justify-content:flex-start; }
*/
ul.product-flags.ssbf-top-left     { justify-content:flex-start;   align-items:flex-start; }
ul.product-flags.ssbf-top-right    { justify-content:flex-end;     align-items:flex-start; }
ul.product-flags.ssbf-bottom-left  { justify-content:flex-start;   align-items:flex-end;   }
ul.product-flags.ssbf-bottom-right { justify-content:flex-end;     align-items:flex-end;   }

/* Allow multiple benefit flags to wrap nicely */
ul.product-flags {
  flex-wrap: wrap;
  gap: .15rem;
}