/* Tnuva site-wide replica CSS. Loads after tnuva.css on every page.
   Footer values measured on the live Squarespace footer at a 1920px frame;
   lengths over ~40px are written in vw (px / 19.2) so the block scales the
   way Squarespace's fluid engine does. No !important. */

/* ==========================================================================
   Footer
   Four columns on one content width - brand, Products, Learn More, Stay
   Connected - then a bottom bar with the copyright, the legal links and the
   design credit.

   The type scale is declared once as tokens below and applied through
   `#footercontainer.tnuva-footer ...` selectors, because tnuva.css pins
   every a/p/li in the footer to 13px at (1,1,1) and a plain two-class
   selector loses to it. One id in the selector, one place to change a size.
   ========================================================================== */

.tnuva-footer {
	--tnf-navy: #08163A;
	--tnf-red: #E62A00;
	--tnf-cream: #F2ECD9;
	--tnf-ink: #1D1D1F;
	--tnf-muted: #6E6E73;
	--tnf-rule: rgba(8, 22, 58, .4);
	--tnf-head: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	--tnf-body: Arial, Helvetica, sans-serif;

	/* One content width for every row, so the logo, the three link columns
	   and the bottom bar all start on the same left edge. */
	--tnf-maxw: min(1165px, 88vw);

	/* One type scale. --tnf-fs-link is every list link, the store line, the
	   copyright and the legal links: four things that used to carry four
	   slightly different line-heights. */
	--tnf-fs-title: clamp(16px, min(19.36px, 1.3829vw), 21px);
	--tnf-fs-body:  clamp(13px, min(14px, 1vw), 15px);
	--tnf-fs-link:  13px;
	--tnf-lh-link:  1.7;

	/* One vertical rhythm: --tnf-gap between a heading and its content and
	   between the rows of a column, --tnf-rule-gap around the bottom bar. */
	--tnf-gap:      clamp(14px, 1.4vw, 20px);
	--tnf-rule-gap: clamp(22px, 2.4vw, 34px);

	background: var(--tnf-cream);
	color: var(--tnf-navy);
	font-family: var(--tnf-body);
	padding: clamp(44px, 4.6vw, 72px) 0 clamp(28px, 2.6vw, 40px);
}

.tnuva-footer *,
.tnuva-footer *::before,
.tnuva-footer *::after { box-sizing: border-box; }

.tnuva-footer a { text-decoration: none; }

.tnf-wrap { width: var(--tnf-maxw); margin: 0 auto; }


/* --- The four columns --------------------------------------------------- */
/* The two link columns hold short labels and the outer two hold a logo and
   an input, so the track list is not four equal columns: the brand and the
   newsletter get the slack. */
.tnf-cols {
	display: grid;
	grid-template-columns:
		minmax(0, 1.1fr)
		minmax(0, 0.85fr)
		minmax(0, 0.85fr)
		minmax(0, 1.2fr);
	column-gap: clamp(28px, 3.4vw, 60px);
	row-gap: clamp(32px, 3.4vw, 48px);
	align-items: start;
}

.tnf-col { min-width: 0; }

#footercontainer.tnuva-footer .tnf-col-title {
	font-family: var(--tnf-head);
	font-size: var(--tnf-fs-title);
	line-height: 1.389;
	font-weight: 600;
	color: var(--tnf-ink);
	margin: 0 0 var(--tnf-gap);
	text-transform: none;
	letter-spacing: normal;
}


/* --- Column 1: logo, social, store locator ------------------------------ */
/* No top margin on the logo: the four columns start on the same line. */
.tnf-logo { display: block; width: clamp(180px, 15vw, 250px); }
.tnf-logo img { width: 100%; height: auto; display: block; }

.tnf-social { display: flex; gap: 12px; margin-top: var(--tnf-gap); }
.tnf-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--tnf-navy);
}
.tnf-social svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.tnf-social a:hover { color: var(--tnf-red); }

#footercontainer.tnuva-footer .tnf-store {
	margin: var(--tnf-gap) 0 0;
	font-family: var(--tnf-body);
	font-size: var(--tnf-fs-link);
	line-height: var(--tnf-lh-link);
	color: var(--tnf-muted);
	/* The column is the measure; a ch cap on top of it only forced a
	   second line for the last word. */
	max-width: 100%;
}


/* --- Columns 2 and 3: link lists ---------------------------------------- */
.tnf-list { list-style: none; margin: 0; padding: 0; }
.tnf-list li { margin: 0; padding: 0; }
.tnf-list li + li { margin-top: clamp(5px, 0.5vw, 8px); }

#footercontainer.tnuva-footer .tnf-list a {
	display: inline-block;
	font-family: var(--tnf-body);
	font-size: var(--tnf-fs-link);
	line-height: var(--tnf-lh-link);
	font-weight: 400;
	color: var(--tnf-muted);
}

#footercontainer.tnuva-footer .tnf-list a:hover { color: var(--tnf-navy); }


/* --- Column 4: newsletter ----------------------------------------------- */
#footercontainer.tnuva-footer .tnf-news-copy {
	font-family: var(--tnf-body);
	font-size: var(--tnf-fs-body);
	line-height: 1.6;
	font-weight: 400;
	color: var(--tnf-navy);
	margin: 0 0 var(--tnf-gap);
}

.tnf-news-form { display: block; }

#footercontainer.tnuva-footer .tnf-news-input {
	display: block;
	width: 100%;
	height: 44px;
	padding: 5px 10px;
	background: transparent;
	border: 1px solid rgba(8, 22, 58, .55);
	border-radius: 0;
	font-family: var(--tnf-body);
	font-size: var(--tnf-fs-body);
	color: var(--tnf-navy);
	box-shadow: none;
}

#footercontainer.tnuva-footer .tnf-news-input::placeholder { color: var(--tnf-navy); opacity: 1; }

#footercontainer.tnuva-footer .tnf-news-btn {
	display: inline-block;
	margin-top: 12px;
	width: 132px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--tnf-red);
	color: #fff;
	font-family: var(--tnf-head);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.32px;
	text-transform: uppercase;
	cursor: pointer;
}

#footercontainer.tnuva-footer .tnf-news-btn:hover { opacity: .88; }


/* --- Bottom bar: copyright, legal links, credit ------------------------- */
/* One hairline, one row. The credit is pushed to the right end, and on a
   narrow row all three lines wrap and stack on the left edge. */
.tnf-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--tnuva-space-2xs, 10px) clamp(20px, 2.4vw, 36px);
	border-top: 1px solid var(--tnf-rule);
	margin-top: var(--tnf-rule-gap);
	padding-top: var(--tnf-rule-gap);
}

#footercontainer.tnuva-footer .tnf-copy,
#footercontainer.tnuva-footer .tnf-legal-links,
#footercontainer.tnuva-footer .tnf-credit {
	margin: 0;
	font-family: var(--tnf-body);
	font-size: var(--tnf-fs-link);
	line-height: var(--tnf-lh-link);
	color: var(--tnf-muted);
}

/* No measure cap: this is one legal line, and 58ch broke "since 1926."
   onto a line of its own on desktop. It is a flex item, so it still
   shrinks and wraps when the bar runs out of room. */
#footercontainer.tnuva-footer .tnf-copy { max-width: 100%; }

/* Reading order is copyright, legal, credit; the credit takes the right end
   of the bar so the row is not three items huddled on the left. The `auto`
   needs the same id scoping as the `margin: 0` above it. */
#footercontainer.tnuva-footer .tnf-credit { margin-left: auto; }

/* tnuva.css sets `#footercontainer.tnuva-footer a { font-size: 13px;
   line-height: 1.5 }` directly on the anchor, so the anchors need the scale
   too - inheriting the paragraph's is not enough. */
#footercontainer.tnuva-footer .tnf-store a,
#footercontainer.tnuva-footer .tnf-bottom a {
	font-size: var(--tnf-fs-link);
	line-height: var(--tnf-lh-link);
	color: inherit;
}

#footercontainer.tnuva-footer .tnf-store a:hover,
#footercontainer.tnuva-footer .tnf-legal-links a:hover { color: var(--tnf-navy); }
.tnf-sep { padding: 0 11px; }

#footercontainer.tnuva-footer .tnf-credit,
#footercontainer.tnuva-footer .tnf-credit a { color: var(--tnf-red); }
#footercontainer.tnuva-footer .tnf-credit a:hover { opacity: .8; }


/* --- Round 2: measured against the live footer -------------------------- */

/* Documented exception: the parent theme paints #footercontainer white. */
body #footercontainer.tnuva-footer { background: #F2ECD9; }

/* The child theme's style.css carries `#footercontainer { display: none }`
   unconditionally (line ~1834) and re-enables it only inside
   `@media screen and (min-width: 768px)`. The mobile re-enable used to live
   in the Customizer, which made the footer's existence on phones depend on
   a rule in a text box. Owning it here instead: (1,1,0) beats both of
   style.css's (1,0,0) rules at every width. */
#footercontainer.tnuva-footer { display: block; }


/* --- Header ------------------------------------------------------------- */
/* Replaces the .t26-* header rules that used to live at the end of
   style.css. Measured on the live site: an 84px cream bar, full width, with
   its content on the same x253..x1653 column as the rest of the page.
   The gutter is applied to the flex children rather than as padding on the
   bar, so the absolutely positioned mega panel still spans the viewport. */

/* The bar is fixed on every page, which is what the reference does and what
   every hero's top padding in this build is measured against.

   It used to be fixed only on the homepage (home.css) plus a body class
   nothing ever set (archive.css). Everywhere else it fell through to
   style.css's `#headercontainer { position: absolute }`, so the hero
   paddings lined up on first paint and then the header scrolled away and
   left the nav behind - on the one page where it was fixed it stayed. The
   overlay is a property of the design, not of the homepage, so it is set
   once here. */
#headercontainer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: #F2ECD9;
	z-index: 200;
}

body.admin-bar #headercontainer { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar #headercontainer { top: 46px; }
}

#headercontainer .t26-site-header {
	position: relative;
	z-index: 62;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: #F2ECD9;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tnuva-space-s);
	border: 0;
	box-shadow: none;
}

/* The side gutter sits on the flex children rather than as padding on the
   bar, so the absolutely positioned mega panel still spans the viewport. */
.t26-site-header .t26-logo {
	display: block;
	flex: 0 0 auto;
	margin-left: var(--tnuva-header-gutter);
	line-height: 0;
}

.t26-site-header .t26-logo img {
	display: block;
	width: auto;
	height: 34px;
	max-width: 207px;
}

.t26-site-header .t26-primary-nav {
	flex: 0 1 auto;
	margin-right: var(--tnuva-header-gutter);
}

.t26-primary-nav .tnuva-nav-list {
	display: flex;
	align-items: center;
	gap: 27px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.t26-primary-nav .tnuva-nav-list > li { margin: 0; padding: 0; }

.t26-primary-nav .tnuva-nav-list a,
.t26-primary-nav .tnuva-nav-trigger {
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13.696px;
	line-height: 1.97;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: #08163A;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	white-space: nowrap;
}

.t26-primary-nav .tnuva-nav-list a:hover,
.t26-primary-nav .tnuva-nav-trigger:hover { color: #E62A00; }


/* --- Round 5: nav size and mega-panel column --------------------------- */
#headercontainer .t26-primary-nav .tnuva-nav-list a,
#headercontainer .t26-primary-nav .tnuva-nav-trigger { font-size: 13.696px; }

/* The panel used to be a 1400px block centred in the viewport with no side
   padding of its own, which is a different column from the bar above it:
   at 1920 it started 7.5px inside the logo, at 1440 it started 23px outside
   it, and at 1200 and below the headings and cards sat flush against the
   edges of the screen with nothing between them and the window.

   It takes the bar's gutter instead - the same --tnuva-header-gutter the
   logo and the nav are placed with - so the panel heading starts exactly
   under the logo and the last card ends exactly under the nav at every
   width. The token already caps the content at 1415px, so the max-width
   and the auto margins have nothing left to do. */
#headercontainer .tnuva-mega-inner {
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--tnuva-header-gutter);
}


/* --- Mega panels: links left, cards right ------------------------------ */
/* The Squarespace panel source sections put the heading and link list in a
   283px column at x253, with the image cards from x605: 4 x 246 for products
   and 3 x 335 for recipes, 21px gutters, both ending at x1652. */

/* The card column fills whatever the gutter leaves, rather than stopping at
   a traced 1047px and leaving a ragged strip inside the right gutter.

   The link rail and the gap are the 283px/70px trace at 1920 and scale down
   from there. They used to be frozen at those two numbers, so as the panel
   narrowed a third of the row stayed locked to a five-item link list and the
   four product cards took the whole loss - 137px each at 1025. */
#headercontainer .tnuva-mega-inner {
	grid-template-columns: clamp(190px, 14.74vw, 283px) minmax(0, 1fr);
	column-gap: clamp(28px, 3.65vw, 70px);
}

#headercontainer .tnuva-mega-aside { order: 0; }
#headercontainer .tnuva-mega-featured { order: 1; column-gap: 21px; }

#headercontainer #tnuva-panel-products .tnuva-mega-featured { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#headercontainer #tnuva-panel-recipes .tnuva-mega-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#headercontainer #tnuva-panel-about .tnuva-mega-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }

#headercontainer #tnuva-panel-products .tnuva-mega-card-media { aspect-ratio: 1 / 1; }
#headercontainer #tnuva-panel-recipes .tnuva-mega-card-media,
#headercontainer #tnuva-panel-about .tnuva-mega-card-media { aspect-ratio: 335 / 223; }

#headercontainer .tnuva-mega-heading {
	font-family: 'Manrope', sans-serif;
	font-size: clamp(20px, min(29.44px,2.1028vw), 33px);
	line-height: 1.3552;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: #08163A;
}

#headercontainer .tnuva-mega-links a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(15px, min(17.68px,1.2629vw), 20px);
	line-height: 1.8;
	font-weight: 400;
	color: #08163A;
}




/* --- Mega panel content ------------------------------------------------- */
/* On the live dropdown the products sit straight on the cream panel with no
   card box, their names centred underneath, and the category links are
   underlined. Panels are toggled with the hidden attribute. */

#headercontainer .tnuva-mega-panel { background: #F2ECD9; }
#headercontainer .tnuva-mega-panel[hidden] { display: none; }
.tnuva-mega-scrim[hidden] { display: none; }

#headercontainer .tnuva-mega-links {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

#headercontainer .tnuva-mega-links li { margin: 0 0 14px; padding: 0; }

#headercontainer .tnuva-mega-links a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(15px, min(17.68px,1.2629vw), 20px);
	line-height: 1.8;
	font-weight: 400;
	color: #08163A;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#headercontainer .tnuva-mega-links a:hover { color: #E62A00; }

#headercontainer .tnuva-mega-card {
	display: block;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
}

#headercontainer .tnuva-mega-card-media {
	display: block;
	width: 100%;
	background: none;
	border: 0;
	overflow: hidden;
}

#headercontainer .tnuva-mega-card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

#headercontainer .tnuva-mega-card-title {
	display: block;
	margin-top: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 400;
	color: #08163A;
	text-align: center;
}

#headercontainer .tnuva-mega-card-more { display: none; }

#headercontainer .tnuva-nav-trigger.is-open { color: #E62A00; }


/* The bar height is a single token, set in tnuva.css. Nothing here pins it.

   The parent theme still ships #headercontainer { height: 297px;
   border-bottom: 10px solid #1B1464; box-shadow: 0 0 20px #000 } - that is the
   navy rule and the tall cream band. Cancel it unconditionally. */
#headercontainer {
	height: auto;
	min-height: 0;
	border-top: 0;
	border-bottom: 0;
	box-shadow: none;
}

@media (max-width: 1024px) {
	/* Stacked: the link rail sits above the cards. The column gap doubles as
	   the row gap once the grid is one column, which put 68px of cream
	   between the last link and the first card. */
	#headercontainer .tnuva-mega-inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--tnuva-space-m);
	}
}

@media (max-width: 1024px) {
	/* --tnuva-header-gutter already resolves to 3vw here; only the nav's own
	   rhythm needs tightening. */
	.t26-primary-nav .tnuva-nav-list { gap: var(--tnuva-space-s); flex-wrap: wrap; justify-content: flex-end; }
}



/* --- Footer, narrow ----------------------------------------------------- */
/* Four columns need ~1100px to hold a logo, two link lists and an input
   side by side. Below that the grid folds to two columns - brand beside the
   newsletter would crowd both, so each of those spans the row and the two
   link lists share one - and below 767px the two lists stay paired, since
   they are short lists of short labels and stacking them adds ~200px. */
@media (max-width: 1100px) {
	.tnf-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--tnuva-space-m);
	}
	.tnf-col--brand,
	.tnf-col--news { grid-column: 1 / -1; }
	.tnf-logo { width: min(220px, 56vw); }
	/* The input is the full row here, so cap it at a readable measure
	   rather than letting it run the width of the page. */
	#footercontainer.tnuva-footer .tnf-news-input { max-width: 420px; }
	/* The bar wraps at this width. Without this the credit keeps the right
	   edge and ends up alone on a second line opposite nothing. */
	#footercontainer.tnuva-footer .tnf-credit { margin-left: 0; }
}

@media (max-width: 767px) {
	.tnuva-footer { padding: var(--tnuva-space-xl) 0 var(--tnuva-space-m); }
	.tnf-cols { row-gap: var(--tnuva-space-m); }
	/* 20px icons 12px apart are a fine mouse target and a poor thumb one.
	   On touch widths the links are padded to 44px and the gap is taken
	   back out of the padding, so the icons still read 12px apart and the
	   hit areas sit edge to edge rather than overlapping. */
	.tnf-social { margin-left: -12px; gap: 0; }
	.tnf-social a { box-sizing: content-box; padding: 12px; }
	.tnf-bottom {
		margin-top: var(--tnuva-space-s);
		padding-top: var(--tnuva-space-s);
		gap: var(--tnuva-space-2xs) 0;
	}
	/* Stacked, so nothing is pushed to a right edge and nothing wraps
	   mid-link. */
	#footercontainer.tnuva-footer .tnf-copy,
	#footercontainer.tnuva-footer .tnf-legal-links,
	#footercontainer.tnuva-footer .tnf-credit {
		flex: 0 0 100%;
		max-width: 100%;
		margin-left: 0;
		white-space: normal;
	}
}


/* --- Mobile drawer ------------------------------------------------------ */
/* tnuva.css writes the drawer under `.tnuva-nav` and `.tnuva-nav-list`
   (0,1,x). Every one of those rules was losing to the desktop nav above,
   which is scoped `.t26-primary-nav .tnuva-nav-list a` (0,2,1) and is not
   inside a media query - so on a phone the drawer rendered as a centred
   column of 13.7px shrink-wrapped links, 23px apart, with the row hairline
   only as wide as the word it sat under, and the whole list pushed 31px
   off-centre by the desktop nav's right margin.

   The drawer is owned here instead, at the same id scoping as the bar, so
   it is the last word at this width. Everything below is a correction of
   that specificity loss, not a new design.
   ------------------------------------------------------------------------ */
@media (max-width: 899px) {
	/* A full-width row under the bar, on the bar's own gutter: the drawer's
	   left edge lines up with the logo and its right edge with the toggle.
	   The desktop `margin-right: var(--tnuva-header-gutter)` has to go, or
	   the gutter is counted twice on the right and once on the left. */
	#headercontainer .t26-site-header .t26-primary-nav {
		width: 100%;
		margin: 0;
		padding-inline: var(--tnuva-header-gutter);
		padding-block: 0 var(--tnuva-space-s);
	}

	#headercontainer .t26-primary-nav .tnuva-nav-list {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
	}

	/* The rows are separated by a hairline rather than a gap, so the list
	   reads as a list. The first one also closes the drawer off from the
	   bar, which otherwise ran into it with nothing between them. */
	#headercontainer .t26-primary-nav .tnuva-nav-list > li {
		margin: 0;
		padding: 0;
		border-top: 1px solid var(--tnuva-rule);
	}

	/* The whole row is the target, not just the word. 16px over 12px of
	   padding above and below is a 46px row - a thumb target rather than a
	   27px one - and `white-space: normal` lets a long label wrap instead of
	   widening the drawer. */
	#headercontainer .t26-primary-nav .tnuva-nav-list a,
	#headercontainer .t26-primary-nav .tnuva-nav-trigger {
		display: block;
		width: 100%;
		font-size: 16px;
		line-height: 1.4;
		text-align: left;
		white-space: normal;
		padding-block: var(--tnuva-space-xs);
	}

	/* The underline sweep is a desktop hover affordance; on a touch row it
	   only ever flashes on tap, under a full-width block. */
	#headercontainer .t26-primary-nav .tnuva-nav-list a::after,
	#headercontainer .t26-primary-nav .tnuva-nav-trigger::after { content: none; }

	/* The hairlines close the list off from the panel below it instead of
	   the last row trailing away into the cream. */
	#headercontainer .t26-primary-nav .tnuva-nav-list > li:last-child {
		border-bottom: 1px solid var(--tnuva-rule);
	}

	/* The gutter belongs to .tnuva-mega-inner at every width now, so the
	   wrapper must not add a second one. */
	#headercontainer .tnuva-mega { padding-inline: 0; }

	/* tnuva.css asks for two card columns on a phone, but the per-panel
	   counts above are (2,1,0) and were winning, so a 500px screen got the
	   desktop's four product cards at 100px each with their names broken
	   over three lines. Two columns, matched to the panel's id scoping. */
	#headercontainer #tnuva-panel-products .tnuva-mega-featured,
	#headercontainer #tnuva-panel-recipes .tnuva-mega-featured,
	#headercontainer #tnuva-panel-about .tnuva-mega-featured {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--tnuva-space-s);
	}

	/* One step between the panel heading and its links, rather than the
	   heading's 14px bottom margin plus the list's 18px top margin. */
	#headercontainer .tnuva-mega-links { margin-top: var(--tnuva-space-2xs); }

	/* Same reasoning as the drawer rows: the category links were 27px tall
	   with their spacing in the li's margin, where a thumb cannot reach it.
	   The margin moves into the link as padding, so the row keeps its pitch
	   and becomes a 43px target. */
	#headercontainer .tnuva-mega-links li { margin-bottom: 0; }
	#headercontainer .tnuva-mega-links a {
		display: inline-block;
		padding-block: var(--tnuva-space-2xs);
	}
}


/* --- Mobile bar: the first row must be the bar -------------------------- */
/* Below 899px the header wraps so the drawer and the mega panels can stack
   under it, and `align-content: flex-start` keeps that stack from spreading
   down the container. The consequence is that the bar row is only as tall as
   its tallest item, so a 30px logo sat against the top of the bar with every
   spare pixel below it - the "padding above, uneven gap below" on phones.
   Giving the logo and the toggle the bar's own height makes the row exactly
   the bar height, so the logo centres and the drawer starts right below. */
@media (max-width: 899px) {
	.t26-site-header .t26-logo {
		min-height: var(--tnuva-header-h);
		display: flex;
		align-items: center;
	}

	/* The toggle is already a centred column flex box, so it only needs the
	   height - adding `align-items: center` would shrink its bars to nothing. */
	.t26-site-header .t26-menu-toggle {
		min-height: var(--tnuva-header-h);
		height: auto;
	}
}