/*
 * Cart icon visibility + item-count badge. Site-wide (the header this
 * targets is on every page), not gated behind the carousel shortcode --
 * see cart-ux.php.
 */
.et_pb_menu__cart-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* The anchor is itself a flex item of a Divi menu-icons flex container
	 * whose align-items isn't `center` -- align-self overrides that for just
	 * this item, without needing an extra wrapper element. (vertical-align
	 * doesn't apply here at all: that's for inline/inline-block boxes in
	 * normal flow, not flex items -- tried it first, it did nothing.) */
	align-self: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 2px solid rgb( 153, 153, 153 );
	border-radius: 999px;
	font-size: 1.35rem !important;
	color: rgb( 153, 153, 153 ) !important;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.et_pb_menu__cart-button.cards-cart-button--has-items {
	color: #ff5500 !important;
	border-color: #ff5500;
}

.cards-cart-badge {
	position: absolute;
	top: -0.3rem;
	right: -0.3rem;
	min-width: 1.2rem;
	height: 1.2rem;
	padding: 0 0.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #09347b;
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1;
}