/* DB Seraphinite Dynamic Cart Badge - minimal, CLS-free. */

.db-dynamic-cart-badge-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	line-height: 1;
}

.db-dynamic-cart-badge-icon {
	width: 24px;
	height: 24px;
	display: inline-flex;
	position: relative;
}

.db-dynamic-cart-badge-svg {
	display: block;
	overflow: visible;
}

.db-dynamic-cart-badge-dot {
	fill: var(--db-cart-badge-color, #0388A6);
	transition: r 0.15s ease-out;
}

/* Visibility is driven by the has-items class (set via REST) on every cart
   instance. The r geometry + opacity/visibility act as a double safety so the
   dot can never get stuck hidden or visible. */
.db-dynamic-cart-badge-link.is-empty .db-dynamic-cart-badge-dot,
.db-dynamic-cart-badge-link:not(.has-items) .db-dynamic-cart-badge-dot {
	r: 0;
	opacity: 0;
	visibility: hidden;
}

.db-dynamic-cart-badge-link.has-items .db-dynamic-cart-badge-dot {
	r: 4px;
	opacity: 1;
	visibility: visible;
}

/* Count mode: slightly bigger dot so the number fits, still inside the SVG
   overflow area - the header box never changes size (no CLS). */
.db-dynamic-cart-badge-link.db-badge-count.has-items .db-dynamic-cart-badge-dot {
	r: 5.5px;
}

.db-dynamic-cart-badge-count {
	fill: var(--db-cart-badge-count-color, #ffffff);
	font-size: 6px;
	font-weight: 700;
	font-family: inherit;
	pointer-events: none;
}

.db-dynamic-cart-badge-count[hidden] {
	display: none;
}

.db-dynamic-cart-badge-link .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}