/*
 * So Loved By - site header.
 * ------------------------------------------------------------------
 * Written for OUR header markup (.slb-hdr), not Storefront's.
 * Deliberately depends on no Storefront class, so that when the parent
 * theme goes, this file does not.
 *
 * ONE definition per selector. If something needs changing, edit the
 * rule. Do not append an override at the bottom: that habit grew
 * slb-home.css to 2,439 lines with 47 selectors declared more than once,
 * and two attempts to de-duplicate it mechanically both changed the
 * rendering and had to be rolled back.
 *
 * Brand: the logo is the site's existing image (no typeset wordmark).
 * Practice colours never appear on shop furniture. Nothing here may
 * imply anything about supply.
 * ------------------------------------------------------------------
 */

:root {
	--slb-hdr-h: 84px;
}

/* ---- the bar ---- */

/*
 * The element keeps Storefront's .site-header class, because a handful of
 * rules and plugins still target it, so the reset is written as the compound
 * selector .slb-hdr.site-header to outrank the parent theme's own
 * .site-header padding, margin and background. Dropping the class would be
 * cleaner but would silently change anything matching on it.
 */
.slb-hdr,
.slb-hdr.site-header {
	position: relative;
	z-index: 300;
	background: #fff;
	border-bottom: 1px solid #EDEAF0;
	/* Storefront's header carried a bottom margin that left about 65px of
	   dead white between the header and the page. There is none here. */
	margin: 0;
	padding: 0;
}

/*
 * THREE ZONES: navigation left, logo centred, tools right.
 *
 * Built after raphandremy.com's header, which Joanna pointed at: the
 * logo sits in the middle of the bar with the menu to its left and
 * the utilities to its right.
 *
 * grid-template-columns: 1fr auto 1fr is what makes the logo sit dead
 * centre of the PAGE rather than centre of the space left over. The two
 * 1fr columns are always equal, so the middle column lands on the centre
 * line whether the navigation has five items or two. A flex row with
 * justify-content: space-between would put it wherever the nav's width
 * happened to leave it, which drifts every time a menu item changes.
 */
.slb-hdr__bar {
	display: grid;
	/*
	 * minmax(0, 1fr), not a bare 1fr. 1fr carries an automatic minimum, so
	 * a column whose contents are wider than its share grows and pushes the
	 * middle column off the centre line. minmax(0, ...) allows the column to
	 * be narrower than its contents, keeping the two side columns identical
	 * and the logo exactly central whatever the menu holds.
	 */
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	max-width: 1344px;
	margin: 0 auto;
	padding: 14px 48px;
	min-height: var(--slb-hdr-h);
	box-sizing: border-box;
}

.slb-hdr__skip {
	position: absolute;
	left: -9999px;
	top: 0;
}

.slb-hdr__skip:focus {
	left: 8px;
	top: 8px;
	z-index: 400;
	width: auto;
	height: auto;
	padding: 10px 16px;
	background: #fff;
	color: #543E78;
	font-family: 'Nunito', sans-serif;
	font-size: 13px;
	clip: auto;
	clip-path: none;
}

/* ---- branding: the centre column ---- */

.slb-hdr__brand {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.slb-hdr__brand .custom-logo-link,
.slb-hdr__brand picture {
	display: block;
	line-height: 0;
}

/* Logo image (1500x400 original): explicit height, width follows the ratio. Storefront, slb-home.css and the
   Customizer CSS all cap `.custom-logo` (max-width 104/132/210px, max-height 42px !important), which would
   shrink it to ~100px inside the auto-width centre column - so these rules out-rank them on purpose. */
.slb-hdr .slb-hdr__brand img.custom-logo,
.slb-hdr .slb-hdr__brand .custom-logo-link img {
	display: block !important;
	height: 50px !important;
	width: auto !important;
	max-width: none !important;
	max-height: none !important;
	padding: 0 !important;
}

/* ---- navigation ---- */

.slb-hdr__nav {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	justify-content: flex-start;
	min-width: 0;
}

.slb-menu {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.slb-menu li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.slb-menu > li > a {
	display: block;
	padding: 10px 0;
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1px;
	line-height: 1.2;
	color: #2B2630;
	text-decoration: none;
	white-space: nowrap;
}

.slb-menu > li > a:hover,
.slb-menu > li.current-menu-item > a,
.slb-menu > li.current-menu-ancestor > a {
	color: #543E78;
}

/* A quiet rule that grows from the left, instead of an underline on hover
   that shifts the text. */
.slb-menu > li > a::after {
	content: '';
	display: block;
	height: 1px;
	margin-top: 4px;
	background: #543E78;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease;
}

.slb-menu > li > a:hover::after,
.slb-menu > li.current-menu-item > a::after,
.slb-menu > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* ---- dropdown panels ---- */

.slb-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	/* Opens leftward for the last item or two, so a wide panel on
	   "Breastfeeding Tips" cannot push past the right edge of the page. */
	z-index: 310;
	min-width: 240px;
	margin: 0;
	padding: 14px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #EDEAF0;
	border-radius: 2px;
	box-shadow: 0 18px 40px -22px rgba(43, 38, 48, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.slb-menu > li:hover > .sub-menu,
.slb-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.slb-menu .sub-menu a {
	display: block;
	padding: 7px 22px;
	font-family: 'Nunito', sans-serif;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.4;
	color: #2B2630;
	text-decoration: none;
}

.slb-menu .sub-menu a:hover {
	color: #543E78;
	background: #FAF9F6;
}

/*
 * Level three. The Lactation branch runs Lactation > For Tummy > Cookies,
 * Muffins, Brownies and five more. Rather than a second flyout, which is
 * hard to hit with a mouse and impossible on a touch screen, the third
 * level sits inside the same panel, indented under its parent.
 */
.slb-menu .sub-menu .sub-menu {
	position: static;
	min-width: 0;
	margin: 2px 0 6px;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	background: transparent;
}

.slb-menu .sub-menu .sub-menu a {
	padding: 5px 22px 5px 34px;
	font-size: 13px;
	color: #807886;
}

.slb-menu .sub-menu > li.menu-item-has-children > a {
	font-weight: 600;
}

/* ---- account and cart ---- */

.slb-hdr__tools {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
}

/*
 * The right-hand pair sits inside the tools column, to the left of the
 * icons, so the whole group stays flush to the right edge.
 */
.slb-hdr__nav--right {
	grid-column: auto;
	grid-row: auto;
	margin-right: 16px;
}

.slb-menu--right {
	gap: 22px;
}

/* Their panels must open rightward or they fall off the edge of the page. */
.slb-menu--right .sub-menu {
	left: auto;
	right: -18px;
}

.slb-hdr__tool {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #2B2630;
	text-decoration: none;
	border-radius: 50%;
	transition: background 0.2s ease, color 0.2s ease;
}

.slb-hdr__tool:hover {
	color: #543E78;
	background: #FAF9F6;
}

.slb-hdr__icon {
	width: 22px;
	height: 22px;
	display: block;
}

.slb-hdr__count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 9px;
	background: #8E3969;
	color: #fff;
	font-family: 'Nunito', sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.slb-hdr__count--empty {
	display: none;
}

/* ---- the burger, hidden on desktop ---- */

.slb-hdr__burger {
	display: none;
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	width: 40px;
	height: 40px;
	padding: 9px 8px;
	margin: 0;
	box-sizing: border-box;
	background: none;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.slb-hdr__burger-bar {
	display: block;
	width: 100%;
	height: 2px;
	margin: 0 0 5px;
	border-radius: 2px;
	background: #2B2630;
	transition: transform 0.22s ease, opacity 0.22s ease;
}

.slb-hdr__burger-bar:last-child {
	margin-bottom: 0;
}

.slb-hdr[data-open='true'] .slb-hdr__burger-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.slb-hdr[data-open='true'] .slb-hdr__burger-bar:nth-child(2) {
	opacity: 0;
}

.slb-hdr[data-open='true'] .slb-hdr__burger-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==================================================================
 * Below 1440, keep a 48px gutter rather than snapping narrow.
 * ================================================================== */

@media (max-width: 1440px) {
	.slb-hdr__bar {
		max-width: none;
		padding-left: 48px;
		padding-right: 48px;
	}
}

/* ==================================================================
 * Phone and tablet. The navigation becomes a panel under the bar.
 *
 * 980px, not 768px: the breakpoint is set by where six top-level items
 * stop fitting beside the lockup and the two icons, which is what made
 * the old header wrap onto a second line and stand 274px tall.
 * ================================================================== */

@media (max-width: 980px) {
	/* Same three zones on a phone: burger left, mark centred, icons right.
	   The nav becomes a full-width panel on the second grid row. */
	.slb-hdr__bar {
		grid-template-columns: 44px auto 44px;
		gap: 12px;
		padding: 10px 20px;
		min-height: 64px;
	}

	.slb-hdr__burger {
		display: block;
	}

	/*
	 * The right-hand pair joins the burger panel rather than hiding.
	 *
	 * display: none would lose "Lactation Consultant" and "Breastfeeding
	 * Tips" from the phone entirely, because the panel renders the LEFT
	 * zone and those two live in the right one. They move to a third grid
	 * row under the panel instead, so every link in the menu is still
	 * reachable on a phone, which is where most of this traffic is.
	 */
	.slb-hdr__nav--right {
		grid-column: 1 / -1;
		grid-row: 3;
		display: none;
		width: 100%;
		margin-right: 0;
	}

	.slb-hdr[data-open='true'] .slb-hdr__nav--right {
		display: block;
	}

	.slb-menu--right {
		display: block;
		gap: 0;
	}

	/* Opened downward on a phone, so the rightward desktop offset goes. */
	.slb-menu--right .sub-menu {
		right: auto;
	}

	.slb-hdr .slb-hdr__brand img.custom-logo,
	.slb-hdr .slb-hdr__brand .custom-logo-link img {
		height: 36px !important;
	}

	.slb-hdr__nav {
		grid-column: 1 / -1;
		grid-row: 2;
		display: none;
		width: 100%;
		max-height: 72vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		border-top: 1px solid #EDEAF0;
		margin-top: 10px;
		padding-top: 6px;
	}

	.slb-hdr[data-open='true'] .slb-hdr__nav {
		display: block;
	}

	.slb-menu {
		display: block;
		gap: 0;
	}

	.slb-menu > li > a {
		padding: 13px 0;
		font-size: 15px;
		border-bottom: 1px solid #F4F2F6;
	}

	.slb-menu > li > a::after {
		display: none;
	}

	/* Panels are always open on touch: a hover dropdown cannot be reached. */
	.slb-menu .sub-menu,
	.slb-menu .sub-menu .sub-menu {
		position: static;
		min-width: 0;
		margin: 0;
		padding: 0 0 8px 14px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: transparent;
	}

	.slb-menu .sub-menu a {
		padding: 9px 0;
		font-size: 14px;
	}

	.slb-menu .sub-menu .sub-menu a {
		padding: 7px 0 7px 14px;
		font-size: 13.5px;
	}
}


/* ----------------------------------------------------------------------
 * Shop and product pages without the sidebar.
 *
 * body.slb-nosidebar is used, not .slb-nosidebar, so the selector carries
 * one more point of specificity than Storefront's own `.site-content
 * #primary` and wins regardless of which stylesheet loads first. Source
 * order has already caused three regressions on this site.
 * -------------------------------------------------------------------- */

body.slb-nosidebar #primary {
	width: 100%;
	float: none;
	margin-right: 0;
}

body.slb-nosidebar #secondary {
	display: none;
}


/* ----------------------------------------------------------------------
 * Phone: get Add to Basket onto the first screen.
 *
 * Measured before: button at y=988 on an 844px viewport, 190px below the
 * fold. The cost was the gallery rendering 345x520 and the title running
 * to two lines at desktop size.
 *
 * The image is constrained by HEIGHT with width:auto, so it scales down
 * whole. It is deliberately not cropped to a square with object-fit,
 * because product photography here includes packaging shots where a crop
 * would cut the pack.
 *
 * Title size only. Its colour and weight are left alone on purpose, as
 * restyling every product title is a separate decision.
 * -------------------------------------------------------------------- */

@media (max-width: 768px) {

	body.single-product .woocommerce-product-gallery__image img,
	body.single-product .woocommerce-product-gallery img {
		max-height: 54vh;
		width: auto;
		margin-left: auto;
		margin-right: auto;
	}

	body.single-product .product_title {
		font-size: 26px;
		line-height: 1.2;
		margin-bottom: 8px;
	}

	body.single-product .summary .price {
		margin-bottom: 6px;
	}
}


/* ----------------------------------------------------------------------
 * Sticky buy bar, phones only.
 * Hidden above 768px, where the real button is already above the fold.
 * -------------------------------------------------------------------- */

.slb-buybar {
	display: none;
}

@media (max-width: 768px) {

	.slb-buybar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: #FFFFFF;
		border-top: 1px solid #EDEAF0;
		box-shadow: 0 -6px 18px rgba(43, 38, 48, 0.10);
	}

	.slb-buybar[hidden] {
		display: none;
	}

	.slb-buybar__info {
		flex: 1 1 auto;
		min-width: 0;
		line-height: 1.25;
	}

	.slb-buybar__name {
		display: block;
		font-size: 12px;
		color: #807886;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.slb-buybar__price {
		display: block;
		font-size: 15px;
		font-weight: 700;
		color: #2B2630;
	}

	.slb-buybar__price del {
		opacity: 0.5;
		font-weight: 400;
		margin-right: 4px;
	}

	/*
	 * WooCommerce ships a "Price range: X through Y" span for screen
	 * readers inside the price markup. It was rendering visibly in the
	 * bar and printing the range twice. Clipped rather than removed, so
	 * it is still announced.
	 */
	.slb-buybar__price .screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.slb-buybar__price .price,
	.slb-buybar__price ins {
		text-decoration: none;
		font-size: inherit;
		font-weight: inherit;
		color: inherit;
	}

	.slb-buybar__btn {
		flex: 0 0 auto;
		min-height: 44px;           /* a real tap target */
		padding: 0 20px;
		border: 0;
		border-radius: 999px;
		background: #543E78;
		color: #FFFFFF;
		font-family: inherit;
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
	}

	.slb-buybar__btn:active {
		background: #46336A;
	}
}


/* ----------------------------------------------------------------------
 * Phone menu: overlay the page, do not push it.
 *
 * The panel used to sit in flow at grid-row 2 and 3, so opening it grew
 * the header from 81px to 1284px and moved every section below it down
 * by about 1200px. Joanna's words: "when i press menu on phone view.. it
 * gives a very big space".
 *
 * The bar is lifted out of flow while open and floats over the content.
 * Its place is held by a min-height that the header script measures at
 * the moment of opening, so nothing moves in either direction.
 * -------------------------------------------------------------------- */

@media (max-width: 980px) {

	.slb-hdr {
		position: relative;
	}

	.slb-hdr[data-open='true'] .slb-hdr__bar {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 900;
		background: #FFFFFF;
		box-shadow: 0 14px 30px rgba(43, 38, 48, 0.14);
		/* the whole bar scrolls as one, so a long menu never escapes */
		max-height: 100vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * The inner cap is removed: with the bar itself scrolling, a second
	 * scroll area inside it traps the finger and the sub-menus become
	 * hard to reach.
	 */
	.slb-hdr[data-open='true'] .slb-hdr__nav {
		max-height: none;
		overflow-y: visible;
	}

	/*
	 * Free the support links from the 44px icon column.
	 *
	 * The phone grid is 44px auto 44px, and .slb-hdr__tools sits in
	 * column 3. The support nav is nested inside it, so "Lactation
	 * Consultant" and "Confinement Food Recipes" were being laid out in
	 * 44px and wrapped to one letter per line. That single mistake was
	 * most of the 1284px the open header used to occupy.
	 *
	 * display: contents dissolves the tools wrapper while the menu is
	 * open, promoting its children to grid items of the bar, so the nav
	 * can take a full-width row of its own and the icons can stay put.
	 */
	.slb-hdr[data-open='true'] .slb-hdr__tools {
		display: contents;
	}

	.slb-hdr[data-open='true'] .slb-hdr__nav--right {
		grid-column: 1 / -1;
		grid-row: 3;
		display: block;
		width: 100%;
		margin: 0;
	}

	.slb-hdr[data-open='true'] .slb-hdr__tool {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}

	/* the pair share one cell, so the first is offset by the other's width */
	.slb-hdr[data-open='true'] .slb-hdr__tool--account {
		margin-right: 40px;
	}
}


/* ----------------------------------------------------------------------
 * Accreditation row, in the footer, site wide.
 *
 * Lives here rather than in slb-home.css because that stylesheet only
 * loads on the home page, and these marks now appear on every page.
 * The .slb-home prefix is dropped for the same reason.
 *
 * Deliberately quiet. In a footer a credential is reference material,
 * not persuasion, and the Halal mark in particular is something a
 * customer goes looking for rather than something to announce.
 * -------------------------------------------------------------------- */

.slb-creds {
	padding: 26px 24px 4px;
}

.slb-creds__list {
	max-width: 1344px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 48px;
}

.slb-creds__item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.slb-creds__mark {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	object-fit: contain;
	/* a mark, not a photograph: never rounded */
	border-radius: 0;
}

/*
 * The Halal mark is 470x510, taller than wide. Fitting it into a square
 * box would letterbox it and make it read smaller than the round IBCLC
 * badge beside it, so it keeps its true ratio and is matched on height.
 * Official marks are never re-proportioned.
 */
.slb-creds__mark--halal {
	width: auto;
	height: 53px;
}

.slb-creds__body {
	display: block;
	line-height: 1.3;
}

.slb-creds__name {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #2B2630;
}

.slb-creds__note {
	display: block;
	font-size: 11.5px;
	font-weight: 300;
	color: #807886;
	max-width: 34ch;
}

@media (max-width: 768px) {

	.slb-creds {
		padding: 20px 18px 2px;
	}

	.slb-creds__list {
		gap: 14px 22px;
	}

	.slb-creds__mark {
		width: 42px;
		height: 42px;
	}

	.slb-creds__mark--halal {
		width: auto;
		height: 46px;
	}
}