/**
 * Love Pharm · the phone menu's look — Mango's, measured (the owner, 2026-10-16/17: "פשוט העתק מדויק … בדיוק
 * מחריד"). The shop-kit plugin's mobile-menu module draws the sheet (markup, the levels, behaviour); this file gives it
 * this store's values. Auto-enqueued by functions.php's assets/css loader (priority 30), after the plugin's
 * stylesheet, so its tokens and rules win.
 *
 * What Mango does at 390px, mirrored for RTL (brain love-pharm/design/research/2026-10-16-mango-mobile-reference):
 *   - the bar is this store's masthead (the owner's answer), on the masthead's pixels (assets/css/masthead.css): the ✕
 *     on the hamburger's lines, the wordmark centred, the magnifier and the bag in their 36×48 slots;
 *   - the root: plain rows 54px apart, the first 8px under the bar, the text 16px from the edge, its baseline 31px into
 *     the row; Mango's 12px/600 caps become Assistant at 15px / 620 — the same letter height (8.4px) and, by eye beside
 *     Mango's caps, the same firmness; the sale row in Mango's red; no lines, chevrons, icons, tiles or footer;
 *   - a parent's level: a 60px row with the back arrow (16px, 16px from the edge) and the parent's name (13/12 of the
 *     rows' size, its baseline at 34, 48px from the edge), then the same rows;
 *   - motion: the level fades in over .5s and slides in from half the width over .4s on Mango's "calm" curve, the root
 *     slides out to the start side; back: a .2s fade, a .3s slide. The sheet itself appears without a slide.
 * The rows, the sale row and the magazine's level come from inc/shop-kit/shop-kit-adapter.php.
 */

/* Assistant as one variable face (the same files WordPress serves as four static weights, 400–700), so the menu gets
 * its exact 620; the stack falls back to the site's own Assistant faces. */
@font-face {
	font-family: "LP Assistant";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("/wp-content/fonts/assistant/2sDcZGJYnIjSi6H75xkzamW5O7w.woff2") format("woff2");
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
	font-family: "LP Assistant";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("/wp-content/fonts/assistant/2sDcZGJYnIjSi6H75xkzaGW5.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--lp-menu-link: #000;                       /* the desktop panel's link black (the owner, 2026-10-10; assets/css/mega-menu.css reads it) */

	/* the phone sheet, Mango's values */
	--lp-menu-ink: #131313;                     /* the rows */
	--lp-menu-title-ink: #121212;               /* a level's name */
	--lp-menu-sale: #ba0000;                    /* the sale row */
	--lp-menu-font: "LP Assistant", "Assistant", "Arial Hebrew", Arial, sans-serif;
	--lp-menu-size: 15px;                       /* Mango's 12px caps → the same 8.4px letter height in Assistant */
	--lp-menu-weight: 620;
	--lp-menu-row-h: 54px;
	--lp-menu-inset: 16px;
	--lp-menu-baseline: 31px;                   /* from a row's top */
	--lp-menu-base-off: 5px;                    /* where a line-height:0 line of Assistant at 15px puts its baseline (measured at 3x) */
	--lp-menu-first: 8px;                       /* the root's first row starts 8px under the bar (y 68) */
	--lp-menu-end: 80px;                        /* air after the last row */
	--lp-menu-head-h: 60px;                     /* a level's back row */
	--lp-menu-title-size: calc(var(--lp-menu-size) * 13 / 12);  /* Mango's 13px name over 12px rows */
	--lp-menu-title-baseline: 34px;
	--lp-menu-title-off: 6px;                   /* the same measure at 16.25px */
	--lp-menu-title-inset: 48px;
	--lp-menu-back: 16px;                       /* the back arrow's glyph … */
	--lp-menu-back-hit: 48px;                   /* … in a 48px square at the edge, 6px from the row's top */
	--lp-menu-close-inset: 9px;                 /* the ✕'s 20px glyph inside the hamburger's slot: centred on the lines (x 361) */

	/* the plugin's tokens */
	--sk-menu-bg: var(--white, #fff);
	--sk-menu-ink: var(--lp-menu-ink);
	--sk-menu-bar-ink: var(--lp-mast-icon-ink, #131313);
	--sk-menu-muted: var(--plp-muted);
	--sk-menu-line: var(--border);
	--sk-menu-line-w: 0px;
	--sk-menu-section-gap: 0px;
	--sk-menu-focus: var(--brand);              /* keyboard focus ring — rose, accent only */
	--sk-menu-scrim: var(--lp-search-scrim, rgba(26, 26, 26, 0.42));
	--sk-menu-z: 99990;                         /* above the sticky header, below the search dialog (100000) */
	--sk-menu-bar-h: var(--lp-header-h, 60px);  /* the masthead's measured height */
	--sk-menu-motion: 400ms;                    /* Mango: the level's slide */
	--sk-menu-ease: cubic-bezier(0.3, 0.85, 0.5, 1);
	--sk-menu-level-from: 50%;
	--sk-menu-level-fade: 0;
	--sk-menu-fade-motion: 500ms;
	--sk-menu-back-motion: 300ms;
	--sk-menu-back-fade: 200ms;
	--sk-menu-root-out: 100%;
}

/* ---------- the sheet appears in place (no slide); on close it is gone at once */
.sk-menu .sk-menu__panel {
	transform: none;
	transition: none;
}
.sk-menu:not(.is-open) .sk-menu__panel {
	visibility: hidden;
}

/* ---------- the bar: the masthead's pixels */
.sk-menu .sk-menu__close {
	display: block;
	top: calc((var(--sk-menu-bar-h) - var(--lp-mast-slot-h, 48px)) / 2);
	margin: 0;
	inset-inline-start: var(--lp-mast-edge, 10px);
	width: var(--lp-mast-slot-w, 36px);
	height: var(--lp-mast-slot-h, 48px);
}
.sk-menu .sk-menu__close-icon {
	position: absolute;
	top: calc((var(--lp-mast-slot-h, 48px) - 20px) / 2);
	inset-inline-start: var(--lp-menu-close-inset);
	width: 20px;
	height: 20px;
	stroke-width: 1;
	stroke-linecap: butt;
}
.sk-menu .sk-menu__brand--wordmark {
	position: absolute;
	top: calc(23.17px - 10 * var(--lp-logo-unit-m, 0.045714px));
	left: 50%;
	transform: translateX(-50%);
	line-height: 0;
	color: var(--lp-logo-color, #121212);
}
.sk-menu .sk-menu__brand--wordmark .lp-wordmark {
	height: calc(320 * var(--lp-logo-unit-m, 0.045714px));
}
.sk-menu .sk-menu__bar .sk-menu__search {
	top: calc((var(--sk-menu-bar-h) - var(--lp-mast-slot-h, 48px)) / 2);
	bottom: auto;
	height: var(--lp-mast-slot-h, 48px);
	width: var(--lp-mast-slot-w, 36px);
	inset-inline-end: calc(var(--lp-mast-edge, 10px) + var(--lp-mast-slot-w, 36px));
}
.sk-menu .sk-menu__search-icon {
	stroke-width: 1;
	stroke-linecap: butt;
	stroke-linejoin: miter;
}
.sk-menu .sk-menu__cart {
	top: calc((var(--sk-menu-bar-h) - var(--lp-mast-slot-h, 48px)) / 2);
	margin: 0;
	inset-inline-end: var(--lp-mast-edge, 10px);
	width: var(--lp-mast-slot-w, 36px);
	height: var(--lp-mast-slot-h, 48px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sk-menu .sk-menu__cart .lp-cart-glyph {
	color: var(--lp-mast-icon-ink, #131313);
}

/* ---------- rows */
.sk-menu .sk-menu__section,
.sk-menu .sk-menu__level > .sk-menu__list {
	padding: 0;
	margin: 0;
}
.sk-menu .sk-menu__level--root {
	padding-top: var(--lp-menu-first);
}
.sk-menu .sk-menu__level::after {
	content: "";
	flex: 0 0 var(--lp-menu-end);
}
.sk-menu .sk-menu__item {
	border: 0;
}
.sk-menu .sk-menu__row {
	display: block;
	position: relative;
	height: var(--lp-menu-row-h);
	min-height: 0;
	padding: 0;
	color: var(--lp-menu-ink);
}
.sk-menu .sk-menu__label {
	position: absolute;
	inset-inline-start: var(--lp-menu-inset);
	top: calc(var(--lp-menu-baseline) - var(--lp-menu-base-off));
	white-space: nowrap;
	font-family: var(--lp-menu-font);
	font-size: var(--lp-menu-size);
	font-weight: var(--lp-menu-weight);
	line-height: 0;
	letter-spacing: 0;
}
.sk-menu .sk-menu__chevron,
.sk-menu .sk-menu__icon {
	display: none;
}
.sk-menu .sk-menu-sale > .sk-menu__row,
.sk-menu .sk-menu-sale > .sk-menu__row:hover,
.sk-menu .sk-menu-sale > .sk-menu__row:focus {
	color: var(--lp-menu-sale);
}

/* ---------- a parent's level: the back row */
.sk-menu .sk-menu__head {
	display: block;
	position: relative;
	height: var(--lp-menu-head-h);
	min-height: 0;
	margin: 0;
	border: 0;
}
.sk-menu .sk-menu__back {
	display: block;
	position: absolute;
	inset-inline-start: 0;
	top: calc((var(--lp-menu-head-h) - var(--lp-menu-back-hit)) / 2);
	width: var(--lp-menu-back-hit);
	height: var(--lp-menu-back-hit);
	margin: 0;
	color: var(--lp-menu-ink);
}
.sk-menu .sk-menu__back-icon {
	position: absolute;
	inset-inline-start: var(--lp-menu-inset);
	top: calc((var(--lp-menu-back-hit) - var(--lp-menu-back)) / 2);
	width: var(--lp-menu-back);
	height: var(--lp-menu-back);
	stroke-width: 1;
	stroke-linecap: butt;
	stroke-linejoin: miter;
}
.sk-menu .sk-menu__head-title {
	position: absolute;
	inset-inline-start: var(--lp-menu-title-inset);
	top: calc(var(--lp-menu-title-baseline) - var(--lp-menu-title-off));
	margin: 0;
	white-space: nowrap;
	font-family: var(--lp-menu-font);
	font-size: var(--lp-menu-title-size);
	font-weight: var(--lp-menu-weight);
	line-height: 0;
	color: var(--lp-menu-title-ink);
}