/* Taste Tester: a sunny, functional first-order page in Queal's Useful Optimism system. */
.q-taste-tester-page {
	--tt-ink: #173331;
	--tt-paper: #f7f2e9;
	--tt-oat: #e8dcc9;
	--tt-sun: #f4bf52;
	--tt-mint: #b7d8c7;
	--tt-red: #c44738;
	background: var(--tt-paper);
	color: var(--tt-ink);
}

.tt-page {
	overflow: hidden;
}

.tt-page :where(h1, h2, h3, p, ol, ul, figure, blockquote) {
	margin: 0;
}

.tt-page :where(button, a) {
	font: inherit;
}

.tt-hero,
.tt-contents,
.tt-flavours,
.tt-method,
.tt-assurance,
.tt-faq,
.tt-close {
	padding-inline: clamp(1.15rem, 4vw, 5rem);
}

.tt-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(22rem, .94fr);
	min-height: min(48rem, calc(100vh - 4rem));
	background: var(--tt-oat);
}

.tt-hero-image {
	position: relative;
	min-height: 0;
	overflow: hidden;
	background: #a8cbbd;
}

.tt-hero-image img {
	/* Let the order panel set the hero height, not the portrait image. */
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	object-fit: cover;
	object-position: 50% 32%;
}

.tt-image-note,
.tt-image-caption {
	position: absolute;
	z-index: 1;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .085em;
	text-transform: uppercase;
}

.tt-image-note {
	top: 1.25rem;
	left: 1.25rem;
	padding: .55rem .7rem;
	background: var(--tt-paper);
}

.tt-image-caption {
	right: 1.25rem;
	bottom: 1.25rem;
	display: grid;
	gap: .3rem;
	padding: .75rem .9rem;
	background: var(--tt-ink);
	color: var(--tt-paper);
}

.tt-image-caption span:last-child { color: var(--tt-paper); }

.tt-hero-order {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.5rem, 3vh, 2.5rem) clamp(1.5rem, 5vw, 5.5rem);
	background: var(--tt-paper);
}

.tt-eyebrow {
	margin-bottom: 1rem !important;
	font-size: .73rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tt-rating {
	display: grid;
	grid-template-columns: auto auto;
	gap: 0 .5rem;
	align-items: baseline;
	align-self: flex-start;
	min-height: 2.75rem;
	margin: 0 0 1.25rem;
	padding-block: .55rem;
	color: var(--tt-ink);
	font-size: .78rem;
	font-weight: 750;
	text-decoration: none;
}

.tt-rating > strong {
	font-size: 1.2rem;
	letter-spacing: -.025em;
}

.tt-rating > span {
	color: #a75c00;
	font-size: .9rem;
	letter-spacing: .04em;
}

.tt-rating .tt-stars {
	display: inline-flex;
}

.tt-rating .tt-half-star {
	position: relative;
	display: inline-block;
	width: 1em;
}

.tt-rating .tt-half-star > span:last-child {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	overflow: hidden;
}

.tt-rating small { grid-column: 1 / -1; color: color-mix(in srgb, var(--tt-ink), transparent 28%); font-size: .75rem; }
.tt-rating:hover small,
.tt-rating:focus-visible small { text-decoration: underline; }

.tt-rating:focus-visible,
.tt-faq-list summary:focus-visible,
.q-taste-tester-page .q-header a:focus-visible {
	outline: 3px solid var(--tt-ink);
	outline-offset: 3px;
}

.tt-hero h1,
.tt-contents h2,
.tt-flavours h2,
.tt-method h2,
.tt-assurance h2,
.tt-close h2 {
	font-size: clamp(2.35rem, 4.4vw, 5.25rem);
	font-weight: 720;
	letter-spacing: -.04em;
	line-height: .98;
}

.tt-lead {
	max-width: 34rem;
	margin-top: 1.35rem !important;
	font-size: clamp(1rem, 1.35vw, 1.18rem);
	line-height: 1.5;
}

.tt-price {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-top: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: 1rem;
	border-bottom: 1px solid color-mix(in srgb, var(--tt-ink), transparent 76%);
}

.tt-price strong {
	font-size: clamp(2rem, 3vw, 3.1rem);
	letter-spacing: -.04em;
}

.tt-price span,
.tt-guarantee {
	font-size: .82rem;
	font-weight: 700;
}

.tt-proof {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
	padding: 1.25rem 0;
	list-style: none;
}

.tt-proof li {
	display: grid;
	gap: .2rem;
}

.tt-proof strong {
	font-size: 1.25rem;
	letter-spacing: -.04em;
}

.tt-proof span {
	font-size: .72rem;
	font-weight: 650;
	line-height: 1.2;
}

.tt-add-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 4rem;
	padding: .85rem 1rem 1rem 1.2rem;
	border: 0;
	border-radius: 0;
	background: var(--tt-ink);
	color: var(--tt-paper);
	cursor: pointer;
	font-size: 1rem;
	font-weight: 800;
	text-align: left;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.tt-add-button:hover:not(:disabled),
.tt-add-button:focus-visible:not(:disabled) {
	background: var(--tt-red);
	transform: translateY(-2px);
}

.tt-add-button:active:not(:disabled) {
	transform: translateY(1px);
}

.tt-add-button:focus-visible {
	outline: 3px solid var(--tt-sun);
	outline-offset: 3px;
}

.tt-add-button b {
	font-size: 1.35rem;
	line-height: 1;
}

.tt-add-button:disabled {
	cursor: wait;
	opacity: .78;
}

.tt-add-button.is-added {
	background: #367b5d;
}

.tt-cart-feedback {
	min-height: 1.35rem;
	margin-top: .65rem !important;
	font-size: .82rem;
	font-weight: 700;
}

.tt-cart-feedback[data-state='success'] {
	color: #246044;
}

.tt-cart-feedback[data-state='error'] {
	color: #9d3125;
}

.tt-guarantee {
	margin-top: .35rem !important;
	color: color-mix(in srgb, var(--tt-ink), transparent 25%);
}

.tt-contents {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(22rem, .94fr);
	gap: 0;
	padding-top: clamp(4.5rem, 9vw, 10rem);
	padding-bottom: clamp(4.5rem, 9vw, 10rem);
}

.tt-contents > header,
.tt-flavours-copy,
.tt-method > div,
.tt-assurance > div {
	padding-right: clamp(2rem, 7vw, 8rem);
}

.tt-contents h2 {
	max-width: 16ch;
	font-size: clamp(2rem, 3.6vw, 4.1rem);
}

.tt-contents-list {
	border-top: 1px solid var(--tt-ink);
}

.tt-contents-list article {
	display: grid;
	grid-template-columns: 3rem 1fr;
	column-gap: .75rem;
	padding: 1.25rem 0 1.4rem;
	border-bottom: 1px solid color-mix(in srgb, var(--tt-ink), transparent 70%);
}

.tt-contents-list span {
	grid-row: span 2;
	font-size: .74rem;
	font-weight: 800;
}

.tt-contents-list h3 {
	font-size: clamp(1.25rem, 1.85vw, 1.75rem);
	letter-spacing: -.04em;
}

.tt-contents-list p,
.tt-flavours-copy > p:not(.tt-eyebrow),
.tt-assurance > div > p:not(.tt-eyebrow) {
	margin-top: .5rem !important;
	line-height: 1.5;
}

.tt-flavours {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(22rem, .94fr);
	gap: 0;
	padding-top: clamp(4.5rem, 9vw, 10rem);
	padding-bottom: clamp(4.5rem, 9vw, 10rem);
	background: var(--tt-sun);
}

.tt-flavours h2 {
	max-width: 10ch;
	font-size: clamp(2.25rem, 4vw, 4.8rem);
}

.tt-flavours-copy > p:not(.tt-eyebrow) {
	max-width: 31rem;
	font-size: 1rem;
}

.tt-flavour-list {
	display: grid;
	align-content: start;
	padding: 0;
	list-style-position: inside;
}

.tt-flavour-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3.65rem;
	padding: .7rem 1rem;
	border-bottom: 1px solid color-mix(in srgb, var(--tt-ink), transparent 56%);
	font-size: clamp(1.1rem, 1.7vw, 1.6rem);
	font-weight: 750;
	letter-spacing: -.035em;
}

.tt-flavour-list li::after {
	width: .85rem;
	height: .85rem;
	background: var(--flavour-colour, var(--tt-ink));
	content: '';
}

.tt-flavour-list--apple { --flavour-colour: #ce493d; }
.tt-flavour-list--chocolate { --flavour-colour: #5f3a31; }
.tt-flavour-list--forest { --flavour-colour: #588f70; }
.tt-flavour-list--macchiato { --flavour-colour: #a57147; }
.tt-flavour-list--strawberry { --flavour-colour: #df6478; }
.tt-flavour-list--vanilla { --flavour-colour: #f7e3a0; }
.tt-flavour-list--cookies { --flavour-colour: #699fa6; }

.tt-flavour-list li.tt-flavour-list--extras {
	display: flex;
	gap: 1.25rem;
	justify-content: flex-start;
	background: var(--tt-ink);
	color: var(--tt-paper);
}

.tt-flavour-list--extras::after { display: none; }
.tt-flavour-list--extras small { margin-left: auto; color: var(--tt-sun); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.tt-method {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(22rem, .94fr);
	gap: 0;
	padding-top: clamp(4.5rem, 9vw, 10rem);
	padding-bottom: clamp(4.5rem, 9vw, 10rem);
	background: var(--tt-mint);
}

.tt-method h2 {
	max-width: 7ch;
	font-size: clamp(2.25rem, 4vw, 4.7rem);
}

.tt-method ol {
	display: grid;
	padding: 0;
	border-top: 1px solid var(--tt-ink);
	list-style: none;
}

.tt-method li {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: .75rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--tt-ink), transparent 70%);
}

.tt-method li > span {
	font-size: .75rem;
	font-weight: 800;
}

.tt-method li p {
	display: grid;
	gap: .3rem;
	line-height: 1.45;
}

.tt-method li strong {
	font-size: 1.25rem;
	letter-spacing: -.035em;
}

.tt-assurance {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(22rem, .94fr);
	gap: 0;
	padding-top: clamp(4.5rem, 9vw, 10rem);
	padding-bottom: clamp(4.5rem, 9vw, 10rem);
}

.tt-assurance h2 {
	font-size: clamp(2.25rem, 4vw, 4.7rem);
}

.tt-assurance blockquote {
	align-self: end;
	padding: 1.5rem;
	background: var(--tt-ink);
	color: var(--tt-paper);
}

.tt-assurance blockquote p {
	font-size: clamp(1.35rem, 2.2vw, 2.05rem);
	font-weight: 650;
	letter-spacing: -.035em;
	line-height: 1.1;
}

.tt-assurance blockquote footer {
	margin-top: 2.75rem;
	color: var(--tt-sun);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tt-faq {
	display: grid;
	grid-template-columns: minmax(18rem, .72fr) minmax(32rem, 1.28fr);
	gap: clamp(3rem, 8vw, 8rem);
	align-items: start;
	padding-top: clamp(5rem, 10vw, 9rem);
	padding-bottom: clamp(5rem, 10vw, 9rem);
	background: var(--tt-oat);
}

.tt-faq-heading { position: sticky; top: 6.75rem; }
.tt-faq-heading h2 { max-width: 10ch; font-size: clamp(2.5rem, 4.8vw, 5.25rem); font-weight: 720; letter-spacing: -.04em; line-height: .98; }
.tt-faq-heading > p:last-child { max-width: 34ch; margin-top: 1.4rem; color: color-mix(in srgb, var(--tt-ink), transparent 24%); line-height: 1.55; }
.tt-faq-list { border-top: 1px solid color-mix(in srgb, var(--tt-ink), transparent 62%); }
.tt-faq-list details { border-bottom: 1px solid color-mix(in srgb, var(--tt-ink), transparent 62%); }
.tt-faq-list summary { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; padding: 1.55rem 0; cursor: pointer; font-size: clamp(1.2rem, 1.8vw, 1.65rem); font-weight: 750; letter-spacing: -.025em; list-style: none; }
.tt-faq-list summary::-webkit-details-marker { display: none; }
.tt-faq-list summary span { position: relative; width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; }
.tt-faq-list summary span::before,
.tt-faq-list summary span::after { position: absolute; top: .7rem; left: .2rem; width: 1.1rem; height: 2px; background: currentColor; content: ''; transition: transform 180ms ease; }
.tt-faq-list summary span::after { transform: rotate(90deg); }
.tt-faq-list details[open] summary span::after { transform: rotate(0); }
.tt-faq-list details > p { max-width: 62ch; margin: -.45rem 0 1.7rem; padding-right: 3rem; color: color-mix(in srgb, var(--tt-ink), transparent 22%); line-height: 1.65; }

.tt-close {
	padding-top: clamp(4.5rem, 10vw, 11rem);
	padding-bottom: clamp(4.5rem, 10vw, 11rem);
	background: var(--tt-red);
	color: #fff7ea;
	text-align: center;
}

.tt-close .tt-eyebrow {
	color: #fff7ea;
}

.tt-close h2 {
	max-width: 12ch;
	margin-inline: auto;
}

.tt-add-button--inverse {
	width: min(26rem, 100%);
	margin: 2rem auto 0;
	background: #fff7ea;
	color: var(--tt-ink);
}

.tt-add-button--inverse:hover:not(:disabled),
.tt-add-button--inverse:focus-visible:not(:disabled) {
	background: var(--tt-ink);
	color: #fff7ea;
}

.tt-cart-feedback--inverse[data-state='success'],
.tt-cart-feedback--inverse[data-state='error'] { color: #fff7ea; }

.q-taste-tester-page .q-footer a {
	color: #fff7ea;
}

.q-taste-tester-page .q-footer a:hover {
	color: var(--tt-sun);
}

.q-taste-tester-page .q-footer a:focus-visible {
	outline: 3px solid var(--tt-sun);
	outline-offset: 3px;
}

@media (max-width: 820px) {
	.tt-page {
		padding-top: 2.75rem;
	}

	.tt-hero,
	.tt-contents,
	.tt-flavours,
	.tt-method,
	.tt-assurance {
		grid-template-columns: 1fr;
	}

	.tt-faq { grid-template-columns: 1fr; gap: 2.25rem; }
	.tt-faq-heading { position: static; }

	.tt-hero {
		min-height: 0;
		padding-inline: 0;
	}

	.tt-hero-image {
		height: clamp(20rem, 96vw, 24rem);
		min-height: 0;
	}

	.tt-hero-order {
		padding-inline: clamp(1.15rem, 6vw, 3rem);
	}

	.tt-contents,
	.tt-flavours,
	.tt-method,
	.tt-assurance {
		gap: 2.25rem;
	}

	.tt-contents > header,
	.tt-flavours-copy,
	.tt-method > div,
	.tt-assurance > div {
		padding-right: 0;
	}

	.q-taste-tester-page .q-wordmark,
	.q-taste-tester-page .q-nav a,
	.q-taste-tester-page .q-cart-link,
	.q-taste-tester-page .q-footer-links a {
		display: flex;
		align-items: center;
		min-height: 2.75rem;
	}

	.q-taste-tester-page .q-nav a {
		justify-content: center;
		min-width: 2.75rem;
	}
}

@media (max-width: 560px) {
	.tt-proof {
		gap: .35rem;
	}

	.tt-proof strong {
		font-size: 1.1rem;
	}

	.tt-proof span {
		font-size: .66rem;
	}

	.tt-contents-list article,
	.tt-method li {
		grid-template-columns: 2.4rem 1fr;
	}

	.tt-flavour-list li {
		min-height: 3.25rem;
		font-size: 1.03rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tt-add-button {
		transition: none;
	}
}

.tt-assurance > .tt-assurance-reviews { display: grid; gap: 20px; padding: 0; }
.tt-assurance-reviews blockquote { margin: 0; }
@media (min-width: 861px) {
 .tt-assurance > div:first-child > p:not(.tt-eyebrow) { max-width: 80%; }
}

.tt-mid-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; padding: 30px clamp(20px, 5vw, 76px); background: #efd3a4; border-block: 1px solid var(--q-line); }
.tt-mid-order > div > strong { font-size: clamp(20px, 2vw, 28px); }
.tt-mid-order p { margin: 6px 0 0; }
.tt-mid-order .tt-add-button { margin: 0; min-width: 240px; }
.tt-mid-order .tt-cart-feedback { grid-column: 1 / -1; }
@media (max-width: 620px) { .tt-mid-order { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; } .tt-mid-order .tt-add-button { min-width: 0; width: 100%; } }