/* ==========================================================================
   Tnuva - Squarespace rebuild
   --------------------------------------------------------------------------
   Every value below was measured from the live Squarespace render on
   2026-09-15 (computed styles + the site's own custom CSS), not sampled
   by eye. Loaded after style.css as a separate file so the rebuild can
   be removed without touching the 43KB of legacy CSS underneath it.

   House rules for this file:
     - no !important, ever. If a legacy rule wins, fix the selector.
     - all new classes are prefixed .tnuva- so nothing collides.
   ========================================================================== */

:root {
	/* Palette. Squarespace stores these as HSL triples; converted here. */
	--tnuva-navy:      #08163A;  /* --black-hsl        224 75% 13%  */
	--tnuva-white:     #FFFFFF;  /* --white-hsl          0  0% 100% */
	--tnuva-accent:    #E62A00;  /* --accent-hsl        11 100% 45% */
	--tnuva-cream:     #F2ECD9;  /* --lightAccent-hsl   46 50% 90%  */
	--tnuva-green:     #5E9245;  /* --darkAccent-hsl   100 36% 42%  */

	/* Greys, taken from the Squarespace footer's own custom CSS. */
	--tnuva-ink:       #1D1D1F;
	--tnuva-muted:     #6E6E73;
	--tnuva-hairline:  #D2D2D7;
	--tnuva-rule:      rgba(8, 22, 58, .4);

	--tnuva-font-head: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--tnuva-font-body: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Fluid heading ramp.
	   Squarespace scales headings with the viewport rather than with
	   breakpoints. The vw figures are the measured ratios; the clamps
	   keep them readable on a phone and stop them growing past the
	   1500px site width. */
	--tnuva-h1:   clamp(32px, min(95.42px,6.816vw), 74px);
	--tnuva-h2:   clamp(26px, min(63.17px,4.512vw), 49px);
	--tnuva-h3:   clamp(21px, min(41.86px,2.9897vw), 33px);
	--tnuva-h4:   clamp(18px, min(33.41px,2.3863vw), 26px);
	--tnuva-body: clamp(16px, min(28.61px,2.0434vw), 22px);

	--tnuva-maxw:     1500px;
	--tnuva-gutter:   min(115.2px,8.2286vw);

	/* --------------------------------------------------------------
	   Header metrics. One source of truth: style.css, site.css,
	   home.css and extras.css each used to pin the bar height with
	   its own !important, which is why the header measured 71, 77, 84
	   or 112px depending on which file won. Everything now reads these
	   two tokens, and the mobile value is clamped so the bar cannot
	   run to 133px at the top of the phone range the way the raw
	   linear fit did.
	   -------------------------------------------------------------- */
	--tnuva-header-h:      71px;
	--tnuva-header-gutter: max(3vw, (100% - 1415px) / 2);

	/* --------------------------------------------------------------
	   Spacing scale.
	   The rebuild was assembled from per-element measurements, so it
	   carries well over a hundred one-off lengths. New and corrected
	   spacing uses this scale instead: each step is fluid between a
	   phone floor and a desktop ceiling, so a block cannot collapse
	   on a small screen or run away on a large one. Steps roughly
	   double, which keeps adjacent values visibly distinct.
	   -------------------------------------------------------------- */
	--tnuva-space-3xs: clamp(4px,  0.35vw, 6px);
	--tnuva-space-2xs: clamp(8px,  0.6vw,  12px);
	--tnuva-space-xs:  clamp(12px, 1vw,    18px);
	--tnuva-space-s:   clamp(16px, 1.4vw,  24px);
	--tnuva-space-m:   clamp(24px, 2.2vw,  40px);
	--tnuva-space-l:   clamp(32px, 3.2vw,  56px);
	--tnuva-space-xl:  clamp(48px, 4.6vw,  80px);
	--tnuva-space-2xl: clamp(64px, 6.2vw,  112px);
	--tnuva-space-3xl: clamp(80px, 8vw,    144px);
}

@media (max-width: 767px) {
	:root {
		--tnuva-header-h:      64px;
		--tnuva-header-gutter: calc(2.3px + 5.71vw);
	}}

/* The header is fixed, so in-page anchors must clear it. */
html { scroll-padding-top: calc(var(--tnuva-header-h) + var(--tnuva-space-s)); }

/* --------------------------------------------------------------------------
   Typography
   Headings are Manrope 500. Body on the Squarespace site currently falls
   back to Arial because the face never loaded - that is a bug there, not a
   pairing, so the rebuild sets Manrope throughout.
   -------------------------------------------------------------------------- */
.tnuva-page {
	font-family: var(--tnuva-font-body);
	font-size: var(--tnuva-body);
	line-height: 1.80;
	color: var(--tnuva-navy);
	background: var(--tnuva-white);
}

.tnuva-page h1,
.tnuva-page h2,
.tnuva-page h3,
.tnuva-page h4 {
	font-family: var(--tnuva-font-head);
	font-weight: 500;
	color: var(--tnuva-navy);
	text-wrap: balance;
	margin: 0 0 .5em;
}

.tnuva-page h1 { font-size: var(--tnuva-h1); line-height: 1.23; }
.tnuva-page h2 { font-size: var(--tnuva-h2); line-height: 1.31; }
.tnuva-page h3 { font-size: var(--tnuva-h3); line-height: 1.36; }
.tnuva-page h4 { font-size: var(--tnuva-h4); line-height: 1.39; font-weight: 600; }

.tnuva-page p { margin: 0 0 1.1em; }

/* --------------------------------------------------------------------------
   Footer
   Two-column grid capped at 960px, 13px text, hairline rules above and
   below the store-locator line. Reproduced from the Squarespace custom CSS.
   -------------------------------------------------------------------------- */
/* The footer's own box - background, width, padding and vertical rhythm -
   is site.css's job. All that belongs here is the link reset, which the
   parent theme's underlined-blue anchors would otherwise win.

   What used to sit here also carried `border-top: 1px solid rgba(8,22,58,.4)`,
   a navy hairline across the top of the cream band that site.css never
   overrode and nothing asked for. */
.tnuva-footer a { color: var(--tnf-muted, var(--tnuva-muted)); text-decoration: none; }
/* Underline on hover as well as the colour change - colour alone is not a
   sufficient affordance. */
.tnuva-footer a:hover { text-decoration: underline; }


/* ==========================================================================
   Catalogue: archives, cards, filters, single views
   ========================================================================== */

.tnuva-page #secondary,
.tnuva-page .sidebar { display: none; }
.tnuva-page .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }


/* ==========================================================================
   Header and mega menu
   Cream band, navy links, and a full-width panel that dims the page behind
   it - the same shape as the Squarespace header, rebuilt from live data.
   ========================================================================== */

.t26-headercontainer { position: relative; z-index: 60; }

/* .tnuva-page, .tnuva-home and .tnuva-footer each reset box-sizing over
   their own subtree; the header was the one region that did not, so any
   full-width row inside it that also carried padding - the mobile drawer
   and the mega panels - measured 100% plus its padding and pushed the page
   sideways. */
#headercontainer,
#headercontainer *,
#headercontainer *::before,
#headercontainer *::after { box-sizing: border-box; }

.t26-site-header {
	min-height: var(--tnuva-header-h);
	background: var(--tnuva-cream);
	display: flex;
	align-items: center;
	gap: var(--tnuva-space-s);
}

.t26-logo { display: inline-flex; align-items: center; margin-right: auto; }
.t26-logo img { display: block; height: 34px; width: auto; }

.tnuva-nav-list {
	display: flex;
	align-items: center;
	gap: clamp(14px, min(38.4px,2.7429vw), 34px);
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.tnuva-nav-list a,
.tnuva-nav-trigger {
	font-family: var(--tnuva-font-head);
	font-size: 14.4px;
	font-weight: 500;
	line-height: 1;
	color: var(--tnuva-navy);
	text-decoration: none;
	background: none;
	border: 0;
	padding: 10px 0;
	cursor: pointer;
	position: relative;
}

.tnuva-nav-list a::after,
.tnuva-nav-trigger::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	background: var(--tnuva-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease;
}

.tnuva-nav-list a:hover::after,
.tnuva-nav-trigger:hover::after,
.tnuva-nav-trigger[aria-expanded="true"]::after { transform: scaleX(1); }

.tnuva-nav-list a:focus-visible,
.tnuva-nav-trigger:focus-visible { outline: 2px solid var(--tnuva-navy); outline-offset: 4px; }

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

.tnuva-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 61;
}

.tnuva-mega-panel {
	background: var(--tnuva-white);
	border-top: 1px solid var(--tnuva-rule);
	box-shadow: 0 18px 40px rgba(8, 22, 58, .10);
}

.tnuva-mega-inner {
	max-width: var(--tnuva-maxw);
	margin-inline: auto;
	padding: clamp(24px, min(57.6px,4.1143vw), 44px) clamp(16px, min(76.8px,5.4857vw), 56px);
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(200px, 1fr);
	gap: clamp(24px, min(76.8px,5.4857vw), 64px);
	align-items: start;
}

.tnuva-mega-panel--plain .tnuva-mega-inner { grid-template-columns: minmax(0, 1fr); }

.tnuva-mega-featured {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: clamp(16px, min(38.4px,2.7429vw), 28px);
}

.tnuva-mega-card { display: flex; flex-direction: column; text-decoration: none; }
.tnuva-mega-card-media { display: block; overflow: hidden; background: var(--tnuva-cream); aspect-ratio: 1 / 1; }
.tnuva-mega-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.tnuva-mega-card:hover .tnuva-mega-card-media img { transform: scale(1.04); }

.tnuva-mega-card-title {
	font-family: var(--tnuva-font-head);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--tnuva-navy);
	margin-top: 12px;
}

.tnuva-mega-card-more {
	font-family: var(--tnuva-font-head);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--tnuva-accent);
	margin-top: 6px;
}

.tnuva-mega-heading {
	font-family: var(--tnuva-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tnuva-muted);
	margin: 0 0 14px;
}

.tnuva-mega-links { list-style: none; margin: 0 0 calc(4.43px + 0.7124vw); padding: 0; }
.tnuva-mega-links li { margin-bottom: 9px; }

.tnuva-mega-links a {
	font-family: var(--tnuva-font-head);
	font-size: 14.5px;
	color: var(--tnuva-navy);
	text-decoration: none;
	transition: color .15s linear;
}

.tnuva-mega-links a:hover { color: var(--tnuva-accent); }

.tnuva-mega-all {
	font-family: var(--tnuva-font-head);
	font-size: 13px;
	font-weight: 600;
	color: var(--tnuva-accent);
	text-decoration: none;
}

.tnuva-mega-all:hover { text-decoration: underline; }

/* --- scrim -------------------------------------------------------------- */

/* The scrim only dims. It never receives the pointer.

   It used to, and that was the flicker: the moment a panel opened, the
   scrim covered the nav, the cursor was suddenly "off" the trigger, the
   menu closed, the scrim went with it, the cursor was back on the trigger,
   and round it went. pointer-events:none ends that argument for good, and
   click-to-close is handled on the document instead - which also means the
   scrim's stacking context no longer matters. */
.tnuva-mega-scrim {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 55;
	pointer-events: none;
	animation: tnuva-scrim-in .2s linear;
}

@keyframes tnuva-scrim-in { from { opacity: 0; } to { opacity: 1; } }

/* Deliberately NOT locking the page. Hiding overflow removes the 15px
   scrollbar, the header reflows sideways under the cursor, and the panel
   flickers open and shut. The panel is short enough not to need a lock. */

/* --- mobile ------------------------------------------------------------- */

.t26-menu-toggle { display: none; }

@media (max-width: 899px) {
	.t26-menu-toggle {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		border: 0;
		background: none;
		cursor: pointer;
		padding: 0;
	}
	.t26-menu-toggle span:not(.screen-reader-text) { display: block; height: 2px; background: var(--tnuva-navy); }
	.t26-menu-toggle .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

	/* The open menu and its panels stay in the header's flow and wrap
	   under the bar. The bar therefore has to be free to grow: it used to
	   carry a pinned `height`, which clipped the drawer and left the links
	   sitting invisibly on the page content underneath. Height is a
	   minimum everywhere now, and the fixed container scrolls rather than
	   running off the bottom of a short screen. */
	#headercontainer {
		max-height: 100vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* The gutter normally lives on .t26-primary-nav's margin-right, but the
	   nav is hidden behind the toggle here, so the toggle was the last item
	   on the row with nothing holding it off the right edge of the screen.
	   The gutter moves to the toggle, and the drawer and the panels - both
	   full-width rows - take it as padding so their own 100% width still
	   fits the bar. */
	.t26-site-header .t26-menu-toggle { margin-right: var(--tnuva-header-gutter); }

	.tnuva-nav {
		display: none;
		width: 100%;
		margin-right: 0;
		padding-inline: var(--tnuva-header-gutter);
		padding-block: var(--tnuva-space-2xs) var(--tnuva-space-s);
	}

	.tnuva-nav.is-open { display: block; }

	.tnuva-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-block: 0;
	}

	/* A 44px target with a hairline between rows, instead of a 4px gap
	   between 16px links that read as one block. */
	.tnuva-nav-list > li + li { border-top: 1px solid var(--tnuva-rule); }

	.tnuva-nav-list a,
	.tnuva-nav-trigger {
		display: block;
		width: 100%;
		text-align: left;
		font-size: 16px;
		padding-block: var(--tnuva-space-xs);
	}

	/* `flex-wrap: wrap` is what lets the drawer and the panels sit under the
	   bar, and `align-content: flex-start` keeps that stack from being
	   spread down the container. The side effect is that the bar row is only
	   as tall as its tallest item, so a 30px logo left the row hugging the
	   top of a 64px bar with all of the slack underneath it - which is the
	   "padding above, uneven gap below" on phones.

	   Giving the two first-row items the bar's own height makes the row
	   exactly the bar height, so the logo centres in it and the drawer
	   starts immediately below. */
	.t26-site-header { flex-wrap: wrap; align-content: flex-start; }

	/* The two first-row items are given the bar's height in site.css, which
	   is where the bar is owned - `.t26-site-header .t26-logo { display:
	   block }` lives there and would out-order anything written here. */
	.tnuva-mega { position: static; width: 100%; padding-inline: var(--tnuva-header-gutter); }
	.tnuva-mega-panel { box-shadow: none; border-top: 0; background: transparent; }
	.tnuva-mega-inner {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: 0;
		padding-block: var(--tnuva-space-s);
		gap: var(--tnuva-space-s);
	}
	.tnuva-mega-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tnuva-space-s); }
	.tnuva-mega-scrim { display: none; }}

@media (prefers-reduced-motion: reduce) {
	.tnuva-nav-list a::after, .tnuva-nav-trigger::after { transition: none; }
	.tnuva-mega-card-media img { transition: none; }
	.tnuva-mega-scrim { animation: none; }}


/* ==========================================================================
   Retarget the earlier rebuild's palette
   --------------------------------------------------------------------------
   style.css still carries a homepage rebuild that defines its own --t26-*
   tokens. Those hexes were sampled by eye and every one of them is wrong:
   #c92032 is a crimson where the brand accent is the vermilion #E62A00,
   and the navy, cream and green are all off too.

   Rather than delete that work, the variables are pointed at the measured
   values here. tnuva.css loads after style.css, so this :root wins, and the
   header, hero, product cards, recipes strip and footer all correct at once.
   ========================================================================== */

html:root {
	--t26-cream: #F2ECD9;
	--t26-red:   #E62A00;
	--t26-navy:  #08163A;
	--t26-green: #5E9245;
	--t26-white: #FFFFFF;
}

/* Same story for the typeface: those rules hard-code Arial, which is the
   font that failed to load on the Squarespace site, not a chosen pairing. */
/* .t26-footer and .tnuva-rebuild-home were in this list and render on no
   page; only the header container is real. */
.t26-headercontainer {
	font-family: var(--tnuva-font-head);
}

/* The header band is the one place the old rule paints over the new one. */
/* The only !important in this file, and it is defensive: the block in
   style.css pins the header with
   "background: none rgb(247,241,230) !important" and "height: 112px !important".
   Those are the wrong cream and a height nothing asked for, and !important
   cannot be out-specified. This matches force until that block is rewritten. */
html body #headercontainer.t26-headercontainer,
html body #headercontainer .t26-site-header {
	background: #F2ECD9 !important;
}

/* body[class] rather than body, so this still outranks the per-template
   rules that used to pin their own height (body.home, body.tnuva-*). */
html body[class] #headercontainer .t26-site-header {
	height: auto !important;
	min-height: var(--tnuva-header-h) !important;
}


/* ==========================================================================
   Footer overrides
   The parent theme styles every h4 in Kameron at display size. In this
   footer the headings are 13px labels, exactly as they are on Squarespace,
   so the family and size are set explicitly rather than inherited.
   ========================================================================== */

#footercontainer.tnuva-footer {
	background: var(--tnuva-white);
	font-family: var(--tnuva-font-body);
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
}

#footercontainer.tnuva-footer a,
#footercontainer.tnuva-footer p,
#footercontainer.tnuva-footer li {
	font-family: var(--tnuva-font-body);
	font-size: 13px;
	line-height: 1.5;
}


/* --------------------------------------------------------------------------
   Stacking order inside the header
   The scrim is a child of the header, so it paints above the nav unless the
   nav is given its own layer. Without this only the first trigger ever gets
   a hover - the scrim swallows the rest.
   Order: scrim 55, panels 61, and this keeps the logo and nav above both.
   -------------------------------------------------------------------------- */
#headercontainer .t26-site-header {
	position: relative;
	z-index: 62;
}


/* ==========================================================================
   Header metrics, measured against the Squarespace render
   --------------------------------------------------------------------------
   Taken from the live header at a 1648px frame, not estimated:

     header height   77px      (was 86 here - 86 is the container with padding)
     side padding    49.44px   = 3vw at that width
     logo            207 x 34
     nav type        14px, weight 400
     gap between     23px

   The nav weight matters more than it sounds: 500 reads noticeably heavier
   and is the main reason the two headers did not look alike.
   ========================================================================== */

/* Height and side gutter live on the tokens and in site.css respectively;
   only the flex gap belongs to this rule now. */
html body #headercontainer .t26-site-header { gap: var(--tnuva-space-s); }

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

.tnuva-nav-list { gap: 23px; }

.tnuva-nav-list a,
.tnuva-nav-trigger {
	font-size: 14px;
	font-weight: 400;
	padding: 8px 0;
}

/* The panel hangs off the header, so its offset follows the new height. */
.tnuva-mega { top: 100%; }


/* style.css pins ".t26-logo img { width:160px }" and
   ".t26-primary-nav a { font-size:15px; font-weight:600 }". Neither is
   !important, so out-specify, do not shout. */
html body .t26-logo img {
	display: block;
	width: auto;
	height: 34px;
	max-width: 207px;
}

html body .t26-primary-nav .tnuva-nav-list a,
html body .t26-primary-nav .tnuva-nav-trigger {
	font-family: var(--tnuva-font-head);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: var(--tnuva-navy);
	padding: 8px 0;
}

html body .t26-primary-nav .tnuva-nav-list { gap: 23px; }