/**
 * Love Pharm · the phone masthead (≤992px) on Mango's measurements.
 *
 * The owner, 2026-10-16/17: the phone site exactly like Mango's ("בדיוק מחריד, כולל דיוק בקוים בגבהים בגדלים במרחקים"),
 * the wordmark centred, the menu keeping this masthead as its bar. Every value below was measured on
 * shop.mango.com at 390px (headless Chrome, 3x; brain love-pharm/design/research/2026-10-16-mango-mobile-reference)
 * and mirrored for RTL. What else draws the masthead: the wordmark's size (assets/css/text-logo.css), the bag's slot
 * (inc/cart-icon/cart-icon.css), the magnifier's slot (inc/search/search.css) — all read these tokens; the phone
 * sheet's bar repeats them (assets/css/mobile-menu.css).
 */

:root {
	--lp-mast-h-m: 60px;             /* the bar's height */
	--lp-mast-ink: #121212;          /* the hamburger (and the wordmark: --lp-logo-color) */
	--lp-mast-icon-ink: #131313;     /* the magnifier and the bag */
	--lp-mast-slot-w: 36px;          /* an icon's tap slot = the icons' pitch */
	--lp-mast-slot-h: 48px;
	--lp-mast-edge: 10px;            /* the outer slots (the hamburger's, the bag's) from the screen edge */
	--lp-burger-w: 15px;             /* the hamburger: Mango's icon — three 15 × 1.25px lines 4.375px apart, a 15 × 10px glyph … */
	--lp-burger-h: 10px;
	--lp-burger-top: 19px;           /* … the first line at y 25 (the slot starts at 6) … */
	--lp-burger-inset: 11.5px;       /* … 11.5px inside the slot's outer edge (x 353.5–368.5) */
	/* the glyph, drawn like Mango's (an icon, not boxes): 1 unit = 1.25px, lines at 0 / 3.5 / 7 units */
	--lp-burger-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12v1H0zM0 3.5h12v1H0zM0 7h12v1H0z'/%3E%3C/svg%3E");
}

@media (max-width: 992px) {
	/* the theme prints the Customizer's 70px inline */
	.site-header .main-header,
	.site-header .site-branding {
		height: var(--lp-mast-h-m) !important;
	}

	/* the hamburger: its slot at the inline start, three thin lines drawn as one icon. Shoptimizer's three .bar boxes
	 * snap to whole points on every screen — the middle line (y 29.375–30.625) drew 2px, the others 1px (the owner,
	 * 2026-10-25: "ההמבורגר … נראים שבורים לגמרי"); a masked glyph is anti-aliased like Mango's SVG, three equal lines. */
	.site-header .site-branding .menu-toggle {
		top: calc((var(--lp-mast-h-m) - var(--lp-mast-slot-h)) / 2) !important;
		inset-inline-start: var(--lp-mast-edge) !important;
		inset-inline-end: auto !important;
		width: var(--lp-mast-slot-w) !important;
		height: var(--lp-mast-slot-h) !important;
		margin: 0 !important;
	}
	.site-header .site-branding .menu-toggle .bar {
		display: none !important;
	}
	.site-header .site-branding .menu-toggle::before {
		content: "";
		position: absolute;
		top: var(--lp-burger-top);
		inset-inline-start: var(--lp-burger-inset);
		width: var(--lp-burger-w);
		height: var(--lp-burger-h);
		background-color: var(--lp-mast-ink);
		-webkit-mask: var(--lp-burger-glyph) center / 100% 100% no-repeat;
		mask: var(--lp-burger-glyph) center / 100% 100% no-repeat;
	}

	/* the wordmark: centred on the screen (the owner's pick), its caps 23.17–36.91 like Mango's (the image starts 10 units above the caps) */
	.site-header .site-branding .custom-logo-link {
		position: absolute;
		top: calc(23.17px - 10 * var(--lp-logo-unit-m));
		left: 50%;
		transform: translateX(-50%);
		margin: 0;
	}
}