/* ================================
   WooCommerce "Sold out" Badge CSS
   Safe, theme-agnostic helpers
   ================================ */

/* Product-card positioning context (catalog/grid)
   Keep both selectors for broader theme compatibility. */
ul.products li.product,
.woocommerce ul.products li.product {
  position: relative;
}

/* Some themes wrap the product image/title in a link.
   Give that wrapper positioning context too. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct__link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  position: relative;
  display: block;
}

/* Single product page: add positioning context around gallery area.
   These selectors are common across many themes; harmless if not present. */
.single-product .product .images,
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper {
  position: relative;
}

/* The badge itself */
.soldout-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #E02424;   /* red */
  color: #fff;
  padding: 8px 12px;     /* larger */
  border-radius: 8px;
  font-size: 0.95rem;    /* larger */
  font-weight: 600;
  line-height: 1;
  z-index: 3;
  opacity: 0.95;
  pointer-events: none;  /* prevents hover conflicts on images/links */
  /* Optional: subtle shadow helps legibility on busy images */
  /* box-shadow: 0 1px 2px rgba(0,0,0,.25); */
}

/* (Optional) Slightly tighten the badge on very small screens */
@media (max-width: 360px) {
  .soldout-badge {
    padding: 7px 10px;
    font-size: 0.9rem;
  }
}