/* ==========================================================================
   WooRules — Sale Badge (Frontend)
   ========================================================================== */

:root {
	--disps-badge-bg:    #323C46;
	--disps-badge-color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Sale Badge — Circle
   -------------------------------------------------------------------------- */

.disps-sale-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 10px;
	z-index: 9;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--disps-badge-bg);
	color: var(--disps-badge-color);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	pointer-events: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.disps-sale-badge--left {
	left: 10px;
}

.disps-sale-badge--right {
	right: 10px;
}

/* --------------------------------------------------------------------------
   Hide WooCommerce's default "Sale!" badge when our badge is present
   -------------------------------------------------------------------------- */

.disps-sale-badge ~ .onsale,
.disps-sale-badge + .onsale {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Woodmart theme compatibility
   -------------------------------------------------------------------------- */

/* Woodmart wraps product images in .product-image-link */
.product-image-link {
	position: relative;
}

/* Woodmart's own sale badge — hide when ours is showing */
.product-labels .disps-sale-badge ~ .onsale,
.wd-product-labels .disps-sale-badge ~ .onsale {
	display: none !important;
}

/* Ensure our badge appears inside the image wrapper */
.wd-product .disps-sale-badge,
.product-grid-item .disps-sale-badge,
.product-list-item .disps-sale-badge {
	z-index: 10;
}

/* Single product page — badge inside gallery */
.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery .disps-sale-badge {
	z-index: 10;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.disps-sale-badge {
		width: 42px;
		height: 42px;
		font-size: 11px;
		top: 6px;
	}

	.disps-sale-badge--left {
		left: 6px;
	}

	.disps-sale-badge--right {
		right: 6px;
	}
}