/* Single product / recipe - Squarespace replica.
   Measured at a 1920px frame; lengths are px / 19.2 in vw. */

.tnuva-single-page {
	--tns-navy: #08163A;
	--tns-red: #E62A00;
	--tns-cream: #F2ECD9;
	--tns-head: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	--tns-body: Arial, Helvetica, sans-serif;
	--tns-h1: clamp(25px, min(42.88px,3.0628vw), 48px);
	--tns-pmd: clamp(15px, min(17.68px,1.2629vw), 20px);
	display: block;
	background: var(--tns-cream);
	color: var(--tns-navy);
	font-family: var(--tns-body);
	padding: calc(32.96px + 5.3033vw) 0 calc(18.89px + 3.0396vw);
	overflow-x: clip;
}

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

.tnuva-single-page .tns-crumbs {
	padding: 0 min(253px,18.0713vw);
	font-family: var(--tns-body);
	font-size: var(--tns-pmd);
	line-height: 1.8;
	color: var(--tns-navy);
}

.tnuva-single-page .tns-crumbs a { color: var(--tns-navy); text-decoration: none; }
.tnuva-single-page .tns-crumbs a:hover { color: var(--tns-red); }
.tns-crumb-sep { padding: 0 8px; }

.tns-main {
	display: grid;
	grid-template-columns: min(630.01px,45.0007vw) minmax(0, min(711.99px,50.8567vw));
	column-gap: min(57px,4.0718vw);
	align-items: center;
	padding: 22px min(253px,18.0713vw) 0;
}

.tns-media { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.tns-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

.tnuva-single-page .tns-title {
	font-family: var(--tns-head);
	font-size: var(--tns-h1);
	line-height: 1.3104;
	font-weight: 500;
	letter-spacing: normal;
	color: var(--tns-navy);
	margin: 0 0 calc(5.41px + 0.8708vw);
	text-transform: none;
}

.tnuva-single-page .tns-copy p,
.tnuva-single-page .tns-copy li {
	font-family: var(--tns-body);
	font-size: var(--tns-pmd);
	line-height: 1.8;
	font-weight: 400;
	color: var(--tns-navy);
	margin: 0 0 1.1em;
}

.tnuva-single-page .tns-copy h2,
.tnuva-single-page .tns-copy h3 {
	font-family: var(--tns-head);
	font-size: clamp(18px, min(23.04px,1.6457vw), 26px);
	font-weight: 500;
	color: var(--tns-navy);
	margin: 1.4em 0 .4em;
	text-transform: none;
}

.tnuva-single-page .tns-copy a { color: var(--tns-red); }
.tnuva-single-page .tns-copy img { max-width: 100%; height: auto; }

/* related - the wide grid, four 390px squares from x58 */

.tns-related { margin-top: calc(22.14px + 3.5624vw); padding: 0 min(58px,4.1431vw); }

.tnuva-single-page .tns-related-title {
	font-family: var(--tns-head);
	font-size: clamp(25px, min(42.88px,3.0628vw), 48px);
	line-height: 1.3104;
	font-weight: 500;
	color: var(--tns-navy);
	margin: 0 0 calc(4.18px + 0.6729vw);
	text-transform: none;
	letter-spacing: normal;
}

.tns-related-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: min(76.67px,5.4761vw);
	row-gap: calc(14.17px + 2.2797vw);
}

.tnuva-single-page .tns-related-card { display: block; text-decoration: none; color: var(--tns-navy); }

.tns-related-media { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.tns-related-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.tnuva-single-page .tns-related-card:hover .tns-related-media img { transform: scale(1.03); }

.tnuva-single-page .tns-related-name {
	display: block;
	margin-top: calc(5.41px + 0.8708vw);
	font-family: var(--tns-head);
	font-size: clamp(16px, min(19.36px,1.3829vw), 21px);
	line-height: 1.389;
	font-weight: 500;
	color: var(--tns-navy);
}


/* --- Round 2: recipes use the wide column, products the narrow one ------ */
/* Recipe: crumbs and gallery from x58, gallery 716 square, copy column 997
   wide from x850, both top-aligned. Product: x253 column, 630 gallery, copy
   712 wide from x940, vertically centred against the packshot. */

.tnuva-single-page--recipe .tns-crumbs { padding: 0 min(58px,4.1431vw); }

.tnuva-single-page--recipe .tns-main {
	align-items: start;
	grid-template-columns: min(716.01px,51.1433vw) minmax(0, min(997px,71.2142vw));
	column-gap: min(75.99px,5.4281vw);
	padding: 22px min(58px,4.1431vw) 0;
}

.tnuva-single-page--recipe .tns-media { aspect-ratio: auto; display: block; }
.tnuva-single-page--recipe .tns-media img { width: 100%; max-width: none; max-height: none; height: auto; }

/* Squarespace sets no extra space between list items - the 1.8 line-height
   is the whole rhythm. */
.tnuva-single-page .tns-copy ul,
.tnuva-single-page .tns-copy ol { margin: 0 0 1.2em; padding-left: 2.1em; }
.tnuva-single-page .tns-copy li { margin: 0; }

@media (max-width: 1024px) {
	.tnuva-single-page { padding-top: calc(var(--tnuva-header-h) + var(--tnuva-space-xl)); }
	.tnuva-single-page .tns-crumbs { padding: 0 6vw; }
	.tns-main { grid-template-columns: minmax(0, 1fr); padding: var(--tnuva-space-s) 6vw 0; row-gap: var(--tnuva-space-m); }
	.tns-related { padding: 0 6vw; }
	.tns-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4vw; row-gap: var(--tnuva-space-m); }
}

@media (max-width: 767px) {
	.tnuva-single-page .tns-crumbs { padding: 0 5vw; }
	.tns-main { padding: var(--tnuva-space-s) 5vw 0; }
	.tns-related { padding: 0 5vw; }
	/* row-gap here is a vw fit that lands near 14px on a phone. */
	.tns-related-grid { column-gap: 5vw; row-gap: var(--tnuva-space-l); }
}