/**
 * Header cart (Astra's header builder; nothing in Astra is edited).
 *
 * The owner's drawing, a hand holding bags (images/cart-hand.webp), in the
 * store's orange instead of Astra's black bag. It is a mask on Astra's own
 * icon element, so the cart's Ajax refreshes keep it. The count sits in an
 * orange disc. The rest of the header is Astra's own.
 */

:root {
	--ht-orange: #e2803f;
	--ht-cart-h: 40px;
}

@media (min-width: 922px) {
	:root {
		--ht-cart-h: 44px;
	}
}

#masthead .ast-site-header-cart i.astra-icon.ast-icon-shopping-bag {
	display: inline-flex;
	align-items: center;
	padding: 0;
	font-size: 1em;
	line-height: 1;
}

#masthead .ast-site-header-cart .ast-icon-shopping-bag .ast-icon.icon-bag {
	display: block;
	inline-size: calc(var(--ht-cart-h) * 115 / 150);
	block-size: var(--ht-cart-h);
	background: var(--ht-orange);
	-webkit-mask: url("../images/cart-hand.webp") center / contain no-repeat;
	mask: url("../images/cart-hand.webp") center / contain no-repeat;
	transition: background-color 0.15s ease;
}

#masthead .ast-site-header-cart .ast-icon-shopping-bag .ast-icon.icon-bag svg {
	display: none;
}

#masthead .ast-site-header-cart-li:hover .ast-icon.icon-bag,
#masthead .ast-site-header-cart a:focus-visible .ast-icon.icon-bag {
	background: #c9652a;
}

/* The count: white on an orange disc, on the drawing's empty corner. */
#masthead .ast-site-header-cart .ast-addon-cart-wrap i.astra-icon::after {
	inset-block-start: -3px;
	left: -9px;
	background-color: var(--ht-orange);
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
	color: #fff;
}

/* French and English pages (v76): Astra's left-to-right style also sets «right»; the count keeps to the drawing's empty corner, as in Arabic. */
:root:not([dir="rtl"]) #masthead .ast-site-header-cart .ast-addon-cart-wrap i.astra-icon::after {
	right: auto;
}