/**
 * Love Pharm · Masthead cart icon — a standard shopping bag, the magnifier's size and stroke,
 * with a small round count badge on its corner (hidden when the cart is empty).
 *
 * Markup: inc/cart-icon/cart-icon.php (replaces Shoptimizer's "basket" box glyph). The mobile
 * menu's bar wears the same classes (inc/mobile-menu), so open and closed look the same.
 * Loaded on every page. Design checks: tests/styles/masthead-cart.json. ≤992px the bag sits in the masthead's outer
 * icon slot (assets/css/masthead.css: Mango's geometry, 2026-10-17).
 */

:root {
	--lp-cart-ink: var(--plp-ink, #1A1A1A);
	--lp-cart-icon: var(--lp-search-icon, 20px);        /* = the masthead magnifier */
	--lp-cart-stroke: 1;                                /* = the magnifier's: 1 unit of the 16-unit glyph = 1.25px */
	--lp-cart-badge: 15px;                              /* the count disc (min width = height; a two-digit count widens it into a pill) */
	--lp-cart-badge-radius: 999px;                      /* a disc again — the owner, 2026-10-13: "תחזיר את העיגול למספר מוצרים בסל, לא אהבתי את הריבוע" (the square of 2026-10-12, round 6, reverted) */
	--lp-cart-badge-font: 10px;
	--lp-cart-badge-bg: var(--plp-ink, #1A1A1A);
	--lp-cart-badge-ink: var(--white, #FFFFFF);
	--lp-cart-amount-gap: 10px;                         /* count badge ↔ subtotal, desktop (the theme hides the subtotal ≤992px) */
}

/* the link: the theme's block / fixed height / padding are replaced by a centred inline row */
.lp-cart {
	display: inline-flex !important;
	align-items: center;
	height: auto !important;
	padding: 0 !important;
	color: var(--lp-cart-ink);
	text-decoration: none;
	line-height: 1;
}
.lp-cart:hover,
.lp-cart:focus {
	color: var(--lp-cart-ink);
	text-decoration: none;
}

/* the bag (its own colour: the theme paints a.cart-contents #000 with more specificity than .lp-cart) */
.lp-cart-glyph {
	position: relative;
	display: inline-block;
	width: var(--lp-cart-icon);
	height: var(--lp-cart-icon);
	line-height: 0;
	color: var(--lp-cart-ink);
}
.lp-cart-icon {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: var(--lp-cart-stroke);
	stroke-linecap: butt;
	stroke-linejoin: miter;
}

/* the count: a small ink disc on the bag's top outer corner; "0" is not shown */
.lp-cart-count {
	position: absolute;
	top: calc(var(--lp-cart-badge) / -3);
	inset-inline-end: calc(var(--lp-cart-badge) / -2);
	box-sizing: border-box;
	min-width: var(--lp-cart-badge);
	height: var(--lp-cart-badge);
	padding: 0 4px;
	border-radius: var(--lp-cart-badge-radius);
	background: var(--lp-cart-badge-bg);
	color: var(--lp-cart-badge-ink);
	font-family: inherit;
	font-size: var(--lp-cart-badge-font);
	font-weight: 600;
	line-height: var(--lp-cart-badge);
	letter-spacing: 0;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.lp-cart-count[data-count="0"] {
	display: none;
}

/* the subtotal next to the bag (desktop), spaced by the row's gap and measured from the count
 * badge, which hangs half its width past the bag's corner — on the subtotal's side in RTL. The
 * theme's own margins on .amount are zeroed: its rtl.css (`margin-right: 0; margin-left: .327em`,
 * written for its amount-then-box order) matched our old margin's specificity and loaded later,
 * so the gap never applied and the badge sat on the price's last digit (2026-10-10). */
.site-header .lp-cart {
	gap: calc(var(--lp-cart-badge) / 2 + var(--lp-cart-amount-gap));
}
.site-header .shoptimizer-cart .lp-cart .amount {
	margin: 0;
}

/* the theme's slot was sized for its 28px box: a 26.5px line parked at top 21px ≤992px and a 50px
 * flex row on desktop whose block child sets the link on a 50px line. Centre the bag on the
 * masthead's axis instead, where the magnifier is (inc/search centres its trigger over the full
 * height): the wrapper becomes a centred flex row the glyph's height, the desktop nav centres it. */
.site-header .main-header .shoptimizer-cart {
	display: flex !important;
	align-items: center;
	height: auto !important;
	line-height: 0;
}
@media (max-width: 992px) {
	/* the masthead's outer icon slot (assets/css/masthead.css: Mango's geometry): 36×48 at 10px from the edge, the bag centred */
	.site-header .main-header .site-header-cart {
		top: calc((var(--lp-mast-h-m, 60px) - var(--lp-mast-slot-h, 48px)) / 2) !important;
		bottom: auto !important;
		inset-inline-end: var(--lp-mast-edge, 10px) !important;
		inset-inline-start: auto !important;
		width: var(--lp-mast-slot-w, 36px) !important;
		height: var(--lp-mast-slot-h, 48px) !important;
		margin: 0 !important;
		line-height: 0;
	}
	.site-header .main-header .shoptimizer-cart,
	.site-header .main-header .lp-cart {
		width: 100%;
		height: 100% !important;
		justify-content: center;
		margin: 0;
	}
	.site-header .main-header .lp-cart-glyph {
		color: var(--lp-mast-icon-ink, #131313);
	}
}
@media (min-width: 993px) {
	.site-header .main-header .site-header-cart {
		align-items: center;
	}
}