/* ===================================================================
   BLOOM · the basket at the end of the menu
   A thin drawn line in the site's own brown, with no button and no
   panel behind it. The number appears only when there is something
   in the basket.
   =================================================================== */

.bloom-cart-item {
	display: flex !important;
	align-items: center;
	/* a little air between it and the last menu item */
	margin-inline-start: 14px !important;
	padding: 0 !important;
}

.bloom-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	/* the menu sets its own link colour, so this has to be stated firmly */
	color: #9C4A28 !important;
	line-height: 0;
	transition: color .22s ease, transform .22s ease;
}
.bloom-cart:hover,
.bloom-cart:focus-visible { color: #7B8465 !important; transform: translateY(-1px); }

.bloom-cart-i {
	width: 23px;
	height: 23px;
	display: block;
	stroke: currentColor;
}

/* the count, tucked against the top of the basket */
.bloom-cart-count { position: absolute; inset: 0; pointer-events: none; }

.bloom-cart-n {
	position: absolute;
	top: 1px;
	inset-inline-end: 1px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: #D4785A;
	color: #fff;
	font-family: 'Assistant', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	box-shadow: 0 0 0 2px #FDFAF7;
}

/* the menu's own link styles must not reach it */
.bloom-cart-item > a::after,
.bloom-cart-item > a::before { display: none !important; }

@media (max-width: 767px) {
	.bloom-cart-item { margin-inline-start: 8px !important; }
	.bloom-cart { width: 34px; height: 34px; }
	.bloom-cart-i { width: 21px; height: 21px; }
}

/* ------------------------------------------------------------------
   One basket is shown at a time: the one inside the menu on a wide
   screen, the one in the row itself once the menu folds away.
   ------------------------------------------------------------------ */
.bloom-cart--row { display: none; }

@media (max-width: 767px) {
	.bloom-cart-item { display: none !important; }
	.bloom-cart--row {
		display: inline-flex;
		order: 99;              /* the left end of the row, beside the hamburger */
		margin-inline-start: 6px;
		flex: 0 0 auto;
	}
}