/*! [SAHA] assets/css/components/product-badges.css | v2.6.3 | 2026-09-07 */
/* ==============================================
   PRODUCT BADGES — Sale + Out of Stock
   Unified for shop loop, quick view, single product
   ============================================== */

/* Wrapper needs position:relative */
.product-image,
.woocommerce-product-gallery {
  position: relative;
  overflow: visible;
}

/* Quick view: image wrapper */
.quick-view-popup .product-images {
  position: relative;
  overflow: visible;
}
.quick-view-popup .product-images .product-image {
  position: relative;
  text-align: center;
  overflow: visible;
}
.quick-view-popup .product-images .product-image img {
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  height: auto;
  display: block;
}
/* QV: inline-block wrapper shrinks to image size — badges positioned inside image bounds */
.quick-view-popup .qv-img-badge {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
}
.quick-view-popup .qv-img-badge > .product-labels {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
}

/* ==============================================
   PRODUCT BADGES — Unified positioning
   Works in: shop loop, quick view, single product
   ============================================== */

/* --- Containers need position:relative --- */
.product-image,
.woocommerce-product-gallery,
.saha-row > .col:first-child,
.product-loop-image {
  position: relative;
  overflow: visible;
}

/* ==============================================
   PRODUCT BADGES — OOS & Sale (flex container)
   ============================================== */
:root {
  --badge-oos-bg: #4A4A4A;
  --badge-oos-text: #FFFFFF;
  --badge-sale-bg: #F57C00;
  --badge-sale-text: #FFFFFF;
  --badge-overlap-ratio: 0.67;
  --badge-offset-x: 10px;
  --badge-offset-y: 4px;
  --badge-font-size: 11px;
  --badge-padding: 6px 16px;
  --badge-radius: 20px;
}

/* Container: positioned over the image, above everything */
.product-labels {
  position: absolute;
  top: var(--badge-offset-y);
  left: var(--badge-offset-x);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0;
  z-index: 100;
  pointer-events: none;
}

/* Base label style */
.product-labels .label {
  height: 28px;
  line-height: 28px;
  padding: 0 14px;
  font-size: var(--badge-font-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  border-radius: var(--badge-radius);
  white-space: nowrap;
}

/* Sale peeks out from behind OOS (only when OOS is visible).
   When OOS is hidden, SALE sits at normal position. */
.product-labels:has(.label-oos:not([style*="none"])) .label-sale {
  margin-left: -64px; /* SALE peeks ~10% past OOS right edge */
}

/* When OOS is hidden, SALE takes normal position */
.product-labels .label-sale {
  margin-left: 0;
}

/* OOS label (z-index: 3, topmost regardless of DOM order) */
.product-labels .label-oos {
  background-color: var(--badge-oos-bg, #4A4A4A);
  color: var(--badge-oos-text, #fff);
  z-index: 3;
  position: relative;
  order: -1; /* always first (top) */
}

/* Sale label (z-index: 1, second = peeks right) */
.product-labels .label-sale {
  background-color: var(--badge-sale-bg, #F57C00);
  color: var(--badge-sale-text, #fff);
  z-index: 1;
  position: relative;
  order: 0; /* always second (below OOS) */
}

/* Ensure containers don't clip badges */
.woocommerce .products .grid-view .product-image,
.product-image,
.product-loop-image {
  position: relative;
  overflow: visible !important;
}

/* Single product: badge moved inside gallery by JS.
   Gallery has a zoom trigger that pushes image down ~24px.
   Compensate so badge aligns with actual image. */
/* Single product: compensate for zoom trigger (~24px) pushing image down.
   Applies whether labels are inside .woocommerce-product-gallery or .col */
.single-product .woocommerce-product-gallery .product-labels,
.single-product .col.span_1_of_2 > .product-labels {
  top: 28px; /* badge-offset (4px) + trigger height (~24px) */
  left: var(--badge-offset-x);
}

/* Image swap: must be below labels in stacking order.
   Remove overflow:hidden so labels near edges don't clip. */
.product-image > .woo-entry-image-swap {
  position: relative;
  z-index: 1;
  overflow: visible !important;
}

/* Image swap images stay within their layer */
.woo-entry-image-swap img {
  position: relative;
  z-index: auto;
}

/* Override old style.css badge rules */
.product .outofstock-badge,
.product .onsale {
  display: none !important;
}

/* Hide WC static onsale on variable products (JS manages dynamic) */
.single-product.product-type-variable > .onsale,
.single-product .product.product-type-variable > .onsale {
  display: none !important;
}

/* --- Mobile responsive badges (<768px) --- */
@media (max-width: 768px) {
  :root {
    --badge-offset-x: 6px;
    --badge-offset-y: 6px;
    --badge-font-size: 10px;
    --badge-padding: 5px 12px;
  }

  /* Hide badges inside quick view modal on mobile for variable products */
  .quick-view-modal .product-type-variable .product-labels {
    display: none !important;
  }
}