/* Não escondemos a badge original antes do AJAX. Se o JS não rodar, a página não fica sem badge. */
.colors-role-stock-hidden {
  display: none !important;
}

.colors-role-stock-badge,
.colors-role-stock-badge-js,
.colors-role-stock-badge-php,
.ht-product-badges .colors-role-stock-badge-js,
.ht-product-badges .colors-role-stock-badge-verified,
.ht-stockout.colors-role-stock-badge-verified {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e02424;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(224, 36, 36, .25);
  z-index: 20;
}

.ht-product-image-wrap-2,
.ht-product-image-wrap,
.ht-product-image,
.woocommerce-loop-product__link,
.product .attachment-woocommerce_thumbnail {
  position: relative;
}

.colors-role-stock-badge-php {
  position: absolute;
  top: 12px;
  right: 12px;
}

.ht-product-badges .colors-role-stock-badge-js,
.ht-product-badges .colors-role-stock-badge-verified,
.colors-role-stock-badge-js.ht-product-label-right {
  position: relative;
}

.colors-role-stock-disabled,
.colors-role-stock-disabled:hover,
.colors-role-stock-disabled:focus,
.colors-role-stock-disabled-js,
.colors-role-stock-disabled-js:hover,
.colors-role-stock-disabled-js:focus {
  opacity: .75;
  cursor: not-allowed !important;
}

.stock.colors-role-stock-out {
  color: #e02424;
  font-weight: 800;
}

.stock.colors-role-stock-backorder {
  color: #9a6700;
  font-weight: 700;
}