/**
 * Shop Kit · Mobile menu — the sheet (markup: mobile-menu.php, behaviour: mobile-menu.js).
 *
 * Theme-agnostic: the store redefines the --sk-menu-* tokens in a stylesheet loaded after this
 * one, and the parent theme's adapter (themes/<theme>.css) retires the theme's own drawer and
 * puts the bar's controls on the masthead's geometry. Every value is a token with a neutral
 * default; nothing here knows a store.
 *
 * The pattern: a drill-down sheet. One list with presence on the root level (rows with a
 * hairline between them, a thin chevron or line icon), a parent's own level sliding in from
 * the chevrons' side with a head (back + name), its rows, its small titled groups and a
 * sideways row of product tiles; after air, the site's footer groups as quieter + rows.
 */

:root {
	--sk-menu-bg: #ffffff;
	--sk-menu-ink: #000000;                /* rows, titles, glyphs: true black */
	--sk-menu-bar-ink: var(--sk-menu-ink);  /* the bar's ✕, magnifier and bag; a store maps it to its masthead's ink so the bar mirrors the masthead to the colour */
	--sk-menu-muted: #6b6560;
	--sk-menu-line: #e2e2e2;               /* hairlines: under a level's head, under a group's title, the footer block */
	--sk-menu-line-w: 0px;                 /* a hairline between two rows: 0 = air between rows (Nordstrom, Net-a-Porter, Revolve); 1px = Dillard's lines */
	--sk-menu-section-gap: 16px;           /* air between the collections and the categories */
	--sk-menu-focus: #000000;
	--sk-menu-scrim: rgba(26, 26, 26, 0.42);
	--sk-menu-z: 99990;
	--sk-menu-motion: 220ms;               /* the sheet and the levels; a harness sets 0ms */
	--sk-menu-ease: ease-out;
	--sk-menu-level-from: 100%;            /* where a level waits: a full width beyond the inline end (a smaller share + a fade = Mango's) */
	--sk-menu-level-fade: 1;               /* a waiting level's opacity: 1 = a pure slide, 0 = it fades in as it slides */
	--sk-menu-fade-motion: var(--sk-menu-motion);
	--sk-menu-back-motion: var(--sk-menu-motion);  /* the way back: the level slides out, the root returns */
	--sk-menu-back-fade: var(--sk-menu-fade-motion);
	--sk-menu-root-out: 0%;                /* how far the root moves toward the inline start as a level comes in (0 = it stays under it) */
	--sk-menu-bar-h: 70px;                 /* = the masthead's height (the store's measured token) */
	--sk-menu-gutter: 15px;                /* = the masthead's side gutter: the bar only */
	--sk-menu-inset: 24px;                 /* the content's distance from the screen edges */
	--sk-menu-hit: 44px;                   /* touch target of the ✕ and the back chevron */
	--sk-menu-icon: 22px;                  /* the ✕ (= the hamburger's bar width) */
	--sk-menu-stroke: 1.25;                /* every glyph: chevrons, +, line icons */
	--sk-menu-brand-font: inherit;         /* the wordmark, as the masthead draws it */
	--sk-menu-brand-size: 20px;
	--sk-menu-brand-weight: 500;
	--sk-menu-brand-tracking: 0.18em;
	--sk-menu-brand-color: var(--sk-menu-ink);
	--sk-menu-search-icon: 20px;           /* the bar's magnifier (the store's search trigger) */
	--sk-menu-search-offset: 55px;         /* its distance from the inline end (the store's masthead slot) */
	--sk-menu-cart-icon: 20px;
	--sk-menu-row-size: 20px;              /* root rows */
	--sk-menu-row-weight: 400;
	--sk-menu-row-h: 56px;
	--sk-menu-row-icon: 22px;              /* a collection row's line icon */
	--sk-menu-row-gap: 14px;               /* icon ↔ label */
	--sk-menu-chevron: 20px;
	--sk-menu-head-size: 20px;             /* a level's name in its head */
	--sk-menu-head-weight: 500;
	--sk-menu-head-h: 56px;
	--sk-menu-sub-size: 18px;              /* a level's rows */
	--sk-menu-sub-h: 56px;
	--sk-menu-group-gap: 28px;             /* air over a titled group / the tiles */
	--sk-menu-group-title-size: 14px;
	--sk-menu-group-title-weight: 600;
	--sk-menu-group-size: 16px;            /* a group's rows */
	--sk-menu-group-h: 48px;
	--sk-menu-tile-w: 150px;
	--sk-menu-tile-gap: 12px;
	--sk-menu-tile-bg: #f3f3f3;
	--sk-menu-tile-pad: 10%;
	--sk-menu-tile-name-size: 13px;
	--sk-menu-tile-name-weight: 600;
	--sk-menu-tile-text-size: 12px;
	--sk-menu-tile-price-size: 13px;
	--sk-menu-tile-price-weight: 500;
	--sk-menu-foot-gap: 40px;              /* air between the last row and the footer block */
	--sk-menu-foot-size: 15px;             /* the footer groups' rows */
	--sk-menu-foot-weight: 400;
	--sk-menu-foot-h: 48px;
	--sk-menu-foot-plus: 18px;
	--sk-menu-foot-link-size: 14px;
	--sk-menu-foot-link-h: 40px;
	--sk-menu-copyright-size: 12px;
	--sk-menu-panel-w: 420px;              /* ≥600px (tablets): a side panel over the scrim, not a takeover */
}

/* ---------- shell */
.sk-menu {
	position: fixed;
	inset: 0;
	z-index: var(--sk-menu-z);
	font-weight: var(--sk-menu-row-weight);
	line-height: 1.3;
	color: var(--sk-menu-ink);
	text-align: start;
}
.sk-menu[hidden] {
	display: none;
}
@media (min-width: 993px) {
	.sk-menu {
		display: none !important;   /* desktop has the menu bar */
	}
}
html.sk-menu-open,
html.sk-menu-open body {
	overflow: hidden;   /* the page stays put under the sheet */
}
.sk-menu__scrim {
	position: absolute;
	inset: 0;
	background: var(--sk-menu-scrim);
	opacity: 0;
	transition: opacity var(--sk-menu-motion) ease-out;
}
.sk-menu.is-open .sk-menu__scrim {
	opacity: 1;
}
.sk-menu__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	background: var(--sk-menu-bg);
	outline: none;
	transform: translateX(100%);   /* parked beyond the inline-start edge (RTL: the right) */
	transition: transform var(--sk-menu-motion) ease-out;
}
html[dir="ltr"] .sk-menu__panel {
	transform: translateX(-100%);
}
.sk-menu.is-open .sk-menu__panel {
	transform: none;
}
@media (min-width: 600px) and (max-width: 992px) {
	.sk-menu__panel {
		width: var(--sk-menu-panel-w);
	}
}

/* ---------- bar: the masthead, mirrored (✕ where the hamburger was, the brand centred, the store's search and cart at their places) */
.sk-menu__bar {
	position: relative;
	flex: 0 0 auto;
	height: var(--sk-menu-bar-h);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sk-menu__brand {
	font-family: var(--sk-menu-brand-font);
	font-size: var(--sk-menu-brand-size);
	font-weight: var(--sk-menu-brand-weight);
	line-height: 1;
	letter-spacing: var(--sk-menu-brand-tracking);
	text-transform: uppercase;
	color: var(--sk-menu-brand-color);
	text-decoration: none;
	white-space: nowrap;
	direction: ltr;
	unicode-bidi: isolate;
}
.sk-menu__brand:hover,
.sk-menu__brand:focus {
	color: var(--sk-menu-brand-color);
	text-decoration: none;
}
.sk-menu__brand--logo img {
	display: block;
	max-height: calc(var(--sk-menu-bar-h) - 2 * var(--sk-menu-gutter));
	width: auto;
}
.sk-menu__close,
.sk-menu__back,
.sk-menu__row--parent {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.sk-menu__close {
	position: absolute;
	top: 50%;
	/* The hamburger's bars start --sk-menu-gutter from the edge and are --sk-menu-icon wide; a --sk-menu-hit box centred on them. */
	inset-inline-start: calc(var(--sk-menu-gutter) - (var(--sk-menu-hit) - var(--sk-menu-icon)) / 2);
	width: var(--sk-menu-hit);
	height: var(--sk-menu-hit);
	margin-top: calc(var(--sk-menu-hit) / -2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sk-menu-bar-ink);
}
.sk-menu__close-icon {
	width: var(--sk-menu-icon);
	height: var(--sk-menu-icon);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
}
.sk-menu__cart {
	position: absolute;
	top: 50%;
	inset-inline-end: var(--sk-menu-gutter);
	margin-top: calc(var(--sk-menu-cart-icon) / -2);
	color: var(--sk-menu-bar-ink);
	line-height: 0;
	text-decoration: none;
}
.sk-menu__cart-glyph {
	position: relative;
	display: inline-block;
	line-height: 0;
}
.sk-menu__cart-icon {
	width: var(--sk-menu-cart-icon);
	height: var(--sk-menu-cart-icon);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.sk-menu__cart-count {
	position: absolute;
	top: -6px;
	inset-inline-end: -8px;
	min-width: 15px;
	height: 15px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--sk-menu-ink);
	color: var(--sk-menu-bg);
	font-size: 10px;
	font-weight: 600;
	line-height: 15px;
	text-align: center;
}
.sk-menu__cart-count[data-count="0"] {
	display: none;
}

/* ---------- the stack of levels: the root scrolls; a parent's level slides in over it from the chevrons' side */
.sk-menu__stack {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}
.sk-menu__level {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--sk-menu-bg);
	outline: none;
	transform: translateX(calc(-1 * var(--sk-menu-level-from)));   /* parked beyond the inline-end edge (RTL: the left, where the chevrons point) */
	opacity: var(--sk-menu-level-fade);
	visibility: hidden;
	/* these timings run when the level leaves (the way back) */
	transition: transform var(--sk-menu-back-motion) var(--sk-menu-ease), opacity var(--sk-menu-back-fade) var(--sk-menu-ease), visibility 0s linear var(--sk-menu-back-motion);
}
html[dir="ltr"] .sk-menu__level {
	transform: translateX(var(--sk-menu-level-from));
}
.sk-menu__level.is-active {
	transform: none;
	opacity: 1;
	visibility: visible;
	transition: transform var(--sk-menu-motion) var(--sk-menu-ease), opacity var(--sk-menu-fade-motion) var(--sk-menu-ease), visibility 0s;
}
.sk-menu__level--root {
	transform: none;
	opacity: 1;
	visibility: visible;
	transition: transform var(--sk-menu-back-motion) var(--sk-menu-ease);
}
.sk-menu__level--root.is-behind {
	transform: translateX(var(--sk-menu-root-out));   /* toward the inline start (RTL: the right) */
	visibility: hidden;   /* after the child has slid over it: no scroll bleed, no focus */
	transition: transform var(--sk-menu-motion) var(--sk-menu-ease), visibility 0s linear var(--sk-menu-motion);
}
html[dir="ltr"] .sk-menu__level--root.is-behind {
	transform: translateX(calc(-1 * var(--sk-menu-root-out)));
}

/* ---------- rows: one list with presence; a hairline between two rows (none under the bar) */
.sk-menu__section {
	flex: 0 0 auto;
	padding: 0 var(--sk-menu-inset);
}
.sk-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sk-menu__item {
	margin: 0;
	padding: 0;
	border-top: var(--sk-menu-line-w) solid var(--sk-menu-line);
}
.sk-menu__section:first-child .sk-menu__item:first-child,
.sk-menu__list--level .sk-menu__item:first-child,
.sk-menu__list--group .sk-menu__item:first-child {
	border-top: 0;
}
.sk-menu__section + .sk-menu__section {
	margin-top: var(--sk-menu-section-gap);
}
.sk-menu__row {
	display: flex;
	align-items: center;
	gap: var(--sk-menu-row-gap);
	width: 100%;
	min-height: var(--sk-menu-row-h);
	padding: 8px 0;
	box-sizing: border-box;
	font-size: var(--sk-menu-row-size);
	font-weight: var(--sk-menu-row-weight);
	letter-spacing: 0;
	color: var(--sk-menu-ink);
	text-decoration: none;
}
.sk-menu__row:hover,
.sk-menu__row:focus {
	color: var(--sk-menu-ink);
	text-decoration: none;
}
.sk-menu__row:active {
	color: var(--sk-menu-muted);   /* press feedback, no background */
}
.sk-menu__label {
	flex: 1 1 auto;
	min-width: 0;
}
.sk-menu__icon {
	flex: 0 0 auto;
	width: var(--sk-menu-row-icon);
	height: var(--sk-menu-row-icon);
	line-height: 0;
}
.sk-menu__icon svg {
	width: 100%;
	height: 100%;
}
.sk-menu__icon svg,
.sk-menu__chevron,
.sk-menu__back-icon,
.sk-menu__plus {
	fill: none;
	stroke: currentColor;
	stroke-width: var(--sk-menu-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
}
.sk-menu__chevron {
	flex: 0 0 auto;
	width: var(--sk-menu-chevron);
	height: var(--sk-menu-chevron);
}
html[dir="ltr"] .sk-menu__chevron,
html[dir="ltr"] .sk-menu__back-icon {
	transform: scaleX(-1);
}

/* ---------- a parent's level */
.sk-menu__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: var(--sk-menu-head-h);
	margin: 0 var(--sk-menu-inset);   /* the head's hairline = the rows' width */
	padding: 0;
	border-bottom: 1px solid var(--sk-menu-line);
}
.sk-menu__back {
	flex: 0 0 auto;
	margin-inline-start: calc((var(--sk-menu-hit) - var(--sk-menu-chevron)) / -2);   /* the chevron's glyph on the rows' text edge, its hit area beyond it */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sk-menu-hit);
	height: var(--sk-menu-hit);
	color: var(--sk-menu-ink);
}
.sk-menu__back-icon {
	width: var(--sk-menu-chevron);
	height: var(--sk-menu-chevron);
}
.sk-menu__head-title {
	flex: 1 1 auto;
	margin: 0;
	font-size: var(--sk-menu-head-size);
	font-weight: var(--sk-menu-head-weight);
	line-height: 1.2;
}
.sk-menu__level > .sk-menu__list,
.sk-menu__group {
	flex: 0 0 auto;
	margin-inline: var(--sk-menu-inset);
}
.sk-menu__level > .sk-menu__tiles {
	flex: 0 0 auto;
}
.sk-menu__list--level .sk-menu__row {
	min-height: var(--sk-menu-sub-h);
	font-size: var(--sk-menu-sub-size);
}
.sk-menu__group {
	margin-top: var(--sk-menu-group-gap);
}
.sk-menu__group-title {
	margin: 0;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--sk-menu-line);
	font-size: var(--sk-menu-group-title-size);
	font-weight: var(--sk-menu-group-title-weight);
	line-height: 1.3;
	color: var(--sk-menu-ink);
}
.sk-menu__group-link {
	color: inherit;
	text-decoration: none;
}
.sk-menu__list--group .sk-menu__row {
	min-height: var(--sk-menu-group-h);
	font-size: var(--sk-menu-group-size);
}

/* ---------- tiles: a sideways row that scrolls to the screen's edge */
.sk-menu__tiles {
	display: flex;
	gap: var(--sk-menu-tile-gap);
	margin-top: var(--sk-menu-group-gap);
	margin-inline: 0;
	padding: 0 var(--sk-menu-inset) 16px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--sk-menu-inset);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.sk-menu__tiles::-webkit-scrollbar {
	display: none;
}
.sk-menu__group .sk-menu__tiles {
	margin-inline: calc(-1 * var(--sk-menu-inset));
}
.sk-menu__tile {
	flex: 0 0 var(--sk-menu-tile-w);
	scroll-snap-align: start;
	color: var(--sk-menu-ink);
	text-decoration: none;
}
.sk-menu__tile-media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--sk-menu-tile-bg);
}
.sk-menu__tile-media img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: var(--sk-menu-tile-pad);
	object-fit: contain;
}
.sk-menu__tile-name,
.sk-menu__tile-text,
.sk-menu__tile-price {
	display: block;
	line-height: 1.35;
}
.sk-menu__tile-name {
	margin-top: 10px;
	font-size: var(--sk-menu-tile-name-size);
	font-weight: var(--sk-menu-tile-name-weight);
}
.sk-menu__tile-text {
	margin-top: 2px;
	font-size: var(--sk-menu-tile-text-size);
	color: var(--sk-menu-muted);
}
.sk-menu__tile-price {
	margin-top: 4px;
	font-size: var(--sk-menu-tile-price-size);
	font-weight: var(--sk-menu-tile-price-weight);
	font-variant-numeric: tabular-nums;
}

/* ---------- the footer, inside the sheet: air, the groups as quieter + rows, the copyright */
.sk-menu__foot {
	flex: 0 0 auto;
	margin-top: auto;   /* short content (tablet): still at the bottom */
	padding: var(--sk-menu-foot-gap) var(--sk-menu-inset) calc(16px + env(safe-area-inset-bottom, 0px));
}
.sk-menu__foot-group {
	border-top: 1px solid var(--sk-menu-line);
}
.sk-menu__foot-group:last-child {
	border-bottom: 1px solid var(--sk-menu-line);
}
.sk-menu__foot-title {
	display: flex;
	align-items: center;
	gap: var(--sk-menu-row-gap);
	min-height: var(--sk-menu-foot-h);
	padding: 6px 0;
	box-sizing: border-box;
	list-style: none;
	font-size: var(--sk-menu-foot-size);
	font-weight: var(--sk-menu-foot-weight);
	color: var(--sk-menu-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
.sk-menu__foot-title::-webkit-details-marker {
	display: none;
}
.sk-menu__plus {
	flex: 0 0 auto;
	width: var(--sk-menu-foot-plus);
	height: var(--sk-menu-foot-plus);
}
.sk-menu__plus-v {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform var(--sk-menu-motion) ease-out;
}
.sk-menu__foot-group[open] > .sk-menu__foot-title .sk-menu__plus-v {
	transform: scaleY(0);   /* + folds to − */
}
.sk-menu__foot-list {
	list-style: none;
	margin: 0;
	padding: 0 0 10px;
}
.sk-menu__foot-item {
	margin: 0;
}
.sk-menu__foot-link {
	display: block;
	min-height: var(--sk-menu-foot-link-h);
	padding: 10px 0;
	box-sizing: border-box;
	font-size: var(--sk-menu-foot-link-size);
	color: var(--sk-menu-ink);
	text-decoration: none;
}
.sk-menu__foot-link:active {
	color: var(--sk-menu-muted);
}
.sk-menu__copyright {
	margin: 20px 0 0;
	font-size: var(--sk-menu-copyright-size);
	line-height: 1.5;
	color: var(--sk-menu-muted);
}

/* ---------- focus + motion */
.sk-menu :focus-visible {
	outline: 2px solid var(--sk-menu-focus);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.sk-menu__panel,
	.sk-menu__scrim,
	.sk-menu__level,
	.sk-menu__plus-v {
		transition: none;
	}
}

/* ---------- the store's search trigger in the bar (printed by the store through the filter, with its own class
 * too; its stylesheet may style that class as the masthead's trigger — these rules place it in the bar and win) */
.sk-menu .sk-menu__search {
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-end: var(--sk-menu-search-offset);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sk-menu-search-icon);
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--sk-menu-bar-ink) !important;
	cursor: pointer;
}
.sk-menu .sk-menu__search-icon {
	width: var(--sk-menu-search-icon);
	height: var(--sk-menu-search-icon);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}