/*
 * SLB mega menu - desktop mega panels + mobile left drawer (one DOM).
 * Own code, no library. Loaded once, only when the mega menu is switched on
 * (inc/slb-megamenu.php). Markup: inc/slb-megamenu.php. Behaviour: slb-megamenu.js.
 *
 * Rules from the owner: NO arrows anywhere; NO product counts; mobile uses + / - rows.
 */

/* LAUNCH BUILD: no @font-face here. 'SLB Script' is declared once, sitewide, by mu-plugins/slb-script-font.php (live: ?v=final24).
   The staging44 copy declared a second one (theme fonts/slb-script, final25) - removed so exactly one font file loads. */

.slb-mm {
	--mm-plum: #543E78;
	--mm-maroon: #8E3969;
	--mm-ink: #2B2630;
	--mm-mute: #6b6475;
	--mm-line: #EDEAF0;
	--mm-cream: #FAF9F6;
	--mm-blush: #F4E8EE;
	font-family: 'Nunito', system-ui, sans-serif;
	color: var(--mm-ink);
}

.slb-mm ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.slb-mm a {
	color: inherit;
	text-decoration: none;
}

.slb-mm a:focus-visible,
.slb-mm button:focus-visible,
.slb-mm input:focus-visible,
.slb-mm__burger:focus-visible {
	outline: 2px solid var(--mm-maroon);
	outline-offset: 2px;
}

.slb-mm__burger,
.slb-mm__dhead,
.slb-mm__search,
.slb-mm__dfoot,
.slb-mm__scrim[hidden] {
	display: none;
}

/* ================= DESKTOP (981px and up) ================= */

@media (min-width: 981px) {
	/*
	 * The previous header, kept: THREE ZONES. Left group | logo centred | right group + icons.
	 * minmax(0, 1fr) on both sides keeps the logo dead centre whatever the menu holds.
	 * <nav> and its body are display: contents so the two <ul> groups become grid items of the bar.
	 */
	.slb-hdr .slb-hdr__bar--mm {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: stretch;
		gap: 24px;
		max-width: 1344px;
		margin: 0 auto;
		padding: 0 48px;
		min-height: 84px;
		box-sizing: border-box;
	}

	.slb-hdr--mm .slb-hdr__brand {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
	}

	/* Account + cart: far right, same cell as the right group. */
	.slb-hdr--mm .slb-hdr__tools {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		align-self: center;
	}

	.slb-mm,
	.slb-mm__dbody {
		display: contents;
	}

	.slb-mm__top {
		grid-row: 1;
		display: flex;
		align-items: stretch;
		gap: 17px;
	}

	.slb-mm .slb-mm__top--l {
		grid-column: 1;
		justify-self: start;
	}

	/* Right group sits left of the two icons (2 x 40px + 6px gap + 16px air). */
	.slb-mm .slb-mm__top--r {
		grid-column: 3;
		justify-self: end;
		margin-right: 102px;
	}

	.slb-mm__item {
		display: flex;
		align-items: center;
		position: static;
	}

	.slb-mm__link {
		display: block;
		padding: 10px 0;
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.1px;
		line-height: 1.2;
		white-space: nowrap;
	}

	.slb-mm__item:hover > .slb-mm__link,
	.slb-mm__item.is-open > .slb-mm__link,
	.slb-mm__item:focus-within > .slb-mm__link {
		color: #543E78;
	}

	/* The previous header's hover line: 1px, grows from the left under the label. */
	.slb-mm__link::after {
		content: '';
		display: block;
		height: 1px;
		margin-top: 4px;
		background: #543E78;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.25s ease;
	}

	.slb-mm__item:hover > .slb-mm__link::after,
	.slb-mm__item.is-open > .slb-mm__link::after,
	.slb-mm__item:focus-within > .slb-mm__link::after {
		transform: scaleX(1);
	}

	/* Desktop uses the link itself (aria-expanded on it); the button is the mobile accordion row. */
	.slb-mm__toggle {
		display: none;
	}

	/* ---- panels: display none until opened, so tile images stay unloaded ---- */
	.slb-mm__panel {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 310;
		background: #fff;
		border-top: 1px solid var(--mm-line);
		box-shadow: 0 18px 30px rgba(84, 62, 120, 0.14);
	}

	.slb-mm__item.is-open > .slb-mm__panel {
		display: block;
		animation: slbmm-in 0.14s ease-out;
	}

	@keyframes slbmm-in {
		from { opacity: 0; transform: translateY(-4px); }
		to { opacity: 1; transform: none; }
	}

	.slb-mm__pin {
		--mm-tw: 300px;
		display: grid;
		grid-template-columns: repeat(var(--mm-cols, 1), minmax(0, 1fr)) repeat(var(--mm-tiles, 0), minmax(0, var(--mm-tw)));
		gap: 31px;
		max-width: 1344px;
		margin: 0 auto;
		padding: 25px 32px 26px;
		box-sizing: border-box;
	}

	/* repeat(0, ...) is invalid CSS, so a panel with no tile gets a columns-only template. */
	.slb-mm__panel[style*='--mm-tiles:0'] .slb-mm__pin {
		grid-template-columns: repeat(var(--mm-cols, 1), minmax(0, 1fr));
	}

	[data-k='gift-a-mum'] .slb-mm__pin {
		--mm-tw: 260px;
	}

	[data-k='book-an-ibclc'] .slb-mm__pin {
		--mm-tw: 280px;
		max-width: 1180px;
		margin-left: max(0px, calc((100% - 1344px) / 2));
	}

	[data-k='learn'] .slb-mm__pin,
	[data-k='about'] .slb-mm__pin {
		max-width: 1000px;
		margin-left: max(0px, calc((100% - 1344px) / 2));
	}

	[data-k='about'] .slb-mm__pin {
		max-width: 800px;
	}

	.slb-mm__h {
		margin: 0 0 11px;
		font: 800 12.5px/1.3 'Nunito', sans-serif;
		letter-spacing: 1.4px;
		text-transform: uppercase;
		color: var(--mm-maroon);
	}

	.slb-mm__sub-h {
		margin-top: 17px;
	}

	.slb-mm__col li > a {
		display: block;
		padding: 5.5px 0;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.3;
	}


	.slb-mm__col .slb-mm__all {
		margin-top: 6px;
		border-top: 1px solid var(--mm-line);
	}

	.slb-mm__col .slb-mm__all > a {
		padding-top: 9px;
		color: var(--mm-plum);
		font-weight: 800;
	}

	.slb-mm__col li.slb-mm__note {
		padding: 4px 0 2px;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.45;
		color: var(--mm-ink);
	}

	.slb-mm__col li.slb-mm__note + li > a {
		color: var(--mm-plum);
		font-weight: 800;
	}

	.slb-mm__col li.slb-mm__fine {
		padding: 8px 0 0;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.45;
		color: var(--mm-mute);
	}

	.slb-mm__chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 12px;
	}

	.slb-mm__chips a {
		padding: 8px 14px;
		border: 1.5px solid var(--mm-line);
		border-radius: 999px;
		font-size: 14px;
		font-weight: 700;
		color: var(--mm-plum);
	}


	/* ---- tiles ---- */
	.slb-mm__tile {
		display: block;
		overflow: hidden;
		border-radius: 14px;
		background: var(--mm-blush);
	}

	.slb-mm__tile img {
		display: block;
		width: 100%;
		height: 210px;
		object-fit: cover;
	}

	[data-k='gift-a-mum'] .slb-mm__tile img {
		height: 170px;
	}

	.slb-mm__cap {
		display: block;
		padding: 14px 16px 16px;
	}

	.slb-mm__cap b {
		display: block;
		font-size: 18px;
		line-height: 1.25;
		color: var(--mm-plum);
	}

	.slb-mm__tile-sub {
		display: block;
		margin-top: 4px;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.4;
		color: var(--mm-mute);
	}

	.slb-mm__cap i {
		display: inline-block;
		margin-top: 10px;
		font-style: normal;
		font-size: 14px;
		font-weight: 800;
		color: var(--mm-maroon);
	}

	.slb-mm__tile--gc {
		background: var(--mm-plum);
	}

	.slb-mm__tile--gc img {
		object-fit: contain;
		background: #6a4f8c;
		padding: 10px;
		box-sizing: border-box;
	}

	.slb-mm__tile--gc .slb-mm__cap b { color: #fff; }
	.slb-mm__tile--gc .slb-mm__tile-sub { color: #e3d8ee; }
	.slb-mm__tile--gc .slb-mm__cap i { color: #f1d6e5; }

	.slb-mm__tile--solid {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: 290px;
		padding: 26px 22px;
		box-sizing: border-box;
		background: var(--mm-plum);
		color: #fff;
	}

	.slb-mm__script {
		display: block;
		font-family: 'SLB Script', 'Nunito', cursive;
		font-size: 44px;
		line-height: 1;
		color: #f1d6e5;
	}

	.slb-mm__tile--solid b {
		display: block;
		margin-top: 8px;
		font-size: 20px;
		color: #fff;
	}

	.slb-mm__tile--solid .slb-mm__tile-sub {
		color: #e3d8ee;
		font-size: 14.5px;
	}

	.slb-mm__tile--solid i {
		display: inline-block;
		align-self: flex-start;
		margin-top: 14px;
		padding: 10px 16px;
		border-radius: 999px;
		background: #fff;
		color: var(--mm-plum);
		font-style: normal;
		font-weight: 800;
		font-size: 14px;
	}

	.slb-mm__scrim {
		position: fixed;
		inset: 0;
		z-index: 290;
		background: rgba(43, 34, 54, 0.28);
	}
}

/* Up to 1440 the previous header had no max width: same here. */
@media (min-width: 981px) and (max-width: 1440px) {
	.slb-hdr .slb-hdr__bar--mm { max-width: none; }
}

@media (min-width: 981px) and (max-width: 1180px) {
	.slb-hdr .slb-hdr__bar--mm { gap: 16px; padding: 0 28px; }
	.slb-mm__top { gap: 12px; }
}

/* ================= MOBILE DRAWER (980px and down) ================= */

@media (max-width: 980px) {
	.slb-hdr .slb-hdr__bar--mm {
		display: flex;
		align-items: center;
		gap: 0;
		padding: 0 6px 0 4px;
		min-height: 64px;
	}

	.slb-mm__burger {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--slb-plum, #543E78);
		cursor: pointer;
	}

	.slb-mm__burger-bars,
	.slb-mm__burger-bars::before,
	.slb-mm__burger-bars::after {
		display: block;
		width: 22px;
		height: 2.5px;
		border-radius: 2px;
		background: currentColor;
		position: relative;
	}

	.slb-mm__burger-bars::before,
	.slb-mm__burger-bars::after {
		content: '';
		position: absolute;
		left: 0;
	}

	.slb-mm__burger-bars::before { top: -7px; }
	.slb-mm__burger-bars::after { top: 7px; }

	.slb-hdr--mm .slb-hdr__brand {
		flex: 1;
		justify-content: center;
		min-width: 0;
	}

	.slb-hdr--mm .slb-hdr__tools {
		flex: none;
	}

	.slb-mm {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 100001;
		display: flex;
		flex-direction: column;
		width: 86%;
		max-width: 360px;
		background: #fff;
		transform: translateX(-102%);
		visibility: hidden;
		transition: transform 0.28s ease, visibility 0s linear 0.28s;
	}

	.slb-mm.is-drawer-open {
		transform: none;
		visibility: visible;
		transition: transform 0.28s ease;
		box-shadow: 12px 0 30px rgba(43, 34, 54, 0.25);
	}

	.slb-mm__dhead {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: none;
		min-height: 64px;
		padding: 6px 8px 6px 20px;
		border-bottom: 1px solid var(--mm-line);
	}

	.slb-mm__dhead .custom-logo-link,
	.slb-mm__dhead a {
		display: inline-flex;
		align-items: center;
	}

	.slb-mm__dhead img,
	.slb-hdr .slb-mm__dhead .custom-logo-link img {
		height: 36px !important;
		max-height: none !important;
		width: auto !important;
		max-width: none !important;
		padding: 0 !important;
	}

	.slb-mm__close {
		flex: none;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		background: none;
		font-size: 32px;
		line-height: 1;
		color: var(--mm-plum);
		cursor: pointer;
	}

	.slb-mm__dbody {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.slb-mm__search {
		display: block;
		margin: 14px 16px 6px;
	}

	.slb-mm__search input[type='search'] {
		display: block;
		width: 100%;
		height: 48px;
		padding: 0 14px;
		box-sizing: border-box;
		border: 1.5px solid var(--mm-line);
		border-radius: 12px;
		background: var(--mm-cream);
		font: 600 16px 'Nunito', sans-serif;
		color: var(--mm-ink);
		-webkit-appearance: none;
		appearance: none;
	}

	.slb-mm__item {
		display: block;
	}

	/* Rows with a panel: the whole row is the accordion button, with +/- */
	.has-panel > .slb-mm__link {
		display: none;
	}

	.slb-mm__item > .slb-mm__link,
	.slb-mm__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 52px;
		padding: 0 20px;
		box-sizing: border-box;
		border: 0;
		border-bottom: 1px solid var(--mm-line);
		border-radius: 0;
		background: none;
		font: 800 17px 'Nunito', sans-serif;
		color: var(--mm-ink);
		text-align: left;
		cursor: pointer;
	}

	.slb-mm__item > .slb-mm__link { display: flex; }
	.has-panel > .slb-mm__link { display: none; }

	.slb-mm__toggle::after {
		display: block; /* something global sets button::after to display:none */
		content: '+';
		font-size: 26px;
		font-weight: 600;
		line-height: 1;
		color: var(--mm-plum);
	}

	.slb-mm__item.is-open > .slb-mm__toggle { color: var(--mm-maroon); }
	.slb-mm__item.is-open > .slb-mm__toggle::after { content: '\2212'; }

		.slb-mm__panel {
		display: none;
		background: var(--mm-cream);
		padding: 4px 0 11px;
	}

	.slb-mm__item.is-open > .slb-mm__panel {
		display: block;
	}

	.slb-mm__pin { display: block; }

	.slb-mm__h {
		margin: 11px 20px 1px;
		font: 800 13px/1.3 'Nunito', sans-serif;
		letter-spacing: 1.4px;
		text-transform: uppercase;
		color: var(--mm-maroon);
	}

	.slb-mm__col li > a {
		display: flex;
		align-items: center;
		min-height: 46px;
		padding: 3px 20px 3px 28px;
		box-sizing: border-box;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.3;
	}

	.slb-mm__col .slb-mm__all > a {
		font-weight: 800;
		color: var(--mm-plum);
	}

	.slb-mm__col li.slb-mm__note {
		padding: 10px 20px 2px 28px;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.45;
		color: var(--mm-ink);
	}

	.slb-mm__col li.slb-mm__fine {
		padding: 4px 20px 10px 28px;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.45;
		color: var(--mm-mute);
	}

	.slb-mm__chips { display: none; }

	.slb-mm__tile {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 14px 16px 4px;
		padding: 10px;
		border-radius: 14px;
		background: #fff;
		min-height: 88px;
		box-sizing: border-box;
	}

	.slb-mm__tile img {
		flex: none;
		width: 72px;
		height: 72px;
		border-radius: 10px;
		object-fit: cover;
	}

	.slb-mm__cap { display: block; }
	.slb-mm__cap b { display: block; font-size: 16px; color: var(--mm-plum); }
	.slb-mm__cap i { display: block; margin-top: 2px; font-style: normal; font-size: 14px; color: var(--mm-maroon); font-weight: 700; }
	.slb-mm__cap .slb-mm__tile-sub { display: none; }

	.slb-mm__tile--gc,
	.slb-mm__tile--solid {
		display: block;
		padding: 18px;
		min-height: 0;
		background: var(--mm-plum);
		color: #fff;
	}

	.slb-mm__tile--gc img { display: none; }
	.slb-mm__tile--gc .slb-mm__cap b,
	.slb-mm__tile--solid b { display: block; font-size: 18px; color: #fff; }
	.slb-mm__tile--gc .slb-mm__cap .slb-mm__tile-sub,
	.slb-mm__tile--solid .slb-mm__tile-sub { display: block; margin-top: 6px; font-size: 14.5px; font-weight: 600; color: #e3d8ee; }
	.slb-mm__tile--gc .slb-mm__cap i,
	.slb-mm__tile--solid i {
		display: inline-block;
		margin-top: 12px;
		padding: 10px 16px;
		border-radius: 999px;
		background: #fff;
		color: var(--mm-plum);
		font-style: normal;
		font-size: 14px;
		font-weight: 800;
	}

	.slb-mm__script { display: none; }

	.slb-mm__dfoot {
		display: block;
		flex: none;
		padding: 8px 0;
		border-top: 1px solid var(--mm-line);
	}

	.slb-mm__dfoot a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 0 20px;
		font-size: 16px;
		font-weight: 700;
		color: var(--mm-plum);
	}

	.slb-mm__scrim {
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: rgba(43, 34, 54, 0.4);
	}

	body.slb-mm-lock {
		overflow: hidden;
	}

	/* With the drawer open, the header must not be a stacking context, so the
	   drawer and scrim sit above the page's sticky bars and the header alike. */
	body.slb-mm-lock .slb-hdr {
		z-index: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.slb-mm {
		transition: none;
	}

	.slb-mm__item.is-open > .slb-mm__panel {
		animation: none;
	}
}


/* ---- two-line column headings: small stage label over brand name ---- */
.slb-mm__kick,
.slb-mm__brand { display: block; }

.slb-mm__brand {
	margin-top: 3px;
	font: 700 17.5px/1.25 'Nunito', sans-serif;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mm-plum);
}

.slb-mm__brand:empty::before { content: '\00a0'; }

/* ---- link hover/focus = the thin line growing from the left (no box, no pill) ---- */
.slb-mm__lt {
	padding-bottom: 2px;
	background-image: linear-gradient(#543E78, #543E78);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.25s ease;
}

.slb-mm__col li > a,
.slb-mm__chips a,
.slb-mm__item > .slb-mm__link,
.slb-mm__toggle {
	-webkit-tap-highlight-color: transparent;
}

.slb-mm__col li > a:hover,
.slb-mm__col li > a:focus,
.slb-mm__col li > a:active,
.slb-mm__chips a:hover,
.slb-mm__chips a:focus,
.slb-mm__chips a:active,
.slb-mm__toggle:hover,
.slb-mm__toggle:focus,
.slb-mm__toggle:active,
.slb-mm__item > .slb-mm__link:active {
	background-color: transparent;
	box-shadow: none;
}

.slb-mm__col li > a:hover,
.slb-mm__col li > a:focus-visible,
.slb-mm__chips a:hover,
.slb-mm__chips a:focus-visible {
	color: #543E78;
}

.slb-mm__col li > a:focus-visible,
.slb-mm__chips a:focus-visible {
	outline: none; /* the underline is the focus indicator */
}

.slb-mm__col li > a:hover .slb-mm__lt,
.slb-mm__col li > a:focus-visible .slb-mm__lt,
.slb-mm__chips a:hover .slb-mm__lt,
.slb-mm__chips a:focus-visible .slb-mm__lt {
	background-size: 100% 1px;
}

@media (min-width: 981px) {
	/* desktop top-level label already has its own ::after line; no second one */
	.slb-mm__item > .slb-mm__link .slb-mm__lt { background: none; padding: 0; }
}

@media (max-width: 980px) {
	.slb-mm__item > .slb-mm__link:hover,
	.slb-mm__item > .slb-mm__link:focus,
	.slb-mm__toggle:hover,
	.slb-mm__toggle:focus {
		background: none;
	}
	.slb-mm__item > .slb-mm__link:hover .slb-mm__lt,
	.slb-mm__item > .slb-mm__link:focus-visible .slb-mm__lt,
	.slb-mm__toggle:hover .slb-mm__tl,
	.slb-mm__toggle:focus-visible .slb-mm__tl {
		background-size: 100% 1px;
	}
	.slb-mm__tl {
		padding-bottom: 2px;
		background-image: linear-gradient(#543E78, #543E78);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 0 1px;
		transition: background-size 0.25s ease;
	}
	.slb-mm__item > .slb-mm__link:focus-visible,
	.slb-mm__toggle:focus-visible { outline: none; }
	.slb-mm__brand { margin-top: 2px; }
}