/* ============================================================
   Storzen Catalog Badges for WooCommerce — Public Styles v1.0.0
   ============================================================ */

/* Wrapper */
.stzn-badges-wrap {
	position: absolute;
	z-index: 9;
	display: flex;
	flex-direction: column;
	gap: 4px;
	pointer-events: none;
}

/* Positions */
.stzn-pos-top-left   { top: 10px; left: 10px; align-items: flex-start; }
.stzn-pos-top-right  { top: 10px; right: 10px; align-items: flex-end; }
.stzn-pos-top-center { top: 10px; left: 50%; transform: translateX(-50%); align-items: center; }

/* Product image wrapper must be relative */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce .woocommerce-product-gallery {
	position: relative;
}

/* ── Base ─────────────────────────────────────────────────── */
.stzn-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

/* ── Style 1: Pill ────────────────────────────────────────── */
.stzn-badge.style-1 { padding: 5px 11px; border-radius: 50px; background: #222; color: #fff; }

/* ── Style 2: Square ──────────────────────────────────────── */
.stzn-badge.style-2 { padding: 5px 9px; border-radius: 3px; background: #222; color: #fff; }

/* ── Style 3: Ribbon ──────────────────────────────────────── */
.stzn-badge.style-3 {
	padding: 5px 14px 5px 9px;
	border-radius: 0 3px 3px 0;
	background: #222;
	color: #fff;
	clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%);
}

/* ── Style 4: Circle ──────────────────────────────────────── */
.stzn-badge.style-4 {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 9px;
	padding: 4px;
	background: #222;
	color: #fff;
}

/* ── Style 5: Starburst ───────────────────────────────────── */
.stzn-badge.style-5 {
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 9px;
	padding: 4px;
	background: #222;
	color: #fff;
	clip-path: polygon(
		50% 0%, 61% 35%, 98% 35%, 68% 57%,
		79% 91%, 50% 70%, 21% 91%, 32% 57%,
		2%  35%, 39% 35%
	);
}

/* ── Badge type colours ───────────────────────────────────── */
.stzn-badge-sale       { background: #e74c3c !important; color: #fff !important; }
.stzn-badge-new        { background: #27ae60 !important; color: #fff !important; }
.stzn-badge-featured   { background: #f39c12 !important; color: #fff !important; }
.stzn-badge-outofstock { background: #7f8c8d !important; color: #fff !important; }
.stzn-badge-custom     { background: #2980b9 !important; color: #fff !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
	.stzn-badge       { font-size: 10px; }
	.stzn-badge.style-1 { padding: 4px 8px; }
	.stzn-badge.style-4,
	.stzn-badge.style-5 { width: 36px; height: 36px; font-size: 8px; }
}