/**
 * CC Badges — Frontend Styles
 *
 * Badge stack layout: absolute-positioned wrapper with vertical flex flow
 * so badges stack without overlapping.
 *
 * @package CC_Badges
 */

/* ── Badge Stack Container ──────────────────────────────────────────── */

.ccbd-badge-stack {
	position: absolute;
	top: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 999;
	pointer-events: none;
}

.ccbd-badge-stack.ccbd-align-right {
	right: 0;
	left: auto;
	align-items: flex-end;
}

.ccbd-badge-stack.ccbd-align-left {
	left: 0;
	right: auto;
	align-items: flex-start;
}

/* On single product pages: left-aligned */
.ccbd-badge-stack.ccbd-surface-single {
	top: 12px;
}

/* Related/upsell loops: same as archive */
.ccbd-badge-stack.ccbd-surface-related {
	top: 8px;
}

/* ── Badge Items (shared) ───────────────────────────────────────────── */

.ccbd-badge {
	display: inline-flex;
	align-items: center;
	pointer-events: auto;
	max-width: 100%;
	box-sizing: border-box;
}

/* ── Text Badge ─────────────────────────────────────────────────────── */

.ccbd-badge-text {
	padding: 4px 8px;
	font-size: 10px !important;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 3px;
	white-space: nowrap;
}

/* ── Image Badge ────────────────────────────────────────────────────── */

.ccbd-badge-image img {
	display: block;
	max-width: 55px;
	height: auto;
}

/* ── Icon + Text Badge ──────────────────────────────────────────────── */

.ccbd-badge-icon-text {
	padding: 4px 8px;
	font-size: 10px !important;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 3px;
	white-space: nowrap;
	gap: 4px;
}

.ccbd-badge-icon-text .ccbd-badge-icon {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	flex-shrink: 0;
}

/* ── Cart / Checkout Compact Badges ─────────────────────────────────── */

.ccbd-cart-badges {
	display: inline-flex;
	gap: 4px;
	margin-left: 6px;
	vertical-align: middle;
}

.ccbd-cart-badges .ccbd-badge {
	font-size: 10px !important;
	padding: 2px 5px;
	border-radius: 2px;
	line-height: 1.1;
}

.ccbd-cart-badges .ccbd-badge-image img {
	max-width: 30px;
}

/* ── Divi / WooCommerce archive card positioning ────────────────────── */

/* Ensure the product card is a positioning context */
.woocommerce ul.products li.product,
.et_pb_shop .woocommerce ul.products li.product,
ul.products li.product {
	position: relative;
}

/* Product view overrides (Divi custom layouts) */
.product-view-standard .ccbd-badge-stack,
.product-view-lifestyle .ccbd-badge-stack {
	top: 8px;
}

/* When a left archive badge is present, move the native Woo sale pill below it. */
.woocommerce ul.products li.product:has(.ccbd-badge-stack.ccbd-surface-archive.ccbd-align-left) a > .onsale,
.et_pb_shop .woocommerce ul.products li.product:has(.ccbd-badge-stack.ccbd-surface-archive.ccbd-align-left) a > .onsale,
ul.products li.product:has(.ccbd-badge-stack.ccbd-surface-archive.ccbd-align-left) a > .onsale {
	top: 34px !important;
	left: 0 !important;
	right: auto !important;
	z-index: 998;
}

/* Image badges need more vertical clearance than text pills. */
.woocommerce ul.products li.product:has(.ccbd-badge-stack.ccbd-surface-archive.ccbd-align-left .ccbd-badge-image) a > .onsale,
.et_pb_shop .woocommerce ul.products li.product:has(.ccbd-badge-stack.ccbd-surface-archive.ccbd-align-left .ccbd-badge-image) a > .onsale,
ul.products li.product:has(.ccbd-badge-stack.ccbd-surface-archive.ccbd-align-left .ccbd-badge-image) a > .onsale {
	top: 65px !important;
  	left: 8px !important;
}

/* Single product gallery positioning context */
.single-product .woocommerce-product-gallery {
	position: relative;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media screen and (max-width: 767px) {
	.ccbd-badge-text,
	.ccbd-badge-icon-text {
		font-size: 10px !important;
		padding: 3px 6px;
	}

	.ccbd-badge-image img {
		max-width: 40px;
	}
}