/* Basket shows as an icon in the primary menu. The word stays in the
   accessibility tree so screen readers still announce it. The glyph is a
   mask, so it inherits currentColor and keeps the existing hover colours. */

html body li.hr-nav-basket > .menu-link{
	position:relative !important;
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
}

html body li.hr-nav-basket .hr-basket-ico{
	display:block;
	width:21px;
	height:21px;
	background-color:currentColor;
	-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 8h14.8l-1.1 11.2a2 2 0 0 1-2 1.8H7.7a2 2 0 0 1-2-1.8L4.6 8Z'/%3E%3Cpath d='M8.7 8V6.4a3.3 3.3 0 0 1 6.6 0V8'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 8h14.8l-1.1 11.2a2 2 0 0 1-2 1.8H7.7a2 2 0 0 1-2-1.8L4.6 8Z'/%3E%3Cpath d='M8.7 8V6.4a3.3 3.3 0 0 1 6.6 0V8'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Only appears once the browser finds something in the basket. Never rendered
   by PHP: the header is page cached, so a server-side number would be stale. */
html body li.hr-nav-basket .hr-basket-count{
	position:absolute;
	top:1px;
	right:-3px;
	min-width:16px;
	height:16px;
	padding:0 4px;
	border-radius:9px;
	background:#C2410C;
	color:#F0ECDF;
	font-size:10.5px;
	line-height:16px;
	font-weight:700;
	text-align:center;
	font-variant-numeric:tabular-nums;
	pointer-events:none;
}
html body li.hr-nav-basket .hr-basket-count[hidden]{display:none}

html body li.hr-nav-basket .hr-basket-label{
	position:absolute !important;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
	border:0;
}