/*
 * Header cart count badge (js/cart-count.js). Hidden at 0.
 * Legacy header: red. Theme Builder header: the "Try for free" ink.
 */

.moosiko-cart-count {
	display: none;
}

.moosiko-cart-count:not([data-count="0"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #2a242e;
	color: #fff;
	/* Raleway's default digits are old-style (uneven heights, a short "1"), which
	   sit off-centre; lining figures plus a line box equal to the height centre them. */
	font: 700 11px/18px Raleway, Helvetica, Arial, sans-serif;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
	text-align: center;
	letter-spacing: 0;
	text-transform: none;
	pointer-events: none;
}

/* Divi's .et-cart-info span:before is the cart glyph; the badge's spans must not get it. */
.moosiko-cart-count::before,
.moosiko-cart-count *::before {
	content: none !important;
}

.moosiko-cart-count__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* On an icon: top-right corner bubble. */
.et-cart-info,
.moosiko-menu-icon-wrap {
	position: relative;
}

/* The appended badge stops the icon being its column's last child, which would
   give the icon Divi's module bottom margin and lift it out of line.
   Specific enough to beat Divi's .et_pb_column .et_pb_module:not(:last-child). */
.et_pb_row .et_pb_column.moosiko-menu-icon-wrap > .et_pb_module {
	margin-bottom: 0;
}

.moosiko-cart-count--icon {
	position: absolute;
	top: -8px;
	right: -11px;
}

.et-cart-info .moosiko-cart-count--icon {
	background: #e02424;
	color: #fff;
}

/* Divi's mobile header puts the hamburger right next to the cart. */
@media (max-width: 980px) {
	.et-cart-info .moosiko-cart-count--icon {
		top: -10px;
		right: -5px;
	}
}

/* The mobile menu's "Cart" row: a pill after the label. */
.moosiko-cart-count--inline {
	align-self: center;
	margin-left: 10px;
}