/**
 * Carbide Preorders badges — small corner overlays (D6).
 *
 * Every color and metric rides on a custom property so a theme restyles the
 * whole system from one selector:
 *
 *   :root {
 *     --cpw-badge-background: #7f54b3;
 *     --cpw-badge-color: #fff;
 *   }
 *
 * Per-mode overrides: --cpw-badge-{mode}-background / -color, e.g.
 * --cpw-badge-preorder-background.
 */

.cpw-badge {
	position: absolute;
	top: var(--cpw-badge-offset-y, 0.625rem);
	left: var(--cpw-badge-offset-x, 0.625rem);
	z-index: 9;
	display: inline-block;
	max-width: calc(100% - 2 * var(--cpw-badge-offset-x, 0.625rem));
	padding: var(--cpw-badge-padding, 0.25em 0.65em);
	background: var(--cpw-badge-background, #111);
	color: var(--cpw-badge-color, #fff);
	font-size: var(--cpw-badge-font-size, 0.72rem);
	font-weight: var(--cpw-badge-font-weight, 600);
	line-height: 1.5;
	letter-spacing: var(--cpw-badge-letter-spacing, 0.05em);
	text-transform: var(--cpw-badge-text-transform, uppercase);
	border-radius: var(--cpw-badge-radius, 2px);
	pointer-events: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cpw-badge--visible_sold_out {
	background: var(--cpw-badge-visible_sold_out-background, var(--cpw-badge-background, #111));
	color: var(--cpw-badge-visible_sold_out-color, var(--cpw-badge-color, #fff));
}

.cpw-badge--preorder {
	background: var(--cpw-badge-preorder-background, var(--cpw-badge-background, #111));
	color: var(--cpw-badge-preorder-color, var(--cpw-badge-color, #fff));
}

.cpw-badge--waitlist {
	background: var(--cpw-badge-waitlist-background, var(--cpw-badge-background, #111));
	color: var(--cpw-badge-waitlist-color, var(--cpw-badge-color, #fff));
}

/* Overlay anchors: classic loop tiles, block loop tiles, and the PDP. */
.woocommerce ul.products li.product,
ul.products li.product,
li.wc-block-product,
.wc-block-grid__product,
.wp-block-woocommerce-product-image,
.wc-block-components-product-image {
	position: relative;
}

/* PDP: anchor to the gallery column rather than the whole product section. */
.single-product div.product {
	position: relative;
}

.cpw-badge--single {
	z-index: 19;
}

/*
 * Variation state: WooCommerce renders each variation's availability_html
 * into .woocommerce-variation-availability when the shopper picks one; the
 * badge travels inside it (see Badges::annotate_variation). Inline chip
 * there — never a corner overlay, which would escape to the PDP corner.
 */
.cpw-badge--variation {
	position: static;
	max-width: none;
	margin-right: var(--cpw-badge-variation-gap, 0.5em);
	pointer-events: auto;
}