/* Positioning anchor for the badge cluster in both contexts: the card image
   block (lists) and the single-product gallery block. */
.wc-block-components-product-image,
.wp-block-woocommerce-product-image-gallery {
  position: relative;
}

.wc-block-components-product-image .product-badges,
.wp-block-woocommerce-product-image-gallery .product-badges {
  position: absolute;
  top: 4px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-badges--align-left {
  left: 4px;
  align-items: flex-start;
}

.product-badges--align-center {
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.product-badges--align-right {
  right: 4px;
  align-items: flex-end;
}

.product-badges .wc-block-components-product-sale-badge,
.product-badges .product-badge {
  position: static !important;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 4px 8px;
  border: 0;
  border-radius: 2px;
  font-family: var(--wp--preset--font-family--google-sans, "Google Sans", sans-serif);
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--font-weight-heading);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.product-badges .wc-block-components-product-sale-badge {
  background: var(--wp--preset--color--primary-500, #ff2200);
  color: #fff;
}

/* Custom taxonomy badges. Colors come from term meta, passed in as the
   --badge-bg / --badge-fg custom properties on each span (see
   inc/product-badges.php). To restyle a specific badge, target its slug
   modifier, e.g.:
     .product-badge--hit { background-color: gold; color: #000; }
   A direct property on the slug class overrides the variable fallback below. */
.product-badges .product-badge {
  background-color: var(--badge-bg, #221e1c);
  color: var(--badge-fg, #fff);
}

.product-badges .wc-block-components-product-sale-badge__text {
  font: inherit;
  text-transform: inherit;
}