/**
 * Storzen — Sale Badge Module CSS
 * assets/css/modules/sale-badge.css
 *
 * Styles: rounded (default), square, ribbon
 * Colours follow WooCommerce badge convention + brand accent.
 *
 * @package storzen
 * @since   1.1.0
 */

:root {
  --sz-badge-sale-bg:   #e11d48;
  --sz-badge-new-bg:    #16a34a;
  --sz-badge-hot-bg:    #ea580c;
  --sz-badge-out-bg:    #6c737a;
  --sz-badge-text:      #ffffff;
  --sz-badge-font-size: 11px;
  --sz-badge-weight:    700;
  --sz-badge-gap:       4px;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.sz-badge-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sz-badge-gap);
}

/* When rendered directly on WooCommerce default loops (no .badges container),
   keep the absolute positioning so badges overlay the product image. */
.woocommerce ul.products li.product > .sz-badge-wrap,
.product > .sz-badge-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
}

/* ── Base badge ──────────────────────────────────────────── */
.sz-badge {
  display: inline-block;
  font-size: var(--sz-badge-font-size);
  font-weight: var(--sz-badge-weight);
  color: var(--sz-badge-text);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.3px;
  padding: 4px 8px;
}

/* ── Type colours ────────────────────────────────────────── */
.sz-badge--sale { background: var(--sz-badge-sale-bg); }
.sz-badge--new  { background: var(--sz-badge-new-bg);  }
.sz-badge--hot  { background: var(--sz-badge-hot-bg);  }
.sz-badge--out  { background: var(--sz-badge-out-bg);  }

/* ── Style: rounded (default) ────────────────────────────── */
.sz-badge-style-rounded .sz-badge {
  border-radius: 50px;
  padding: 4px 10px;
}

/* ── Style: square ───────────────────────────────────────── */
.sz-badge-style-square .sz-badge {
  border-radius: 3px;
}

/* ── Style: ribbon ───────────────────────────────────────── */
.sz-badge-style-ribbon .sz-badge-wrap {
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

.sz-badge-style-ribbon .sz-badge {
  border-radius: 0;
  padding: 5px 22px 5px 10px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  margin-bottom: 2px;
}

/* ── Product card — ensure relative positioning ──────────── */
.woocommerce ul.products li.product,
.sz-product-card {
  position: relative;
}