/**
 * WC Tag Ribbons — frontend styles (ALL FLAT / HORIZONTAL)
 * Style: pill (rectangular), no diagonal transforms
 * Positions: top-left, top-right, bottom-left, bottom-right
 */

/* Overlay container positioned inside image wrapper via JS .wctr-anchor */
.wctr-ribbons {
  position: absolute;
  inset: 0;
  pointer-events: none; /* do not block hover/clicks */
  z-index: 9;
  font-family: inherit;

  /* design tokens */
  --wctr-gap: 8px;      /* distance between stacked ribbons */
  --wctr-pad-y: 6px;    /* vertical padding */
  --wctr-pad-x: 10px;   /* horizontal padding */
  --wctr-font: 12px;    /* base font size */
}

/* Ensure product wrappers can host absolute children */
.product,
.products .product,
.woocommerce ul.products li.product,
.single-product .product {
  position: relative;
}

/* Corner containers (one per corner) */
.wctr-ribbons .wctr-pos {
  position: absolute;
  display: flex;
  gap: var(--wctr-gap);
  flex-direction: column; /* vertical stacking by default */
  margin: 0;
  padding: 0;
}

/* Corner coordinates (TOP corners: normal) */
.wctr-ribbons .wctr-pos-top-left     { top: 8px;  left: 8px;  align-items: flex-start; }
.wctr-ribbons .wctr-pos-top-right    { top: 8px;  right: 8px; align-items: flex-end;   }

/* BOTTOM corners: keep at bottom:0 and lift visually with transform on the inner (prevents link height growth) */
.wctr-ribbons .wctr-pos-bottom-left  { bottom: 0; left: 8px;  align-items: flex-start; }
.wctr-ribbons .wctr-pos-bottom-right { bottom: 0; right: 8px; align-items: flex-end;   }

/* Base ribbon: flat pill */
.wctr-ribbon {
  --bg: var(--wctr-bg, #cc0000);
  --fg: var(--wctr-fg, #ffffff);
  color: var(--fg);
  background: var(--bg);
  pointer-events: none;
  line-height: 1.15;
  font-size: var(--wctr-font);
  font-weight: 600;
  letter-spacing: .2px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  margin: 0;
  display: inline-block;
}

/* Inner span for safe padding/text rendering */
.wctr-ribbon .wctr-ribbon-inner {
  display: inline-block;
  padding: var(--wctr-pad-y) var(--wctr-pad-x);
  transform: none; /* default, overridden below for bottom */
}

/* Visual lift applied to the pill itself (keeps text and background aligned) */
.wctr-pos-bottom-left .wctr-ribbon,
.wctr-pos-bottom-right .wctr-ribbon {
  transform: translateY(-15px);
}

/* Stacking offset: if multiple ribbons share the same corner, add a tiny top margin on inner */
.wctr-pos .wctr-ribbon[data-stack="2"] .wctr-ribbon-inner { margin-top: 2px; }
.wctr-pos .wctr-ribbon[data-stack="3"] .wctr-ribbon-inner { margin-top: 4px; }

/* Responsive tweaks */
@media (max-width: 576px) {
  .wctr-ribbons { --wctr-font: 11px; --wctr-pad-y: 5px; --wctr-pad-x: 9px; }
}

/* Keep ribbons above image overlays but below dropdowns/popovers */
.woocommerce ul.products li.product .wctr-ribbons,
.woocommerce div.product .wctr-ribbons {
  z-index: 9;
}

/* Absolute overlay covering the image area (created by JS) */
.wctr-anchor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  margin: 0;
  padding: 0;
}

/* Wrapper created around the product <img> in loops to host the overlay */
.wctr-imgwrap {
  position: relative;
  display: block;       /* block avoids inline baseline gaps */
  line-height: 0;       /* remove inline gaps if any */
  font-size: 0;         /* extra safety for inline gaps */
  vertical-align: top;  /* if ever treated inline, align to top */
  /* overflow visible: we clip visually via transform; avoids clipping ribbons */
}