:root {
  --vl-badge-font-size: 0.8125rem;
  --vl-badge-padding-y: 7px;
  --vl-badge-padding-x: 12px;
  --vl-badge-gap: 6px;
  --vl-badge-offset: 10px;
  --vl-badge-bg: rgba(0, 0, 0, 0.78);
  --vl-badge-text: #ffffff;
}

/* Positioning anchors — badges overlay these thumbnail wrappers */
.woo-entry-image,
.image-wrap .woo-entry-image,
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.elementor-element.elementor-wc-products ul.products li.product .woocommerce-loop-product__link,
.elementor-widget-image .elementor-widget-container,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child {
  position: relative;
}

.vl-product-badges {
  position: absolute;
  top: var(--vl-badge-offset);
  left: var(--vl-badge-offset);
  z-index: 5;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--vl-badge-gap);
  max-width: calc(100% - 20px);
  pointer-events: none;
}

.vl-product-badges--single {
  top: 12px;
  left: 12px;
}

.vl-product-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--vl-badge-padding-y) var(--vl-badge-padding-x);
  border-radius: 999px;
  background: var(--vl-badge-bg);
  font-size: var(--vl-badge-font-size);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vl-badge-text);
  white-space: nowrap;
}

.vl-product-badge--sale {
  background: #e50914;
  color: #ffffff;
}

.vl-product-badge--out-of-stock {
  background: #000000;
  color: #ffffff;
}

.vl-product-badge--coming-soon {
  background: #e50914;
  color: #ffffff;
}

.vl-product-badge--new {
  background: #ff9400;
  color: #ffffff;
}

/* Hide OceanWP / Woo default badges — replaced by unified vl-product-badges stack */
.woo-entry-image .outofstock-badge,
.image-wrap .outofstock-badge,
.elementor-widget-image .outofstock-badge,
.woocommerce-product-gallery .outofstock-badge,
.woo-entry-image .onsale,
.image-wrap .onsale,
.woocommerce-loop-product__link .onsale,
li.product .onsale,
li.product.circle-sale .onsale,
.elementor-element.elementor-wc-products ul.products li.product .onsale,
.woocommerce-product-gallery .onsale,
.woocommerce-product-gallery span.onsale {
  display: none !important;
}

@media only screen and (max-width: 767px) {
  :root {
    --vl-badge-font-size: 0.75rem;
    --vl-badge-padding-y: 6px;
    --vl-badge-padding-x: 10px;
    --vl-badge-gap: 5px;
    --vl-badge-offset: 8px;
  }

  .vl-product-badges--single {
    top: 10px;
    left: 10px;
  }
}