@charset "UTF-8";
/* ==========================================================================
   Helixx — content.css
   Editorial surfaces: prose, blog, recipes, ACF page blocks, accordion,
   testimonials.

   Depends on base.css (tokens, reset, typography).

   OWNERSHIP
     Section 1 (.hx-prose) is the Phase 1 foundation — COMPONENT-INVENTORY L5.
     Sections 2+ are appended by the content/blog/recipe phases. Append below,
     do not rewrite section 1.
   ========================================================================== */

/* ==========================================================================
   1. PROSE SCOPE  (.hx-prose)

   Applied to .entry-content on singular views. This is the scope the two
   Gutenberg policy pages (3 Privacy, 9 Refund, FR 2071) are authored against,
   and the scope product long descriptions and blog bodies inherit.

   Core block styles are dequeued (inc/enqueue.php), so every .wp-block-* class
   that actually appears in the content is styled here. The blocks in play,
   verified against the rendered baseline, are: paragraph, list, separator,
   heading, image, quote, table.
   ========================================================================== */

.hx-prose {
	color: var(--hx-text);
	font-size: var(--hx-text-base);
	line-height: var(--hx-leading);
}

/* ========================================================================== 
   Partnership applications: Ambassadors and Wholesale
   ========================================================================== */

.hx-partner {
	--hx-partner-ink: #14212d;
	--hx-partner-blue: #1d4497;
	--hx-partner-blue-deep: #112d6c;
	--hx-partner-cream: #f4f0e7;
	--hx-partner-line: #dce2e8;
	padding-block: 0;
	overflow: clip;
	color: var(--hx-partner-ink);
	background: #fff;
}

.hx-partner h1,
.hx-partner h2,
.hx-partner h3,
.hx-partner p {
	margin-top: 0;
}

.hx-partner h1,
.hx-partner h2,
.hx-partner h3 {
	color: inherit;
	line-height: 1.08;
}

.hx-partner p {
	line-height: 1.7;
}

.hx-partner-hero {
	position: relative;
	padding: clamp(54px, 7vw, 112px) 0;
	background: linear-gradient(125deg, #f7f4ed 0%, #fff 58%, #edf3ff 100%);
}

.hx-partner-hero::after {
	position: absolute;
	right: -80px;
	bottom: -110px;
	width: 360px;
	height: 360px;
	border: 70px solid rgba(29, 68, 151, .06);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.hx-partner-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(380px, .8fr);
	align-items: center;
	gap: clamp(42px, 7vw, 112px);
	max-width: 1280px;
}

.hx-partner-hero__copy,
.hx-partner-section,
.hx-partner-application,
.hx-dlivr__layout > *,
.hx-persona > * {
	min-width: 0;
}

.hx-partner-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 17px;
	color: var(--hx-partner-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .13em;
	line-height: 1.3;
	text-transform: uppercase;
}

.hx-partner-eyebrow::before {
	content: none;
}

.hx-partner-hero h1 {
	max-width: 760px;
	margin-bottom: 24px;
	font-size: clamp(35px, 4.16vw, 57px);
	font-weight: 700;
	letter-spacing: -.045em;
}

.hx-partner-hero__copy > p {
	max-width: 690px;
	margin-bottom: 28px;
	color: #43515f;
	font-size: clamp(17px, 1.74vw, 20px);
}

.hx-partner-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 30px;
}

.hx-partner .hx-button {
	min-height: 50px;
	padding: 13px 25px;
	border-radius: 6px;
}

.hx-partner .hx-button--quiet {
	border-color: var(--hx-partner-ink);
	box-shadow: none;
	color: var(--hx-partner-ink);
	background: transparent;
}

.hx-partner .hx-button--quiet:hover,
.hx-partner .hx-button--quiet:focus {
	border-color: var(--hx-partner-blue);
	color: var(--hx-partner-blue);
	background: #fff;
}

.hx-partner-proof,
.hx-partner-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 23px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.hx-partner-proof li,
.hx-partner-checks li {
	position: relative;
	padding-left: 21px;
	font-size: 13px;
	font-weight: 600;
}

.hx-partner-proof li::before,
.hx-partner-checks li::before {
	position: absolute;
	top: .45em;
	left: 0;
	width: 9px;
	height: 9px;
	border: 2px solid var(--hx-partner-blue);
	border-radius: 50%;
	content: "";
}

.hx-partner-hero__media {
	position: relative;
	min-width: 0;
}

.hx-partner-hero__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 22px 22px 90px 22px;
	box-shadow: 0 28px 70px rgba(20, 33, 45, .18);
	object-fit: cover;
}

.hx-partner-hero__media--product img {
	aspect-ratio: 1;
	border-radius: 22px 70px 22px 70px;
}

.hx-partner-hero__note {
	position: absolute;
	right: -22px;
	bottom: 28px;
	max-width: 280px;
	padding: 18px 22px;
	border-left: 4px solid #8fb0f8;
	box-shadow: 0 14px 34px rgba(20, 33, 45, .2);
	color: #fff;
	background: var(--hx-partner-blue-deep);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

.hx-partner-section,
.hx-partner-application,
.hx-partner-faq {
	max-width: 1200px;
	padding-top: clamp(68px, 8vw, 112px);
	padding-bottom: clamp(68px, 8vw, 112px);
}

.hx-section-heading {
	max-width: 720px;
	margin-bottom: 38px;
}

.hx-section-heading h2,
.hx-partner-application__intro h2 {
	margin-bottom: 17px;
	font-size: clamp(28px, 3.19vw, 42px);
	letter-spacing: -.035em;
}

.hx-section-heading > p,
.hx-partner-application__intro > p {
	margin-bottom: 0;
	color: #596673;
	font-size: 17px;
}

.hx-persona {
	display: grid;
	grid-template-columns: minmax(240px, .36fr) minmax(0, 1fr);
	gap: 26px;
}

.hx-persona__tabs {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hx-persona__tabs button {
	position: relative;
	width: 100%;
	padding: 18px 45px 18px 20px;
	border: 1px solid var(--hx-partner-line);
	border-radius: 8px;
	box-shadow: none;
	color: var(--hx-partner-ink);
	background: #fff;
	text-align: left;
}

.hx-persona__tabs button::after {
	position: absolute;
	top: 50%;
	right: 20px;
	content: "\2192";
	transform: translateY(-50%);
}

.hx-persona__tabs button[aria-selected="true"] {
	border-color: var(--hx-partner-blue);
	color: #fff;
	background: var(--hx-partner-blue);
}

.hx-persona__panels {
	display: grid;
	min-height: 270px;
	padding: clamp(32px, 5vw, 64px);
	background: var(--hx-partner-cream);
	border-radius: 8px 70px 8px 8px;
	place-items: center start;
}

.hx-persona__panels > div {
	max-width: 650px;
}

.hx-persona__panels h3 {
	margin-bottom: 18px;
	font-size: clamp(24px, 2.55vw, 34px);
}

.hx-persona__panels p {
	margin-bottom: 0;
	font-size: 17px;
}

.hx-partner-band {
	padding: clamp(68px, 8vw, 105px) 0;
	color: #fff;
	background: var(--hx-partner-blue-deep);
}

.hx-partner-band > .hx-container {
	max-width: 1200px;
}

.hx-section-heading--light,
.hx-section-heading--light h2,
.hx-section-heading--light p,
.hx-section-heading--light .hx-partner-eyebrow {
	color: #fff;
}

.hx-value-grid,
.hx-benefit-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.hx-value-grid article,
.hx-benefit-cards article {
	padding: 30px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 8px;
	background: rgba(255, 255, 255, .06);
}

.hx-value-grid article > span {
	display: grid;
	width: 36px;
	height: 36px;
	margin-bottom: 25px;
	border-radius: 50%;
	color: var(--hx-partner-blue-deep);
	background: #fff;
	font-weight: 700;
	place-items: center;
}

.hx-value-grid h3,
.hx-benefit-cards h3 {
	margin-bottom: 12px;
	font-size: 20px;
}

.hx-value-grid p,
.hx-benefit-cards p {
	margin-bottom: 0;
	color: rgba(255, 255, 255, .78);
	font-size: 14px;
}

.hx-benefit-cards article {
	border-color: var(--hx-partner-line);
	color: var(--hx-partner-ink);
	background: #fff;
}

.hx-benefit-cards article::before {
	content: none;
}

.hx-benefit-cards p {
	color: #596673;
}

.hx-benefit-cards__icons {
	display: flex;
	min-height: 54px;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.hx-benefit-cards__icons .hx-benefit-icon {
	width: auto;
	height: 48px;
}

.hx-benefit-cards__icons .hx-benefit-icon--vegan { height: 36px; }

.hx-partner-application {
	display: grid;
	grid-template-columns: minmax(250px, .38fr) minmax(0, .62fr);
	gap: clamp(40px, 7vw, 90px);
	align-items: start;
}

.hx-partner-application__intro {
	position: sticky;
	top: 120px;
}

.hx-application-steps {
	padding: 0;
	margin: 32px 0 0;
	list-style: none;
	counter-reset: hx-application;
}

.hx-application-steps li {
	position: relative;
	display: grid;
	grid-template-columns: 12px 1fr;
	column-gap: 16px;
	padding-bottom: 24px;
	counter-increment: hx-application;
}

.hx-application-steps li::before {
	width: 12px;
	height: 12px;
	margin-top: 5px;
	border-radius: 50%;
	background: var(--hx-partner-blue);
	content: "";
}

.hx-application-steps li:not(:last-child)::after {
	position: absolute;
	top: 18px;
	bottom: 2px;
	left: 5px;
	width: 2px;
	background: #d8e0ef;
	content: "";
}

.hx-application-steps strong,
.hx-application-steps span {
	grid-column: 2;
}

.hx-application-steps span {
	color: #5d6771;
	font-size: 13px;
}

.hx-partner-form {
	min-width: 0;
	padding: clamp(24px, 4vw, 46px);
	border: 1px solid var(--hx-partner-line);
	border-radius: 12px;
	box-shadow: 0 20px 55px rgba(20, 33, 45, .08);
	background: #fff;
}

.hx-partner-form form > h2:first-child,
.hx-partner-form--ambassador .u-column2 > h2,
.hx-partner-form--ambassador .u-column1,
.hx-partner-form--ambassador .woocommerce-form-login {
	display: none;
}

.hx-partner-form--ambassador input[type="radio"] {
	display: inline-block;
	width: 18px !important;
	height: 18px;
	margin: 3px 6px 0 0;
	vertical-align: top;
}

.hx-partner-form--ambassador label.radio {
	display: inline-flex;
	align-items: center;
	margin: 0 22px 10px 0;
	font-weight: 500;
}

.hx-partner-form--ambassador .description {
	display: block;
	margin-top: 5px;
	color: #68747f;
	font-size: 12px;
	font-style: normal;
}

.hx-partner-form--ambassador .u-columns,
.hx-partner-form--ambassador .u-column2,
.hx-partner-form--ambassador .col-2 {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
}

.hx-partner-form p {
	margin: 0 0 20px;
}

.hx-partner-form label,
.hx-wholesale-form__choices legend {
	display: block;
	margin-bottom: 8px;
	color: var(--hx-partner-ink);
	font-size: 13px;
	font-weight: 700;
}

.hx-partner-form input[type="text"],
.hx-partner-form input[type="email"],
.hx-partner-form input[type="url"],
.hx-partner-form input[type="tel"],
.hx-partner-form input[type="number"],
.hx-partner-form textarea,
.hx-partner-form select {
	min-height: 52px;
	padding: 12px 15px;
	border-color: #cfd7df;
	border-radius: 6px;
	color: var(--hx-partner-ink);
	background-color: #fff;
}

.hx-partner-form textarea {
	min-height: 120px;
}

.hx-partner-form input:focus,
.hx-partner-form textarea:focus,
.hx-partner-form select:focus {
	border-color: var(--hx-partner-blue);
	box-shadow: 0 0 0 3px rgba(29, 68, 151, .12);
}

.hx-partner-form button,
.hx-partner-form input[type="submit"] {
	width: 100%;
	min-height: 54px;
	border-radius: 6px;
	background: var(--hx-partner-blue);
}

.hx-partner-form button:hover,
.hx-partner-form button:focus,
.hx-partner-form input[type="submit"]:hover,
.hx-partner-form input[type="submit"]:focus {
	background: var(--hx-primary-hover);
}

.hx-partner-form--ambassador .woocommerce-form-register__submit {
	color: #fff !important;
	background: var(--hx-partner-blue) !important;
	opacity: 1;
}

.hx-partner-form--ambassador .woocommerce-form-register__submit:hover,
.hx-partner-form--ambassador .woocommerce-form-register__submit:focus {
	background: var(--hx-primary-hover) !important;
}

.hx-wholesale-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 18px;
}

.hx-wholesale-form__choices {
	padding: 0;
	margin: 4px 0 24px;
	border: 0;
}

.hx-wholesale-form__choices .wpcf7-checkbox {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.hx-wholesale-form__choices .wpcf7-list-item {
	margin: 0;
}

.hx-wholesale-form__choices label {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	height: 100%;
	padding: 13px;
	border: 1px solid #d7dee5;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
}

.hx-wholesale-form__choices label:has(input:checked) {
	border-color: var(--hx-partner-blue);
	background: #f0f5ff;
}

.hx-wholesale-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 500;
	line-height: 1.5;
}

.hx-wholesale-form__submit {
	display: flex;
	align-items: center;
	gap: 18px;
}

.hx-wholesale-form__submit .wpcf7-spinner {
	position: absolute;
}

.hx-wholesale-form__submit span:last-child {
	flex: 0 0 auto;
	color: #64717d;
	font-size: 12px;
}

.hx-partner-checks {
	display: grid;
	gap: 11px;
}

.hx-partner-faq {
	padding-top: 0;
}

.hx-partner-faq__list {
	border-top: 1px solid var(--hx-partner-line);
}

.hx-partner-faq details {
	border-bottom: 1px solid var(--hx-partner-line);
}

.hx-partner-faq summary {
	position: relative;
	padding: 24px 52px 24px 0;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.hx-partner-faq summary::-webkit-details-marker {
	display: none;
}

.hx-partner-faq summary::after {
	position: absolute;
	top: 50%;
	right: 12px;
	content: "+";
	font-size: 24px;
	font-weight: 400;
	transform: translateY(-50%);
}

.hx-partner-faq details[open] summary::after {
	content: "\2212";
}

.hx-partner-faq details p {
	max-width: 760px;
	padding: 0 52px 22px 0;
	margin: 0;
	color: #5b6772;
}

@media (max-width: 1024px) {
	.hx-partner-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(310px, .75fr);
		gap: 38px;
	}

	.hx-partner-hero__note {
		right: -6px;
	}

	.hx-partner-application {
		grid-template-columns: minmax(220px, .35fr) minmax(0, .65fr);
		gap: 34px;
	}
}

@media (max-width: 767px) {
	.hx-partner-hero {
		padding: 48px 0 58px;
	}

	.hx-partner-hero__grid,
	.hx-persona,
	.hx-partner-application,
	.hx-dlivr__layout {
		grid-template-columns: 1fr;
	}

	.hx-partner-hero__grid {
		gap: 36px;
	}

	.hx-partner-hero h1 {
		font-size: clamp(34px, 9.97vw, 46px);
	}

	.hx-partner-actions .hx-button {
		width: 100%;
	}

	.hx-partner-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hx-partner-proof {
		display: grid;
	}

	.hx-partner-hero__media {
		max-width: 560px;
	}

	.hx-partner-hero__media img {
		aspect-ratio: 5 / 4;
		border-radius: 16px 16px 58px 16px;
	}

	.hx-partner-hero__media--product img {
		aspect-ratio: 1;
	}

	.hx-partner-hero__note {
		right: 10px;
		bottom: -20px;
		max-width: calc(100% - 36px);
	}

	.hx-persona__tabs {
		flex-direction: row;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: thin;
	}

	.hx-persona__tabs button {
		flex: 0 0 auto;
		width: auto;
		padding: 13px 18px;
		white-space: nowrap;
	}

	.hx-persona__tabs button::after {
		display: none;
	}

	.hx-persona__panels {
		min-height: 300px;
		border-radius: 8px 48px 8px 8px;
	}

	.hx-value-grid,
	.hx-benefit-cards {
		grid-template-columns: 1fr;
	}

	.hx-partner-application__intro {
		position: static;
	}

	.hx-wholesale-form__grid {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 520px) {
	.hx-partner-actions {
		grid-template-columns: 1fr;
	}

	.hx-partner-form {
		padding: 22px 16px;
	}

	.hx-wholesale-form__choices .wpcf7-checkbox {
		grid-template-columns: 1fr;
	}

	.hx-wholesale-form__submit {
		align-items: stretch;
		flex-direction: column;
		gap: 8px;
	}
}

@media print {
	.hx-partner-actions,
	.hx-partner-form,
	.hx-partner-hero__note {
		display: none !important;
	}

	.hx-partner-hero,
	.hx-partner-band {
		padding: 24pt 0;
		color: #000;
		background: #fff !important;
	}
}

.hx-prose > *:last-child {
	margin-bottom: 0;
}

.hx-prose p {
	margin-bottom: 1rem;
}

.hx-prose h1,
.hx-prose h2,
.hx-prose h3,
.hx-prose h4,
.hx-prose h5,
.hx-prose h6 {
	color: var(--hx-heading);
	font-weight: var(--hx-weight-heading);
	line-height: var(--hx-leading-heading);
	margin: 1.75em 0 var(--hx-heading-mb);
}

.hx-prose > h1:first-child,
.hx-prose > h2:first-child,
.hx-prose > h3:first-child {
	margin-top: 0;
}

.hx-prose a {
	color: var(--hx-link);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.hx-prose a:hover,
.hx-prose a:focus {
	color: var(--hx-link-hover);
}

/* Bullets. base.css strips list markers globally because the chrome uses <ul>
   for navigation; prose has to put them back. */
.hx-prose ul,
.hx-prose ol,
.hx-prose ul.wp-block-list,
.hx-prose ol.wp-block-list {
	margin: 0 0 1rem;
	padding-left: 1.25em;
}

.hx-prose ul,
.hx-prose ul.wp-block-list {
	list-style: disc;
}

.hx-prose ol,
.hx-prose ol.wp-block-list {
	list-style: decimal;
}

.hx-prose li {
	margin-bottom: .35em;
}

.hx-prose li > ul,
.hx-prose li > ol {
	margin-top: .35em;
	margin-bottom: 0;
}

.hx-prose ul ul { list-style: circle; }

/* Separator. The policy pages open with
   <hr class="wp-block-separator has-alpha-channel-opacity">. */
.hx-prose hr,
.hx-prose .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--hx-border);
	margin: 2rem 0;
	height: 0;
	opacity: 1;
}

.hx-prose .wp-block-separator.has-alpha-channel-opacity {
	opacity: .6;
}

.hx-prose .wp-block-separator.is-style-wide {
	width: 100%;
}

.hx-prose .wp-block-separator.is-style-dots {
	border: 0;
	text-align: center;
}

.hx-prose blockquote,
.hx-prose .wp-block-quote {
	border-left: 3px solid var(--hx-primary);
	margin: 1.5rem 0;
	padding-left: 1.25rem;
	font-style: italic;
}

.hx-prose .wp-block-quote cite {
	display: block;
	margin-top: .5rem;
	font-size: var(--hx-text-small);
	font-style: normal;
	color: var(--hx-heading);
}

.hx-prose figure,
.hx-prose .wp-block-image {
	margin: 1.5rem 0;
}

.hx-prose img {
	height: auto;
}

/* The current stack hides every caption via
   `.wp-caption-text { display: none }` in the customizer CSS. That is a
   deliberate editorial choice, not a bug, so it is reproduced — remove this
   rule if the client wants captions back. */
.hx-prose .wp-caption-text,
.hx-prose figcaption {
	display: none;
}

.hx-prose table,
.hx-prose .wp-block-table table {
	width: 100%;
	margin-bottom: 1.5rem;
	border: 1px solid var(--hx-border);
	font-size: var(--hx-text-small);
}

.hx-prose th,
.hx-prose td {
	padding: 10px 14px;
	border: 1px solid var(--hx-border);
	text-align: left;
	vertical-align: top;
}

.hx-prose th {
	background-color: var(--hx-bg-alt);
	color: var(--hx-heading);
	font-weight: 600;
}

/* Wide tables scroll inside their own box — the page body never scrolls. */
.hx-prose .wp-block-table {
	overflow-x: auto;
}

.hx-prose pre,
.hx-prose .wp-block-code {
	background: var(--hx-bg-alt);
	margin-bottom: 1.5rem;
	overflow-x: auto;
	padding: 1rem;
}

.hx-prose .wp-block-button__link {
	display: inline-block;
	padding: 12px 28px;
	background-color: var(--hx-primary);
	border-radius: var(--hx-radius-pill);
	color: var(--hx-inverse);
	font-weight: 600;
	text-decoration: none;
}

.hx-prose .aligncenter {
	margin-inline: auto;
	text-align: center;
}

.hx-prose .alignright {
	float: right;
	margin: 0 0 1rem 1.5rem;
}

.hx-prose .alignleft {
	float: left;
	margin: 0 1.5rem 1rem 0;
}

.hx-prose .wp-block-embed,
.hx-prose iframe {
	max-width: 100%;
}

.hx-prose embed,
.hx-prose iframe,
.hx-prose object {
	margin-bottom: 1.5rem;
}

/* AIOSEO injects id="aioseo-*" anchors into headings on the three
   "how to cook" pages and links its ItemList schema to them. Give them a
   scroll offset so a sticky header does not cover the target. */
.hx-prose [id^="aioseo-"] {
	scroll-margin-top: 110px;
}

/* ==========================================================================
   2. EDITORIAL COMPONENTS  —  RESERVED
   Blog cards, single-post chrome, recipe layout, ACF page blocks, accordion,
   testimonials, TOC and share are appended below by later phases.
   ========================================================================== */

/* ==========================================================================
   3. HOME / FRONT PAGE          —  added by front-page
   Owner: front-page.php + template-parts/home/*.php
   Source: page-specs/front-page.md §3, phase0-backup/elementor-inline-css/
           15-helixx-foods.css and 24-default-kit.css.

   Every section is full-bleed; boxed sections opt in with
   --hx-container-boxed (1200px), NOT --hx-container-max (1600px). The single
   exception is the testimonials band, which is stretched to the viewport with
   a 1600px inner — that asymmetry is in the original and is deliberate.
   ========================================================================== */

/* --------------------------------------------------------------------------
   3.1 Hero slider
   -------------------------------------------------------------------------- */

.hx-hero {
	position: relative;
	min-height: 518px;
	/* Pulls the hero under the header. The header has no bottom spacing of its
	   own, so without this there is a 35px white band across the top. */
	margin-top: -35px;
	margin-bottom: 0;
	overflow: hidden;
	/* Entrance animation — the Elementor wrapper used fadeInUp. One shot, on
	   first paint only; disabled under prefers-reduced-motion in §3.9. */
	animation: hx-fade-in-up .6s var(--hx-ease-overshoot) both;
}

.hx-hero__track {
	display: flex;
	height: 518px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hx-hero__track::-webkit-scrollbar {
	display: none;
}

.hx-hero__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: block;
	position: relative;
	background-color: #833ca3;
}

.hx-hero__bg,
.hx-hero__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@keyframes hx-fade-in-up {
	from {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.hx-hero__nav {
	position: absolute;
	top: 50%;
	z-index: var(--hx-z-card);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--hx-radius-round);
	background: rgba(255, 255, 255, .8);
	color: var(--hx-secondary);
	cursor: pointer;
	transform: translateY(-50%);
	transition: var(--hx-t-ui);
}

.hx-hero__nav:hover,
.hx-hero__nav:focus-visible {
	background: var(--hx-inverse);
}

.hx-hero__nav--prev {
	left: 15px;
}

.hx-hero__nav--next {
	right: 15px;
}

.hx-hero__dots {
	position: absolute;
	inset: auto 0 18px 0;
	z-index: var(--hx-z-card);
	display: flex;
	gap: 8px;
	justify-content: center;
}

/* carousel.js injects one button per slide. Styled here so the dots are
   correct the instant the script paints them. */
.hx-hero__dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: var(--hx-radius-round);
	background: rgba(255, 255, 255, .55);
	cursor: pointer;
	transition: var(--hx-t-ui);
}

.hx-hero__dots button[aria-selected="true"] {
	background: var(--hx-inverse);
}

/* An empty dot rail must not sit as a dead strip when JS has not run. */
.hx-hero__dots:empty {
	display: none;
}

@media (max-width: 1024px) {
	.hx-hero,
	.hx-hero__track {
		min-height: 498px;
		height: 498px;
	}
}

@media (max-width: 767px) {
	.hx-hero,
	.hx-hero__track {
		min-height: 441px;
		height: 441px;
	}

	.hx-hero__nav {
		width: 36px;
		height: 36px;
	}
}

/* --------------------------------------------------------------------------
   3.2 Free-shipping announcement bar
   -------------------------------------------------------------------------- */

.hx-announce {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 9vh;
	background: var(--hx-primary);
}

.hx-announce__text {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 0;
	margin: 0;
	color: var(--hx-inverse);
	font-size: 22px;
	font-weight: 500;
	text-align: center;
}

.hx-announce__icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	fill: currentColor;
}

@media (max-width: 767px) {
	.hx-announce {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   3.3 Benefits heading + 7-icon grid
   -------------------------------------------------------------------------- */

.hx-benefits__head {
	max-width: var(--hx-container-boxed);
	margin-inline: auto;
	padding: var(--hx-gutter);
	/* Replaces the 20px spacer widget that sat above the heading. */
	padding-top: 30px;
}

/* This is the page's only h1 — production had zero. It keeps the h2 visual
   treatment, so promoting it moves nothing on screen. */
.hx-benefits__title {
	margin: 0 0 var(--hx-heading-mb);
	color: #000;   /* explicitly black here, not --hx-heading */
	font-size: var(--hx-h2);
	font-weight: var(--hx-weight-heading);
	line-height: var(--hx-leading-heading);
	text-align: center;
}

.hx-benefits__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: var(--hx-container-boxed);
	margin-inline: auto;
	padding: var(--hx-gutter);
}

/* The entire grid is one anchor — Elementor rendered the inner container with
   html_tag:a. Reproduced, so the whole block stays one click target. */
.hx-benefits__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 20px;
	width: 100%;
	/* Replaces the 2.5em trailing spacer widget. */
	margin-bottom: 2.5em;
	color: inherit;
	text-decoration: none;
}

.hx-benefit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	text-align: center;
}

.hx-benefit__icon {
	display: inline-block;
	line-height: 0;
}

.hx-benefit__icon svg {
	width: 48px;
	height: 48px;
	fill: var(--hx-primary);
	color: var(--hx-primary);
}

.hx-benefit__icon svg.hx-benefit-icon--outline {
	fill: none;
}

.hx-benefit__title {
	margin: 0;
	font-size: var(--hx-h5);
	line-height: var(--hx-leading-heading);
}

@media (max-width: 1024px) {
	.hx-benefits__grid {
		grid-template-columns: repeat(4, 1fr);
		justify-items: center;
	}
}

@media (max-width: 767px) {
	.hx-benefits__head,
	.hx-benefits__body {
		padding: 0;
	}

	.hx-benefits__grid {
		grid-template-columns: repeat(3, 1fr);
		margin-bottom: .1em;
	}

	/* Replaces the blank 8th tile whose only purpose was to push "ZERO Sugar"
	   into the centre column. Same layout, one fewer empty heading. */
	.hx-benefit:last-child {
		grid-column: 2;
	}
}

/* --------------------------------------------------------------------------
   3.4 Featured 3-up product grid
   -------------------------------------------------------------------------- */

.hx-featured {
	max-width: var(--hx-container-boxed);
	margin-inline: auto;
	/* The container carried margin-top/-bottom of -1em. */
	margin-block: -1em;
	padding: var(--hx-gutter);
}

.hx-featured__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

@media (min-width: 1025px) {
	.hx-featured__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Card internals. These belong to the shared product card; the homepage is the
   first surface to need them, and shop.css owns the archive variants. */
.hx-featured .product-wrapper,
.hx-bundles .product-wrapper {
	position: relative;
	border-radius: 2px;
	transition: box-shadow .3s ease-in-out;
}

.hx-featured .product:hover .product-wrapper,
.hx-bundles .product:hover .product-wrapper {
	box-shadow: var(--hx-shadow-card-hover);
	z-index: 91;
}

.hx-featured .product-image,
.hx-bundles .product-image {
	position: relative;
	margin-bottom: 8px;
	overflow: hidden;
}

.hx-featured .product-image img,
.hx-bundles .product-image img {
	width: 100%;
	height: auto;
	transition: var(--hx-t-image);
}

.hx-featured .product-image .hover-image {
	position: absolute;
	inset: 0 auto auto 0;
	opacity: 0;
	visibility: hidden;
}

.hx-featured .product-image:hover .hover-image {
	opacity: 1;
	visibility: visible;
}

.hx-featured .quickview-button,
.hx-bundles .quickview-button {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(35px);
	transition: all 200ms ease-out;
}

.hx-featured .product:hover .quickview-button,
.hx-bundles .product:hover .quickview-button {
	z-index: var(--hx-z-card);
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Sale strikethrough is suppressed site-wide by the current build. Cloned
   here rather than "fixed" — removing it changes every price on the site. */
.hx-featured .price del,
.hx-bundles .price del {
	display: none;
}

.hx-featured .custom-ajax-add-to-cart {
	margin-top: 1em;
}

.hx-featured .bos4w-display-options li:nth-child(2) label {
	display: none;
}

.hx-featured .ajax-add-to-cart-button {
	width: 100%;
	padding: 14px 20px;
	border: 2px solid transparent;
	border-radius: var(--hx-radius-plan);
	background: var(--hx-btn-cart-bg);
	color: var(--hx-btn-cart-text);
	text-align: center;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   3.5 Bundles + comparison chart

   25 / 50 / 25 at EVERY breakpoint, phones included. The original explicitly
   forced flex-direction:row at <=767px; open question 4 in front-page.md asks
   the client whether that should stack, but phase 1 ships the row.
   -------------------------------------------------------------------------- */

.hx-bundles {
	max-width: var(--hx-container-boxed);
	margin-inline: auto;
	padding: var(--hx-gutter);
}

.hx-bundles__row {
	display: flex;
	flex-direction: row;
	gap: 0;
	align-items: center;
}

.hx-bundles__col {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.hx-bundles__col--product {
	width: 25%;
}

.hx-bundles__col--chart {
	width: 50%;
	align-self: center;
}

.hx-bundles__chart {
	margin: 0;
}

.hx-bundles__chart-img {
	display: block;
	width: 100%;
	height: auto;
}

/* Bundle products are bopobb, so they are neither simple nor purchasable and
   WooCommerce renders a "Read more" link. Production hides it. */
.hx-bundles .product-buttons {
	display: none;
}

/* --------------------------------------------------------------------------
   3.6 Feature card (made in canada, blueberry, chocolate cake)
   -------------------------------------------------------------------------- */

.hx-feature {
	display: flex;
	flex-direction: row;
	gap: 0;
	max-width: var(--hx-container-boxed);
	margin-inline: auto;
	background: var(--hx-surface-grey);
}

.hx-feature--padded {
	padding: 1em 0;
}

.hx-feature--text-first {
	flex-direction: row-reverse;
}

.hx-feature__media {
	width: 50%;
}

.hx-feature__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--hx-radius-media);
}

.hx-feature__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 50%;
	margin: 2em 0;
	padding: 0 1em;
	border-radius: 35px;
	background: var(--hx-bg);
}

.hx-feature__title {
	align-self: center;
	margin: 0 0 var(--hx-heading-mb);
	text-align: center;
}

.hx-feature__body {
	padding: 0 10px;
	text-align: center;
}

.hx-feature__body p {
	margin: 0;
}

/* Per-breakpoint visibility — clones Elementor's hidden-desktop / hidden-tablet
   / hidden-mobile on the two flavour-feature cards. Elementor's breakpoints, NOT
   the theme's: desktop is >1024px, tablet+mobile is <=1024px. Blueberry is
   desktop-only and Chocolate Cake is tablet+mobile-only in production
   (front-page.md §3, acceptance criterion 7). This is a cloned pre-existing
   oddity pending client open question 1 — remove both rules, and the
   `visibility` args in front-page.php, once they rule that both should show. */
@media (min-width: 1025px) {
	.hx-feature--below-desktop { display: none; }
}

@media (max-width: 1024px) {
	.hx-feature--desktop-only { display: none; }
}

/* Desktop-only overlap. The original leaked these rules globally and only
   escaped breakage because the sections were hidden below 768px; scoped here.
   Works because .hx-feature__card is position:relative. */
@media (min-width: 768px) {
	.hx-feature--overlap-right .hx-feature__card {
		z-index: 10;
		left: 50%;
		transform: translateX(-105%);
	}

	.hx-feature--overlap-left .hx-feature__card {
		z-index: 10;
		right: 50%;
		transform: translateX(105%);
	}
}

@media (max-width: 767px) {
	.hx-feature,
	.hx-feature--text-first {
		flex-direction: column;
		padding: 0;
	}

	.hx-feature__media,
	.hx-feature__card {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   3.7 Testimonials

   #page-reviews is an in-page anchor target — do not rename it.
   Stretched to the viewport in CSS; production did it in JS
   (elementor-section-stretched). Its inner container is 1600px, unlike every
   other section on this page.
   -------------------------------------------------------------------------- */

#page-reviews {
	width: 100vw;
	margin-top: 0;
	/* Pulls the trust band up, exactly as the original does. */
	margin-bottom: -35px;
	margin-inline: calc(50% - 50vw);
	padding: 6% 0;
	background: var(--hx-bg-alt);
}

.hx-reviews__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	max-width: var(--hx-container-max);
	margin-inline: auto;
	padding-inline: var(--hx-gutter);
}

.hx-reviews__aside,
.hx-reviews__list {
	flex: 1 1 100%;
}

@media (min-width: 768px) {
	.hx-reviews__aside {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}

	.hx-reviews__list {
		flex: 0 0 calc(66.6667% - 20px);
		max-width: calc(66.6667% - 20px);
	}
}

.hx-reviews__aside .hx-heading__title {
	width: 100%;
	max-width: 100%;
	margin: 0 0 var(--hx-heading-mb);
	font-size: var(--hx-h4);
}

.hx-reviews__intro p:last-child {
	margin-bottom: 0;
}

.hx-testimonials {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) {
	.hx-testimonials {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.hx-testimonials {
		grid-template-columns: 1fr;
	}
}

#page-reviews .hx-testimonial {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

#page-reviews .hx-testimonial__quote {
	margin: 0;
	padding: 20px;
	background: var(--hx-bg);
	color: var(--hx-text);
	font-size: var(--hx-text-small);
	line-height: var(--hx-leading);
	quotes: none;
}

#page-reviews .hx-testimonial__meta {
	display: flex;
	align-items: center;
	gap: 15px;
}

#page-reviews .hx-testimonial__avatar {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	border-radius: var(--hx-radius-round);
	object-fit: cover;
}

#page-reviews .hx-testimonial__person {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

#page-reviews .hx-testimonial__name {
	color: var(--hx-heading);
	font-style: normal;
	font-weight: var(--hx-weight-heading);
}

#page-reviews .hx-testimonial__role {
	font-size: var(--hx-text-xs);
}

/* Star colour is the child theme's gold override, not the Woo default. */
#page-reviews .hx-testimonial__rating {
	position: relative;
	display: block;
	overflow: hidden;
	width: 5.4em;
	height: 1em;
	color: var(--hx-accent-gold);
	font-size: var(--hx-text-xs);
	line-height: 1;
}

#page-reviews .hx-testimonial__rating::before,
#page-reviews .hx-testimonial__rating-fill::before {
	content: "\2605\2605\2605\2605\2605";
	position: absolute;
	top: 0;
	left: 0;
	letter-spacing: .1em;
}

#page-reviews .hx-testimonial__rating::before {
	opacity: .25;
}

#page-reviews .hx-testimonial__rating-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	height: 1em;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3.8 Trust band heading + badges
   -------------------------------------------------------------------------- */

.hx-trust__head {
	max-width: var(--hx-container-boxed);
	margin-inline: auto;
	padding: var(--hx-gutter);
}

.hx-trust__title {
	margin: 0 0 var(--hx-heading-mb);
	/* 700 here, not the theme default 600. */
	font-weight: 700;
	text-align: center;
}

.hx-badges {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0;
	max-width: var(--hx-container-boxed);
	margin-inline: auto;
}

.hx-badge {
	display: flex;
	flex-direction: column;
	padding: var(--hx-gutter);
}

@media (min-width: 768px) {
	.hx-badge {
		width: 30%;
	}
}

/* Source writes `01px`; normalised. */
.hx-badge:nth-child(1) {
	border-right: 1px solid #000;
}

.hx-badge:nth-child(3) {
	border-left: 1px solid #000;
}

.hx-badge__img {
	margin-inline: auto;
	margin-bottom: 15px;
}

.hx-badge__image {
	display: block;
	width: 100%;
	height: auto;
	transition-duration: .3s;
}

.hx-badge__title {
	margin: 0 0 var(--hx-heading-mb);
	font-size: var(--hx-text-base);
	font-weight: 700;
}

.hx-badge__desc {
	margin: 0;
}

/* --------------------------------------------------------------------------
   3.9 Reduced motion
   The five --hx-t-* tokens already resolve to `none` under this query; the
   hero's entrance keyframe and its smooth scrolling are not transitions, so
   they need switching off explicitly.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hx-hero {
		animation: none;
	}

	.hx-hero__track {
		scroll-behavior: auto;
	}
}

/* --------------------------------------------------------------------------
   4. BLOG + POST ARCHIVES       —  added by blog-archives
   Spec: page-specs/blog.md §5-§12. Every value below is lifted from the
   captured pressmart-base-inline-css / theme.css, or is a token from base.css.
   Nothing here is invented.

   One deliberate omission, flagged not fixed: blog.md §5.4 records that
   featured images carry no aspect-ratio and no object-fit anywhere in the
   source, so a single 3-up row renders ratios of 1.000, 1.500 and 1.905 and
   the card heights are ragged. The recommended
   `.post-thumbnail img{aspect-ratio:3/2;object-fit:cover}` is a FIX REQUIRING
   SIGN-OFF, not a clone, and is left out of phase 1 on purpose. It is a
   two-line change once approved.
   -------------------------------------------------------------------------- */

/* Sidebar layout. Production splits 66.7/33.3 from 768px (col-md-8/col-md-4)
   and 75/25 from 1025px (col-lg-9/col-lg-3). base.css only introduces its aside
   at 1025px, so the blog modifier adds the tablet step and restates the
   desktop one. The 20px gap is the .row gutter (10px each side). */
.hx-layout--blog {
	gap: 30px 20px;
}

@media (min-width: 768px) {
	.hx-layout--blog {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

@media (min-width: 1025px) {
	.hx-layout--blog {
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	}
}

/* --- The grid ------------------------------------------------------------ */

/* Rebuilt with CSS Grid; bootstrap-grid.css and the col-* classes are retired.
   The source got its row rhythm from `.blog-post-loop:not(:last-child)
   {margin-bottom:3rem}` - row-gap is equivalent and drops the special case. */
.articles-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem 20px;
	margin-bottom: 1rem;
}

@media (min-width: 768px) {
	.articles-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Card ---------------------------------------------------------------- */

.blog-post-loop .entry-thumbnail-wrapper,
.related-post .entry-thumbnail-wrapper {
	position: relative;
	margin-bottom: 1rem;
}

.blog-post-loop .entry-content-wrapper,
.related-post .entry-content-wrapper {
	position: relative;
}

/* Date badge. Reused verbatim on the single post. */
.entry-date {
	position: absolute;
	top: 1em;
	left: 1em;
	z-index: var(--hx-z-card);
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 50px;
	height: 55px;
	padding: 5px 0;
	font-size: var(--hx-text-xs);
	font-weight: var(--hx-weight-heading);
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	color: var(--hx-inverse);
	background-color: var(--hx-primary);
	border-radius: var(--hx-radius);
	box-shadow: var(--hx-shadow-ring);
}

.entry-date .date-day {
	font-size: var(--hx-h3);
	margin-bottom: 5px;
}

/* One of the 14 posts has no featured image; the badge drops into flow. */
.post:not(.has-post-thumbnail) .entry-date {
	position: static;
}

/* Thumbnail hover - pure CSS, works with JS disabled (blog.md §15). */
.post-thumbnail {
	position: relative;
	overflow: hidden;
}

.post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}

.post-thumbnail a img {
	transition: transform var(--hx-t-image) var(--hx-ease-overshoot);
}

.entry-post:hover .post-thumbnail a img {
	transform: scale(1.1);
}

.post-thumbnail a::after {
	content: "";
	position: absolute;
	inset: 0;
	transition: background-color var(--hx-t-image) var(--hx-ease-overshoot);
}

.entry-post:hover .post-thumbnail a::after {
	background-color: rgba(0, 0, 0, .3);
}

/* Card text */
.blog-post-loop .entry-header,
.related-post .entry-header {
	margin-bottom: 1rem;
}

.blog-post-loop .entry-title,
.related-post .entry-title {
	margin-bottom: var(--hx-heading-mb);
	overflow-wrap: break-word;
	hyphens: auto;
}

.blog-post-loop .entry-title:last-child,
.related-post .entry-title:last-child {
	margin-bottom: 0;
}

/* 20px at every width. theme.css also sets
   `.entry-header .entry-title{font-size:21px}` inside max-width:1199px, but
   `.blog-grid .entry-header .entry-title` is three classes to its two and wins
   everywhere - so the 22px rule never applies and is not ported. */
.blog-grid .entry-header .entry-title {
	font-size: var(--hx-h4);
}

.blog-post-loop .entry-content p:last-child {
	margin-bottom: 0;
}

/* Read more. `read-more-link` style: a text link - no padding, no border. */
.entry-footer {
	margin-top: 1.2rem;
}

.read-more-btn {
	margin: 0;
}

.read-more-btn,
.read-more-btn .more-link {
	display: inline-block;
	font-weight: var(--hx-weight-heading);
}

.read-more-btn .more-link {
	color: var(--hx-primary);
}

/* --- Share rows ---------------------------------------------------------- */

.blog-post-loop .post-share,
.related-post .post-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.post-meta-label {
	font-size: var(--hx-text-small);
}

.pressmart-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

/* The label travels with every link for screen readers, but the source never
   displays it at any icon style. */
.pressmart-social .social-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pressmart-social a,
.pressmart-social button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	transition: color var(--hx-t-ui), background-color var(--hx-t-ui), border-color var(--hx-t-ui);
}

.pressmart-social.icons-colour a:hover,
.pressmart-social.icons-colour button:hover {
	color: var(--hx-primary);
}

.pressmart-social.icons-shape-circle a,
.pressmart-social.icons-shape-circle button {
	border-radius: var(--hx-radius-round);
}

.pressmart-social.icons-bordered a,
.pressmart-social.icons-bordered button {
	width: 36px;
	height: 36px;
	border: 1px solid var(--hx-border);
}

.pressmart-social.icons-bordered a:hover,
.pressmart-social.icons-bordered button:hover {
	color: var(--hx-inverse);
	background-color: var(--hx-primary);
	border-color: var(--hx-primary);
}

.pressmart-social.icons-size-small a,
.pressmart-social.icons-size-small button {
	width: 30px;
	height: 30px;
	font-size: var(--hx-text-small);
}

.pressmart-social.icons-theme-colour a,
.pressmart-social.icons-theme-colour button {
	color: var(--hx-inverse);
	background-color: var(--hx-primary);
}

/* --- Pagination ---------------------------------------------------------- */

.pressmart-pagination {
	padding: 1em .5em;
	margin-top: 1em;
	margin-bottom: 2em;
	text-align: center;
}

.pressmart-pagination ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pressmart-pagination li {
	display: inline-block;
}

.pressmart-pagination li .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 1px;
	border-radius: var(--hx-radius-round);
	font-weight: var(--hx-weight-heading);
}

.pressmart-pagination .page-numbers.current {
	color: var(--hx-inverse);
	background-color: var(--hx-primary);
}

.pressmart-pagination li .next,
.pressmart-pagination li .prev {
	width: auto;
	padding: 0 15px;
	text-transform: uppercase;
	color: var(--hx-primary);
}

/* --- Single post --------------------------------------------------------- */

.single-post-page {
	margin-bottom: 50px;
}

.single-post-page .entry-header {
	text-align: center;
	margin-bottom: 2rem;
}

/* 32px carried across from the production `<h2 class="entry-title">` onto the
   `<h1>` this template emits instead - same pixels, correct outline. */
.single-post-page .entry-title {
	font-size: 28px;
}

.single-post-page .entry-thumbnail-wrapper {
	position: relative;
}

.single-post-page .entry-content-wrapper {
	border: none;
	padding-top: 1rem;
	text-align: left;
}

.single-post-page .post-thumbnail img {
	width: 100%;
	height: auto;
}

/* --- Tags + share -------------------------------------------------------- */

.tag-social-share {
	padding: 1rem 0;
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	.tag-social-share {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.tag-social-share .single-tags,
	.tag-social-share .pressmart-social {
		flex-basis: 100%;
		align-items: center;
	}

	.tag-social-share .pressmart-social {
		justify-content: flex-end;
	}
}

@media (max-width: 767px) {
	.tag-social-share {
		text-align: center;
		margin-bottom: 2em;
	}

	.tag-social-share .single-tags {
		margin-bottom: 2em;
	}

	.tag-social-share .pressmart-social {
		justify-content: center;
	}
}

.tag-social-share .single-tags a {
	display: inline-block;
	padding: 7px 12px;
	line-height: 1;
	margin-right: 5px;
	margin-bottom: 5px;
	color: var(--hx-primary);
	background-color: var(--hx-bg-alt);
	border-radius: var(--hx-radius);
	transition: color var(--hx-t-ui), background-color var(--hx-t-ui);
}

.tag-social-share .single-tags a:hover,
.tag-social-share .single-tags a:focus {
	color: var(--hx-inverse);
	background-color: var(--hx-primary);
}

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

.post-navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2em 0;
	margin-bottom: 4em;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	flex: 0 1 50%;
	max-width: 50%;
}

.post-navigation .nav-next {
	text-align: right;
}

.nav-previous a,
.nav-next a {
	display: block;
	position: relative;
	overflow-wrap: break-word;
	hyphens: auto;
}

.nav-previous a {
	padding-left: 3em;
	padding-right: 2em;
}

.nav-next a {
	padding-right: 3em;
	padding-left: 2em;
}

.nav-subtitle {
	display: block;
	color: #999999;
	font-size: var(--hx-h5);
	margin-bottom: .2em;
}

.nav-title {
	font-weight: var(--hx-weight-heading);
	line-height: var(--hx-leading-heading);
}

/* Chevrons: 36px, .2 opacity until hover. The source drew these with icon-font
   pseudo-elements; they are real sprite SVGs here, so they are positioned
   rather than generated. */
.nav-arrow {
	position: absolute;
	top: 15px;
	opacity: .2;
	transition: opacity var(--hx-t-ui);
}

.nav-arrow .hx-icon {
	width: 36px;
	height: 36px;
}

.nav-previous .nav-arrow {
	left: -8px;
}

.nav-next .nav-arrow {
	right: -8px;
}

.nav-archive a {
	display: inline-flex;
	opacity: .2;
	transition: opacity var(--hx-t-ui);
}

.nav-archive .hx-icon {
	width: 28px;
	height: 28px;
}

.nav-previous a:hover .nav-arrow,
.nav-next a:hover .nav-arrow,
.nav-previous a:focus-visible .nav-arrow,
.nav-next a:focus-visible .nav-arrow {
	opacity: 1;
}

.nav-archive:hover a,
.nav-archive a:focus-visible {
	opacity: 1;
}

@media (max-width: 767px) {
	/* Arrows plus "Previous"/"Next" only. */
	.post-navigation .nav-title {
		display: none;
	}

	.nav-arrow {
		top: 0;
	}

	.nav-arrow .hx-icon {
		width: 30px;
		height: 30px;
	}

	.nav-subtitle {
		font-weight: var(--hx-weight-heading);
	}
}

/* --- Related posts ------------------------------------------------------- */

.related.posts {
	position: relative;
	margin-bottom: 4em;
}

.related.posts > h2 {
	position: relative;
	font-size: var(--hx-h4);
	padding-bottom: .5em;
	margin-bottom: 1em;
}

.related.posts > h2::after {
	content: none;
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 70px;
	height: 2px;
	background-color: var(--hx-primary);
}

.related.posts .entry-title {
	font-size: 21px;
}

@media (max-width: 1024px) {
	.related.posts .entry-title {
		font-size: 18px;
	}
}

.related.posts .related-post {
	margin-bottom: 0;
}

/* Replaces Owl Carousel: 2 columns, 30px gutter, x-scroll with snap. Matches
   the captured data-owl_options (rs_* = 2/2/2/2, extra-small 1). */
.hx-related__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(50% - 15px);
	gap: 30px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.hx-related__track::-webkit-scrollbar {
	display: none;
}

.hx-related__track > * {
	scroll-snap-align: start;
}

@media (max-width: 575px) {
	.hx-related__track {
		grid-auto-columns: 100%;
	}
}

/* When everything fits there is nothing to scroll and nothing to steer.
   `is-overflowing` is set by site.js; without JS the track still scrolls and
   snaps natively, and the arrows simply never appear. */
.hx-related__track:not(.is-overflowing) {
	overflow-x: visible;
}

.hx-related__nav {
	display: none;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 1em;
}

.hx-related:has(.hx-related__track.is-overflowing) .hx-related__nav {
	display: flex;
}

/* --- Comments ------------------------------------------------------------ */

.comments-area {
	margin-bottom: 4em;
}

.comments-area > h2,
.comment-respond > h2 {
	position: relative;
	font-size: var(--hx-h4);
	padding-bottom: .5em;
	margin-bottom: 1em;
}

.comments-area > h2::after,
.comment-respond > h2::after {
	content: none;
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 70px;
	height: 2px;
	background-color: var(--hx-primary);
}

.comment-list {
	margin: 0 0 2em;
	padding: 0;
	list-style: none;
}

.comment-list .children {
	margin-left: 1.5rem;
	padding: 0;
	list-style: none;
}

@media (max-width: 767px) {
	.comment-meta {
		padding: 1em;
		text-align: left;
	}
}

/* --- Sidebar ------------------------------------------------------------- */

.widget-area .widget:not(:last-child) {
	margin-bottom: 2rem;
}

.widget-title {
	position: relative;
	font-size: 18px;
	margin-bottom: 20px;
}

.widget-title a {
	color: inherit;
}

/* Widget collapse. `widget-toggle` is on and the source binds a click handler
   to every widget title at every width - there is no media-query guard.
   site.js injects the button and toggles `closed`; until it runs every widget
   is open, which is the safe failure mode. */
.widget-title__toggle {
	all: unset;
	display: block;
	width: 100%;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.widget.closed > *:not(.widget-title) {
	display: none;
}

.pressmart-widget-recent-posts .widget-post-item {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.pressmart-recent-posts .widget-post-item:not(:last-child) {
	margin-bottom: 1rem;
}

.pressmart-widget-recent-posts .widget-post-thumbnail {
	flex: 0 0 auto;
	margin-right: 15px;
	overflow: hidden;
}

.pressmart-widget-recent-posts .widget-post-thumbnail img {
	display: block;
	max-width: 70px;
	height: auto;
}

.pressmart-widget-recent-posts .widget-post-body {
	flex: 1 1 auto;
}

.pressmart-recent-posts .post-title {
	margin-bottom: 5px;
	line-height: 1.5;
}

.pressmart-recent-posts .post-date {
	font-size: var(--hx-text-small);
}

/* --- Archive description + 404 ------------------------------------------- */

.hx-archive-description {
	margin-bottom: 2rem;
}

/* ========================================================================== 
   Cooking Instructions + Cream of Rice Recipes search hubs
   ========================================================================== */

.hx-guide-hub {
	--hx-guide-ink: #14212d;
	--hx-guide-blue: #1d4497;
	--hx-guide-cream: #f3efe6;
	--hx-guide-line: #dfe4e8;
	padding-block: 0;
	color: var(--hx-guide-ink);
}

.hx-guide-hero {
	padding: clamp(66px, 8vw, 118px) 0;
	background: linear-gradient(135deg, #f5f2eb 0%, #fbfbf8 58%, #eef3fb 100%);
}

.hx-guide-hero .hx-container {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
	align-items: center;
	gap: clamp(44px, 6vw, 88px);
}

.hx-guide-eyebrow {
	display: block;
	margin-bottom: 12px;
	color: var(--hx-guide-blue);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.hx-guide-hero h1 {
	max-width: 820px;
	margin: 0 0 22px;
	font-size: clamp(2.22rem, 3.58vw, 3.61rem);
	line-height: .99;
	letter-spacing: -.055em;
}

.hx-guide-hero__lede {
	max-width: 720px;
	margin: 0;
	color: #4c5964;
	font-size: clamp(1.05rem, 1.47vw, 1.2rem);
	line-height: 1.75;
}

.hx-guide-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px 26px;
	margin-top: 32px;
}

.hx-guide-hero__media {
	position: relative;
	margin: 0;
	isolation: isolate;
}

.hx-guide-hero__media::before {
	position: absolute;
	z-index: -1;
	top: -18px;
	right: -18px;
	width: 54%;
	height: 54%;
	border-radius: 28px;
	background: var(--hx-guide-blue);
	content: "";
}

.hx-guide-hero__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: 28px;
	box-shadow: 0 30px 70px rgba(20, 33, 45, .16);
	object-fit: cover;
}

.hx-guide-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 13px 24px;
	border-radius: 999px;
	background: var(--hx-guide-blue);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: transform .2s ease, background-color .2s ease;
}

.hx-guide-button:hover,
.hx-guide-button:focus-visible {
	background: var(--hx-guide-ink);
	color: #fff;
	transform: translateY(-2px);
}

.hx-guide-text-link {
	padding-bottom: 3px;
	border-bottom: 1px solid currentColor;
	color: var(--hx-guide-blue);
	font-weight: 700;
	text-decoration: none;
}

.hx-guide-ratio,
.hx-recipe-hero__ideas {
	padding: clamp(28px, 4vw, 44px);
	border: 1px solid rgba(29, 68, 151, .15);
	border-radius: 26px;
	background: rgba(255, 255, 255, .85);
	box-shadow: 0 24px 65px rgba(22, 39, 57, .1);
}

.hx-guide-ratio > span,
.hx-recipe-hero__ideas > span {
	display: block;
	margin-bottom: 24px;
	color: var(--hx-guide-blue);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hx-guide-ratio strong {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	padding: 10px 0;
	font-size: clamp(1.78rem, 2.92vw, 2.44rem);
	letter-spacing: -.04em;
}

.hx-guide-ratio strong small {
	color: #65717b;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: 0;
}

.hx-guide-ratio > i {
	display: block;
	color: var(--hx-guide-blue);
	font-size: 1.41rem;
	font-style: normal;
}

.hx-guide-ratio p {
	margin: 20px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--hx-guide-line);
	color: #65717b;
	font-size: .88rem;
	line-height: 1.65;
}

.hx-guide-hero__media .hx-guide-ratio {
	position: absolute;
	bottom: -28px;
	left: -28px;
	display: grid;
	grid-template-columns: auto auto auto;
	align-items: center;
	gap: 8px 12px;
	width: min(390px, calc(100% - 28px));
	padding: 20px 24px;
	border: 0;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 20px 45px rgba(20, 33, 45, .18);
}

.hx-guide-hero__media .hx-guide-ratio > span {
	grid-column: 1 / -1;
	margin: 0 0 2px;
}

.hx-guide-hero__media .hx-guide-ratio strong {
	display: block;
	padding: 0;
	font-size: 1.29rem;
	white-space: nowrap;
}

.hx-guide-hero__media .hx-guide-ratio strong small {
	display: block;
	margin-top: 2px;
	font-size: .67rem;
}

.hx-guide-hero__media .hx-guide-ratio > i {
	font-size: 1.14rem;
}

.hx-guide-methods,
.hx-recipe-collection {
	padding: clamp(70px, 9vw, 126px) 0;
	scroll-margin-top: 110px;
}

.hx-guide-section-head {
	max-width: 760px;
	margin-bottom: 40px;
}

.hx-guide-section-head h2,
.hx-guide-how h2,
.hx-recipe-notes h2 {
	margin: 0 0 14px;
	font-size: clamp(1.78rem, 2.96vw, 2.8rem);
	line-height: 1.08;
	letter-spacing: -.04em;
}

.hx-guide-section-head p,
.hx-guide-how__intro > p {
	margin: 0;
	color: #5b6771;
	font-size: 1rem;
	line-height: 1.72;
}

.hx-guide-method-picker {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
	align-items: center;
	gap: clamp(42px, 8vw, 110px);
	padding: clamp(34px, 5vw, 64px);
	border: 1px solid var(--hx-guide-line);
	border-radius: 28px;
	background: #f7f8fb;
}

.hx-guide-method-picker__copy h2 {
	margin: 0 0 14px;
	font-size: clamp(1.78rem, 2.91vw, 2.75rem);
	line-height: 1.08;
	letter-spacing: -.04em;
}

.hx-guide-method-picker__copy p {
	max-width: 580px;
	margin: 0;
	color: #5e6972;
	line-height: 1.72;
}

.hx-guide-method-picker__buttons {
	display: grid;
	gap: 12px;
}

.hx-guide-method-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 62px;
	padding: 15px 20px 15px 24px;
	border: 1px solid #d5dce5;
	border-radius: 999px;
	background: #fff;
	color: var(--hx-guide-ink);
	font-size: 1rem;
	font-weight: 750;
	text-decoration: none;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.hx-guide-method-button i {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #eef2fa;
	color: var(--hx-guide-blue);
	font-style: normal;
	transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.hx-guide-method-button:hover,
.hx-guide-method-button:focus-visible {
	border-color: var(--hx-guide-blue);
	background: var(--hx-guide-blue);
	color: #fff;
	transform: translateX(4px);
}

.hx-guide-method-button:hover i,
.hx-guide-method-button:focus-visible i {
	background: #fff;
	color: var(--hx-guide-blue);
	transform: translateX(2px);
}

.hx-guide-section-head--center {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.hx-guide-section-head--center p {
	margin-right: auto;
	margin-left: auto;
}

.hx-guide-method-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.5vw, 32px);
}

.hx-guide-method-card {
	position: relative;
	display: flex;
	min-height: 390px;
	padding: clamp(26px, 3vw, 38px);
	overflow: hidden;
	border: 1px solid var(--hx-guide-line);
	border-radius: 26px;
	background: #fff;
	color: var(--hx-guide-ink);
	flex-direction: column;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.hx-guide-method-card::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 6px;
	background: var(--hx-guide-blue);
	content: "";
}

.hx-guide-method-card:nth-child(2)::before { background: #df8b45; }
.hx-guide-method-card:nth-child(3)::before { background: #6a8b73; }

.hx-guide-method-card:hover,
.hx-guide-method-card:focus-visible {
	border-color: rgba(29, 68, 151, .45);
	box-shadow: 0 22px 54px rgba(20, 33, 45, .12);
	color: var(--hx-guide-ink);
	transform: translateY(-6px);
}

.hx-guide-method-card:focus-visible {
	outline: 3px solid rgba(29, 68, 151, .25);
	outline-offset: 4px;
}

.hx-guide-method-card__icon {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin-bottom: 26px;
	border-radius: 22px;
	background: #eef2fa;
	color: var(--hx-guide-blue);
}

.hx-guide-method-card:nth-child(2) .hx-guide-method-card__icon { background: #fcf0e6; color: #a95517; }
.hx-guide-method-card:nth-child(3) .hx-guide-method-card__icon { background: #edf3ef; color: #446d50; }

.hx-guide-method-card__icon svg {
	width: 48px;
	height: 48px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hx-guide-method-card__eyebrow {
	margin-bottom: 9px;
	color: var(--hx-guide-blue);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.hx-guide-method-card:nth-child(2) .hx-guide-method-card__eyebrow { color: #95501d; }
.hx-guide-method-card:nth-child(3) .hx-guide-method-card__eyebrow { color: #446d50; }

.hx-guide-method-card h3 {
	margin: 0 0 14px;
	font-size: clamp(1.26rem, 1.65vw, 1.54rem);
	line-height: 1.24;
	letter-spacing: -.025em;
}

.hx-guide-method-card p {
	margin: 0 0 26px;
	color: #5d6871;
	font-size: .92rem;
	line-height: 1.65;
}

.hx-guide-method-card__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--hx-guide-line);
	color: var(--hx-guide-blue);
	font-size: .86rem;
	font-weight: 800;
}

.hx-guide-method-card__link i {
	font-size: 1.22rem;
	font-style: normal;
	transition: transform .2s ease;
}

.hx-guide-method-card:hover .hx-guide-method-card__link i,
.hx-guide-method-card:focus-visible .hx-guide-method-card__link i {
	transform: translateX(4px);
}

.hx-guide-how {
	padding: clamp(70px, 9vw, 126px) 0;
	background: var(--hx-guide-cream);
}

.hx-guide-how .hx-container {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(50px, 9vw, 130px);
}

.hx-guide-steps { margin: 0; padding: 0; list-style: none; }
.hx-guide-steps li { padding: 28px 0; border-top: 1px solid #d8d2c7; }
.hx-guide-steps li:last-child { border-bottom: 1px solid #d8d2c7; }
.hx-guide-steps h3 { margin: 2px 0 7px; font-size: 1.14rem; }
.hx-guide-steps p { margin: 0; color: #626b70; font-size: .92rem; line-height: 1.7; }

.hx-guide-fixes { padding: clamp(70px, 9vw, 126px) 0; }
.hx-guide-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hx-guide-line); }
.hx-guide-faq-grid article { padding: 32px 34px 34px 0; border-bottom: 1px solid var(--hx-guide-line); }
.hx-guide-faq-grid article:nth-child(even) { padding-right: 0; padding-left: 34px; border-left: 1px solid var(--hx-guide-line); }
.hx-guide-faq-grid h3 { margin: 0 0 12px; font-size: 1.18rem; }
.hx-guide-faq-grid p { margin: 0; color: #5d6871; line-height: 1.75; }

.hx-guide-cta {
	position: relative;
	padding: clamp(70px, 8vw, 108px) 0;
	overflow: hidden;
	background: #111d27;
	color: #fff;
}

.hx-guide-cta::before {
	position: absolute;
	top: 0;
	right: 0;
	width: min(42vw, 620px);
	height: 100%;
	background: radial-gradient(circle at 70% 42%, rgba(72, 110, 188, .3), transparent 58%);
	content: "";
	pointer-events: none;
}

.hx-guide-cta .hx-container {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(270px, .42fr);
	align-items: end;
	gap: clamp(48px, 8vw, 120px);
}

.hx-guide-cta .hx-guide-eyebrow { color: #b9c9ee; }

.hx-guide-cta h2 {
	max-width: 760px;
	margin: 0;
	color: #fff;
	font-size: clamp(1.97rem, 3.25vw, 3.25rem);
	line-height: 1.02;
	letter-spacing: -.05em;
}

.hx-guide-cta__copy p {
	max-width: 600px;
	margin: 24px 0 0;
	color: #bec7ce;
	font-size: 1rem;
	line-height: 1.7;
}

.hx-guide-cta__action {
	position: relative;
	display: flex;
	align-items: stretch;
	flex-direction: column;
}

.hx-guide-cta__ratio {
	display: block;
	margin-bottom: -12px;
	color: rgba(255, 255, 255, .1);
	font-size: clamp(3.72rem, 5.74vw, 4.88rem);
	font-weight: 800;
	line-height: .8;
	letter-spacing: -.08em;
	text-align: right;
}

.hx-guide-cta__ratio small {
	margin-left: 5px;
	font-size: .27em;
	letter-spacing: 0;
}

.hx-guide-button--light {
	position: relative;
	justify-content: space-between;
	width: 100%;
	min-height: 58px;
	padding-inline: 26px;
	background: #fff;
	color: var(--hx-guide-ink);
}

.hx-guide-button--light:hover,
.hx-guide-button--light:focus-visible {
	background: #dfe7f8;
	color: var(--hx-guide-ink);
}

.hx-guide-cta__action > small {
	margin-top: 13px;
	color: #99a5ae;
	font-size: .72rem;
	letter-spacing: .04em;
	text-align: center;
}

/* Recipe hub */
.hx-recipe-hero__ideas ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.hx-recipe-hero__ideas li { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 15px 0; border-top: 1px solid var(--hx-guide-line); }
.hx-recipe-hero__ideas li:last-child { border-bottom: 1px solid var(--hx-guide-line); }
.hx-recipe-hero__ideas strong { color: var(--hx-guide-ink); }
.hx-recipe-hero__ideas small { color: #65717b; line-height: 1.5; }
.hx-recipe-collection .hx-guide-section-head { margin-inline: auto; text-align: center; }
.hx-recipe-collection .hx-recipes-archive { width: 100%; margin: 42px 0 10px; }
.hx-recipe-notes { padding: clamp(70px, 9vw, 126px) 0; background: var(--hx-guide-cream); }
.hx-recipe-notes .hx-container { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(50px, 8vw, 110px); }
.hx-recipe-notes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #d7d1c7; }
.hx-recipe-notes__grid article { padding: 28px 22px; border-left: 1px solid #d7d1c7; }
.hx-recipe-notes__grid article:first-child { border-left: 0; padding-left: 0; }
.hx-recipe-notes__grid article:last-child { padding-right: 0; }
.hx-recipe-notes__grid span { display: block; margin-bottom: 50px; color: var(--hx-guide-blue); font-size: .72rem; font-weight: 800; }
.hx-recipe-notes__grid h3 { margin: 0 0 12px; font-size: 1.1rem; }
.hx-recipe-notes__grid p { margin: 0; color: #606970; font-size: .86rem; line-height: 1.72; }

@media (max-width: 900px) {
	.hx-guide-hero .hx-container,
	.hx-guide-how .hx-container,
	.hx-recipe-notes .hx-container,
	.hx-guide-method-picker { grid-template-columns: 1fr; }
	.hx-guide-ratio,
	.hx-recipe-hero__ideas { max-width: 620px; }
	.hx-guide-hero__media { max-width: 720px; }
	.hx-guide-method-grid { grid-template-columns: 1fr; }
	.hx-guide-method-card { min-height: 0; }
	.hx-guide-cta .hx-container { grid-template-columns: 1fr; gap: 38px; }
	.hx-guide-cta__action { max-width: 440px; }
	.hx-recipe-notes__grid { max-width: 760px; }
}

@media (max-width: 680px) {
	.hx-guide-hero { padding: 52px 0; }
	.hx-guide-hero .hx-container { gap: 36px; }
	.hx-guide-hero h1 { font-size: clamp(2.09rem, 9.97vw, 2.88rem); }
	.hx-guide-hero__media::before { top: -10px; right: -10px; border-radius: 20px; }
	.hx-guide-hero__media img { border-radius: 20px; }
	.hx-guide-hero__media .hx-guide-ratio {
		position: relative;
		bottom: auto;
		left: auto;
		width: calc(100% - 24px);
		margin: -34px auto 0;
	}
	.hx-guide-hero__actions { align-items: stretch; flex-direction: column; }
	.hx-guide-button { width: 100%; }
	.hx-guide-text-link { align-self: flex-start; }
	.hx-guide-method-picker { gap: 30px; padding: 28px 20px; border-radius: 20px; }
	.hx-guide-method-button { min-height: 58px; }
	.hx-guide-faq-grid { grid-template-columns: 1fr; }
	.hx-guide-faq-grid article,
	.hx-guide-faq-grid article:nth-child(even) { padding: 28px 0; border-left: 0; }
	.hx-guide-cta__action { max-width: none; }
	.hx-guide-button--light { width: 100%; }
	.hx-recipe-notes__grid { grid-template-columns: 1fr; }
	.hx-recipe-notes__grid article,
	.hx-recipe-notes__grid article:first-child,
	.hx-recipe-notes__grid article:last-child { padding: 24px 0; border-left: 0; border-bottom: 1px solid #d7d1c7; }
	.hx-recipe-notes__grid span { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.hx-guide-method-card,
	.hx-guide-method-card__link i { transition: none; }
}

@media print {
	.hx-guide-hero,
	.hx-guide-how,
	.hx-guide-fixes,
	.hx-recipe-notes { padding-block: 28px; background: #fff; }
	.hx-guide-hero .hx-container,
	.hx-guide-how .hx-container,
	.hx-recipe-notes .hx-container { display: block; }
	.hx-guide-hero__actions,
	.hx-guide-cta { display: none; }
}

/* The 404 heading is `404` above the message; base.css §hx-404 owns the 48px
   type and the line-height of 1. */
.hx-404__code {
	display: block;
}

/* ========================================================================== 
   4A. SINGLE STORY REDESIGN

   A Helixx-specific editorial system: generous headline hierarchy, a wide
   image led opening, a readable measure and a contextual sticky rail. This
   intentionally supersedes the production-clone single-post rules above while
   leaving archive cards and all other content surfaces unchanged.
   ========================================================================== */

body.single-post {
	--hx-story-ink: #101820;
	--hx-story-muted: #66707a;
	--hx-story-wash: #f4f6fb;
}

.hx-reading-progress {
	position: fixed;
	z-index: calc(var(--hx-z-header-sticky) + 1);
	top: var(--hx-admin-bar, 0px);
	left: 0;
	width: 100%;
	height: 3px;
	pointer-events: none;
}

.hx-reading-progress span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--hx-primary);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

.hx-single-story {
	padding-top: 0;
	padding-bottom: 80px;
	overflow: clip;
}

.hx-single-story > .hx-container {
	width: 100%;
	max-width: 1380px;
	padding-inline: clamp(18px, 4vw, 64px);
}

.single-post-page {
	margin-bottom: 0;
}

.hx-story-opening {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
	align-items: stretch;
	gap: clamp(36px, 5vw, 76px);
	max-width: 1240px;
	margin: 0 auto clamp(28px, 4vw, 46px);
	padding-top: clamp(28px, 4vw, 54px);
}

.single-post-page .hx-story-header {
	display: flex;
	min-width: 0;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	padding: 0;
	text-align: left;
}

.hx-story-header__crumbs {
	margin-bottom: clamp(28px, 4vw, 48px);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--hx-story-muted);
}

.hx-story-header__crumbs .hx-breadcrumb {
	font-size: inherit;
}

.hx-story-header__crumbs a {
	color: var(--hx-story-muted);
}

.hx-story-header__category {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--hx-primary);
}

.hx-story-header__category::before {
	content: none;
}

.single-post-page .hx-story-header .entry-title {
	max-width: 720px;
	margin: 0;
	color: var(--hx-story-ink);
	font-size: clamp(33px, 3.26vw, 45px);
	font-weight: 650;
	letter-spacing: -.04em;
	line-height: 1.06;
	text-wrap: balance;
}

.hx-story-header__dek {
	max-width: 660px;
	margin: 22px 0 0;
	color: var(--hx-story-muted);
	font-size: clamp(18px, 1.56vw, 22px);
	line-height: 1.55;
	text-wrap: balance;
}

.hx-story-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 9px;
	margin-top: 28px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--hx-story-muted);
}

.hx-story-meta__author {
	font-weight: 700;
	color: var(--hx-story-ink);
}

.hx-story-opening > .entry-thumbnail-wrapper {
	position: relative;
	min-height: 390px;
	margin: 0;
}

.hx-story-opening > .entry-thumbnail-wrapper::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -18px;
	bottom: -18px;
	width: 72%;
	height: 54%;
	background: var(--hx-story-wash);
}

.hx-story-opening > .entry-thumbnail-wrapper:not(:has(.post-thumbnail)) {
	display: none;
}

.hx-story-opening:not(:has(.post-thumbnail)) {
	grid-template-columns: minmax(0, 820px);
}

.single-post-page .entry-thumbnail-wrapper .post-thumbnail {
	height: 100%;
	overflow: hidden;
	background: var(--hx-story-wash);
	border-radius: 22px;
	box-shadow: 0 18px 45px rgba(16, 24, 32, .11);
}

.single-post-page .entry-thumbnail-wrapper .post-thumbnail img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.hx-story-utility {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(360px, .9fr);
	gap: 0;
	max-width: 1220px;
	margin: 0 auto clamp(44px, 6vw, 72px);
	border: 1px solid #dfe4ee;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 14px 38px rgba(16, 24, 32, .06);
}

.hx-story-answer,
.hx-ai-summary {
	padding: clamp(24px, 3vw, 34px);
}

.hx-story-answer {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hx-ai-summary {
	border-left: 1px solid #dfe4ee;
	background: var(--hx-story-wash);
	border-radius: 0 18px 18px 0;
}

.hx-story-utility__eyebrow {
	margin: 0 0 12px;
	color: var(--hx-primary);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .13em;
	line-height: 1.3;
	text-transform: uppercase;
}

.hx-story-answer > p:last-child {
	margin: 0;
	color: var(--hx-story-ink);
	font-size: clamp(17px, 1.32vw, 20px);
	font-weight: 520;
	line-height: 1.65;
}

.hx-ai-summary__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
}

.hx-ai-summary__link {
	display: grid;
	grid-template-columns: 25px minmax(0, 1fr) auto;
	align-items: center;
	gap: 7px;
	min-height: 42px;
	padding: 7px 10px;
	border: 1px solid #d7deea;
	border-radius: 10px;
	background: #fff;
	color: var(--hx-story-ink);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.hx-ai-summary__link:hover,
.hx-ai-summary__link:focus-visible {
	border-color: var(--hx-primary);
	box-shadow: 0 7px 16px rgba(16, 24, 32, .08);
	color: var(--hx-primary);
	transform: translateY(-1px);
}

.hx-ai-summary__mark {
	display: grid;
	place-items: center;
	width: 25px;
	height: 25px;
	border-radius: 7px;
	background: #edf1f8;
	color: var(--hx-primary);
	font-size: 11px;
	font-weight: 800;
}

.hx-ai-summary__arrow { color: #8a94a0; }

.hx-ai-summary__note {
	margin: 11px 0 0;
	color: var(--hx-story-muted);
	font-size: 10px;
	line-height: 1.4;
}

.hx-story-layout {
	display: grid;
	grid-template-columns: minmax(0, 790px) 280px;
	justify-content: center;
	align-items: start;
	gap: clamp(50px, 7vw, 110px);
	max-width: 1220px;
	margin-inline: auto;
}

.hx-story-layout__article {
	min-width: 0;
}

.single-post-page .entry-content-wrapper {
	padding-top: 0;
}

.single-post-page .hx-prose {
	color: #39434d;
	font-size: clamp(17px, 1.2vw, 18px);
	line-height: 1.85;
}

.single-post-page .hx-prose > p:first-child {
	color: var(--hx-story-ink);
	font-size: clamp(20px, 1.56vw, 22px);
	line-height: 1.65;
}

.single-post-page .hx-prose h2 {
	margin-top: 2.3em;
	font-size: clamp(26px, 2.55vw, 34px);
	letter-spacing: -.03em;
	line-height: 1.16;
}

.single-post-page .hx-prose h3 {
	margin-top: 2em;
	font-size: clamp(21px, 1.82vw, 26px);
	letter-spacing: -.02em;
}

.single-post-page .hx-prose p,
.single-post-page .hx-prose ul,
.single-post-page .hx-prose ol {
	margin-bottom: 1.35rem;
}

.single-post-page .hx-prose li {
	margin-bottom: .7em;
	padding-left: .35em;
}

.single-post-page .hx-prose li::marker {
	color: var(--hx-primary);
	font-weight: 700;
}

/* Older imported posts contain markerless wrapper lists around the real list.
   Flatten those shells so the content reads as one intentional list. */
.single-post-page .hx-prose > ol > li[style*="list-style-type: none"],
.single-post-page .hx-prose > ul > li[style*="list-style-type: none"] {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-post-page .hx-prose > ol > li[style*="list-style-type: none"] > ol,
.single-post-page .hx-prose > ul > li[style*="list-style-type: none"] > ul {
	margin-left: 0;
}

.single-post-page .hx-prose > ol:has(> li:only-child > ol:empty),
.single-post-page .hx-prose > ul:has(> li:only-child > ul:empty) {
	display: none;
}

.single-post-page .hx-prose blockquote {
	position: relative;
	margin: clamp(34px, 5vw, 58px) 0;
	padding: clamp(28px, 4vw, 44px);
	border: 0;
	background: var(--hx-story-wash);
	color: var(--hx-story-ink);
	font-size: clamp(20px, 1.83vw, 25px);
	font-style: normal;
	font-weight: 600;
	line-height: 1.55;
}

.single-post-page .hx-prose blockquote::before {
	content: "“";
	display: block;
	height: 30px;
	color: var(--hx-primary);
	font-size: 45px;
	line-height: .8;
}

.single-post-page .hx-prose figure,
.single-post-page .hx-prose .wp-block-image {
	margin-block: clamp(32px, 5vw, 56px);
}

.single-post-page .hx-prose figure img,
.single-post-page .hx-prose .wp-block-image img {
	width: 100%;
}

.hx-story-rail__sticky {
	position: sticky;
	top: calc(var(--hx-header-main-h-sticky) + 34px);
}

.hx-story-toc,
.hx-story-share {
	padding-bottom: 28px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--hx-border);
}

.hx-story-rail__eyebrow {
	margin: 0 0 16px;
	color: var(--hx-story-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .13em;
	line-height: 1.3;
	text-transform: uppercase;
}

.hx-story-toc ol {
	display: grid;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-story-toc li a {
	display: block;
	color: var(--hx-story-muted);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
}

.hx-story-toc li.is-subsection {
	margin-left: 30px;
}

.hx-story-toc a:hover,
.hx-story-toc a:focus,
.hx-story-toc a.is-current {
	color: var(--hx-story-ink);
}

.hx-story-share .pressmart-social {
	gap: 8px;
}

.hx-story-share .pressmart-social a,
.hx-story-share .pressmart-social button {
	width: 34px;
	height: 34px;
}

.hx-story-cta {
	position: relative;
	overflow: hidden;
	padding: 28px 24px;
	background: var(--hx-primary);
	color: var(--hx-inverse);
}

.hx-story-cta::after {
	content: "";
	position: absolute;
	right: -42px;
	bottom: -52px;
	width: 130px;
	height: 130px;
	border: 24px solid rgba(255, 255, 255, .08);
	border-radius: 50%;
}

.hx-story-cta__kicker {
	display: block;
	margin-bottom: 12px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	opacity: .8;
}

.hx-story-cta__title {
	position: relative;
	z-index: 1;
	margin: 0 0 22px;
	color: inherit;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
}

.hx-story-cta .hx-story-cta__button {
	position: relative;
	z-index: 1;
	padding: 10px 18px;
	background: var(--hx-inverse);
	border-radius: 0;
	box-shadow: none;
	color: var(--hx-story-ink);
	font-size: 12px;
}

.hx-story-cta .hx-story-cta__button:hover,
.hx-story-cta .hx-story-cta__button:focus {
	background: var(--hx-secondary);
	color: var(--hx-inverse);
}

.single-post-page .author-info,
.single-post-page .tag-social-share {
	margin-top: 42px;
}

.single-post-page .tag-social-share {
	padding: 26px 0 0;
	border-top: 1px solid var(--hx-border);
}

.hx-story-footer {
	max-width: 1220px;
	margin-inline: auto;
}

.hx-story-footer .post-navigation {
	gap: 16px;
	padding: 30px 0;
	margin: 76px 0 86px;
	border-top: 1px solid var(--hx-border);
	border-bottom: 1px solid var(--hx-border);
}

.hx-story-footer .nav-previous a,
.hx-story-footer .nav-next a {
	min-height: 84px;
	padding-block: 10px;
}

.hx-story-footer .nav-subtitle {
	color: var(--hx-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hx-story-footer .nav-title {
	display: inline-block;
	max-width: 380px;
	color: var(--hx-story-ink);
	font-size: 17px;
}

.hx-story-footer .nav-archive a {
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--hx-border);
	opacity: 1;
}

.hx-story-footer .related.posts > h2,
.hx-story-footer .comments-area > h2,
.hx-story-footer .comment-respond > h2 {
	font-size: clamp(26px, 2.55vw, 34px);
	letter-spacing: -.03em;
}

.hx-story-footer .related.posts > h2::after,
.hx-story-footer .comments-area > h2::after,
.hx-story-footer .comment-respond > h2::after {
	width: 48px;
	height: 3px;
}

.hx-story-footer .related-post .post-thumbnail img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Related reading is intentionally separate from archive cards. The old block
   inherited date badges, social sharing and carousel dimensions from the blog
   grid, which made mixed source images look broken. */
.hx-story-footer .hx-related {
	margin: 0 0 clamp(70px, 9vw, 118px);
	padding: clamp(34px, 5vw, 62px);
	border-radius: 28px;
	background: #f3f0e8;
}

.hx-related__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 30px;
}

.hx-related__eyebrow {
	display: block;
	margin-bottom: 8px;
	color: var(--hx-primary);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.hx-story-footer .hx-related__head h2 {
	margin: 0;
	font-size: clamp(1.78rem, 2.8vw, 2.56rem);
	line-height: 1.05;
	letter-spacing: -.04em;
}

.hx-related__all {
	flex: 0 0 auto;
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	color: var(--hx-primary);
	font-weight: 700;
	text-decoration: none;
}

.hx-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.hx-related-card {
	display: flex;
	min-width: 0;
	overflow: hidden;
	flex-direction: column;
	border: 1px solid rgba(20, 33, 45, .1);
	border-radius: 18px;
	background: #fff;
	transition: transform .25s ease, box-shadow .25s ease;
}

.hx-related-card:hover,
.hx-related-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 18px 38px rgba(20, 33, 45, .12);
}

.hx-related-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #dfe6f2;
}

.hx-related-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.hx-related-card:hover .hx-related-card__media img,
.hx-related-card:focus-within .hx-related-card__media img {
	transform: scale(1.035);
}

.hx-related-card__fallback {
	display: grid;
	place-items: end start;
	width: 100%;
	height: 100%;
	padding: 24px;
	background: linear-gradient(145deg, var(--hx-primary), #102b65);
	color: #fff;
	font-size: 1.1rem;
	font-weight: 750;
}

.hx-related-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 22px;
}

.hx-related-card__category {
	display: block;
	margin-bottom: 9px;
	color: var(--hx-primary);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.hx-related-card h3 {
	margin: 0 0 12px;
	font-size: clamp(1.08rem, 1.54vw, 1.27rem);
	line-height: 1.28;
	letter-spacing: -.02em;
}

.hx-related-card h3 a {
	color: var(--hx-story-ink);
	text-decoration: none;
}

.hx-related-card p {
	display: -webkit-box;
	overflow: hidden;
	margin: 0 0 20px;
	color: #65707a;
	font-size: .88rem;
	line-height: 1.65;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.hx-related-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	margin-top: auto;
	color: var(--hx-primary);
	font-size: .88rem;
	font-weight: 750;
	text-decoration: none;
}

.hx-related-card__link span {
	transition: transform .2s ease;
}

.hx-related-card__link:hover span,
.hx-related-card__link:focus-visible span {
	transform: translateX(4px);
}

@media (max-width: 900px) {
	.hx-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hx-related-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.hx-story-footer .hx-related {
		margin-inline: -4px;
		padding: 30px 18px;
		border-radius: 20px;
	}

	.hx-related__head {
		align-items: flex-start;
		flex-direction: column;
	}

	.hx-related__grid {
		grid-template-columns: 1fr;
	}

	.hx-related-card:last-child:nth-child(odd) {
		grid-column: auto;
	}

	.hx-related-card__body {
		padding: 20px;
	}
}

@media (max-width: 1024px) {
	.hx-story-utility {
		grid-template-columns: minmax(0, 1fr) 360px;
	}

	.hx-story-layout {
		grid-template-columns: minmax(0, 1fr);
		max-width: 760px;
	}

	.hx-story-rail {
		grid-row: 1;
	}

	.hx-story-rail__sticky {
		position: static;
	}

	.hx-story-toc {
		padding: 22px;
		background: var(--hx-story-wash);
		border: 0;
	}

	.hx-story-share,
	.hx-story-cta {
		display: none;
	}

	.hx-story-toc ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
	}
}

@media (max-width: 767px) {
	.hx-single-story {
		padding-bottom: 48px;
	}

	.hx-single-story > .hx-container {
		box-sizing: border-box;
		width: 100%;
		max-width: 100vw;
		padding-inline: 18px;
	}

	.single-post-page,
	.single-post-page > .entry-post,
	.single-post-page .hx-story-header,
	.hx-story-opening {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.single-post-page > .entry-post {
		display: flex;
		flex-direction: column;
	}

	.hx-story-opening {
		display: contents;
	}

	.single-post-page .hx-story-header {
		order: 1;
		margin-bottom: 26px;
		padding-top: 24px;
	}

	.hx-story-header__crumbs {
		margin-bottom: 32px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.single-post-page .hx-story-header .entry-title {
		font-size: clamp(28px, 7.99vw, 34px);
		overflow-wrap: anywhere;
		text-wrap: wrap;
	}

	.hx-story-header__dek {
		font-size: 18px;
		overflow-wrap: anywhere;
		text-wrap: wrap;
	}

	.hx-story-opening > .entry-thumbnail-wrapper {
		order: 3;
		width: 100%;
		min-height: 0;
		margin: 0 0 40px;
	}

	.hx-story-opening > .entry-thumbnail-wrapper::after {
		display: none;
	}

	.single-post-page .entry-thumbnail-wrapper .post-thumbnail {
		border-radius: 14px;
	}

	.single-post-page .entry-thumbnail-wrapper .post-thumbnail img {
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.hx-story-utility {
		order: 2;
		grid-template-columns: 1fr;
		margin-bottom: 26px;
		border-radius: 14px;
	}

	.hx-story-layout {
		order: 4;
	}

	.hx-ai-summary {
		border-top: 1px solid #dfe4ee;
		border-left: 0;
		border-radius: 0 0 14px 14px;
	}

	.hx-story-toc ol {
		grid-template-columns: 1fr;
	}

	.hx-story-toc li.is-subsection {
		margin-left: 24px;
	}

	.single-post-page .tag-social-share .pressmart-social {
		display: none;
	}

	.hx-story-footer .post-navigation {
		margin-block: 50px 64px;
	}

	.hx-story-footer .nav-previous a {
		padding-left: 34px;
		padding-right: 6px;
	}

	.hx-story-footer .nav-next a {
		padding-right: 34px;
		padding-left: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hx-reading-progress span {
		will-change: auto;
	}
}


/* ==========================================================================
   5. SHARED COMPONENT LIBRARY   —  added by components
   Owner: template-parts/components/*.php
   Source: COMPONENT-INVENTORY C1-C11, page-specs/content-page.md §5-§6,
           page-specs/front-page.md §3, and the captured markup in
           phase0-backup/rendered/.

   Documented, with every $args key, in docs/COMPONENTS.md.

   ── SHARED OWNERSHIP, READ THIS BEFORE ADDING A RULE ──────────────────────
   Four of these components were ALREADY styled by other areas before this
   section landed, against the same class names. Those rules are the owner's;
   this section only ADDS what they do not cover, so nothing here overrides
   anything above it. Do not re-declare a base rule here to "tidy it up" —
   §5 loads last, so a duplicate silently wins and breaks the other area.

     .hx-heading, .hx-tile, .hx-media-text   -> §2A  (content-pages-recipes)
     .hx-accordion*                          -> §2B  (content-pages-recipes)
     .hx-testimonials, .hx-testimonial       -> §3.7 (front-page)

   The component PHP emits exactly the class names those sections expect —
   including .hx-tile__icon-text, .hx-accordion__icon-plus /
   .hx-accordion__icon-minus, .hx-media-text--media-33 / --media-50 / --right,
   and .hx-testimonial__person / __rating-fill. If you rename one, rename it
   in the owning section in the same commit.

   Fully owned here: hx-button modifiers, hx-icon-box, hx-list, hx-divider,
   hx-section, hx-products, hx-carousel.

   ── LOAD-SCOPE CAVEAT ─────────────────────────────────────────────────────
   content.css is enqueued on singular page/post/recipe + home/archive/search/
   404 — NOT on WooCommerce routes. Three components here are called from Woo
   templates: .hx-products and .hx-carousel (cart cross-sells, related
   products) and .hx-accordion (product tabs render as an accordion on EVERY
   product page — single-product-tabs-style = 'accordion'). Those rules must be
   mirrored into shop.css by that area's owner, or enqueue.php widened, before
   activation. Flagged in docs/COMPONENTS.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 hx-heading — ADDITIVE ONLY   (C1, components/heading.php)

   §2A owns .hx-heading, __title and __tagline. The component supports two
   things §2A has no rules for, both from COMPONENT-INVENTORY C1: the
   subtitle+title pair, and the recipe instruction step.
   -------------------------------------------------------------------------- */

.hx-heading--left { text-align: left; }

.hx-heading__subtitle {
	margin: 0 0 .5em;
	color: var(--hx-primary);
	font-size: var(--hx-text-small);
	font-weight: var(--hx-weight-heading);
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Recipe instruction step. Replaces the raw <div class="circle_number">1</div>
   that the live recipes smuggle through the widget's title field. */
.hx-heading--step .hx-heading__title {
	display: flex;
	align-items: center;
	gap: .6em;
}

.hx-heading__step {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.9em;
	height: 1.9em;
	background: var(--hx-primary);
	border-radius: var(--hx-radius-round);
	color: var(--hx-inverse);
	font-size: .75em;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   5.2 hx-button modifiers   (C3, components/button.php)  — owned here

   The base chrome — near-black #0a0100, 20px pill, shadow — is base.css §6.
   This block adds only what the component introduces: the alignment wrapper,
   the sizes, the icon slot and the full-width variant.
   -------------------------------------------------------------------------- */

.hx-button-wrap {
	display: block;
}

.hx-button-wrap--left   { text-align: left; }
.hx-button-wrap--center { text-align: center; }
.hx-button-wrap--right  { text-align: right; }

.hx-button__inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
}

.hx-button__icon {
	flex: none;
}

/* elementor-size-sm is the only size on the live pages; md and lg exist so
   later phases do not reach for a literal. */
.hx-button--sm {
	padding: 8px 20px;
	font-size: var(--hx-text-small);
}

.hx-button--lg {
	padding: 16px 36px;
}

.hx-button--block {
	display: block;
	width: 100%;
}

/* --------------------------------------------------------------------------
   5.3 hx-tile — ADDITIVE ONLY   (C2, components/tile.php)

   §2A owns .hx-tile and its children, styled for the icon-left variant used by
   Contact 607 and Support 612 (7 of 10 live instances). The remaining 3 — the
   About 592 row — are `icon-top ... text-center`, which §2A has no rules for.
   Verified in phase0-backup/rendered/about-helixx-foods.html.
   -------------------------------------------------------------------------- */

.hx-tile--icon-top {
	flex-direction: column;
	align-items: center;
	padding-bottom: 0;
	border-bottom: 0;
}

.hx-tile--icon-top .hx-tile__icon {
	margin-right: 0;
	margin-bottom: 15px;
}

.hx-tile--align-left   { text-align: left; }
.hx-tile--align-center { text-align: center; }
.hx-tile--align-right  { text-align: right; }

/* --------------------------------------------------------------------------
   5.4 hx-icon-box   (C4, components/icon-box.php)  — owned here

   Live position is elementor-position-block-start on desktop AND mobile
   (rendered/support.html), so the stacked variant is the default.
   Not to be confused with §2A's .hx-icon-card, which is the Support page's
   bordered card composition.
   -------------------------------------------------------------------------- */

.hx-icon-box--top {
	display: block;
}

.hx-icon-box--left,
.hx-icon-box--right {
	display: flex;
	align-items: flex-start;
	gap: 1em;
}

.hx-icon-box--right {
	flex-direction: row-reverse;
}

.hx-icon-box--align-left   { text-align: left; }
.hx-icon-box--align-center { text-align: center; }
.hx-icon-box--align-right  { text-align: right; }

.hx-icon-box__icon {
	color: var(--hx-primary);
	font-size: 34px;
	line-height: 1;
}

.hx-icon-box__icon .hx-icon {
	fill: currentColor;
}

.hx-icon-box--top .hx-icon-box__icon {
	margin-bottom: 15px;
}

.hx-icon-box--left .hx-icon-box__icon,
.hx-icon-box--right .hx-icon-box__icon {
	flex: none;
}

.hx-icon-box__icon-link {
	display: inline-block;
	color: inherit;
	line-height: 0;
}

.hx-icon-box__content {
	min-width: 0;
}

.hx-icon-box__title {
	margin: 0 0 var(--hx-heading-mb);
	color: var(--hx-heading);
	font-size: var(--hx-h4);
	font-weight: var(--hx-weight-heading);
	line-height: var(--hx-leading-heading);
}

.hx-icon-box__title a {
	color: inherit;
	text-decoration: none;
	transition: var(--hx-t-ui);
}

.hx-icon-box__title a:hover,
.hx-icon-box__title a:focus {
	color: var(--hx-primary);
}

.hx-icon-box__desc {
	color: var(--hx-text);
	line-height: var(--hx-leading);
}

.hx-icon-box__desc > *:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   5.5 hx-media-text — ADDITIVE ONLY   (C5, components/media-text.php)

   §2A owns .hx-media-text, the --media-33 / --media-50 splits and the --right
   reversal. The component also has to cover the 9 live Elementor `image-box`
   instances on the recipes index, which are a STACKED media-on-top card, and
   the rounded feature images. Neither has rules in §2A.
   -------------------------------------------------------------------------- */

.hx-media-text--top {
	flex-direction: column;
	align-items: stretch;
}

.hx-media-text--top .hx-media-text__media,
.hx-media-text--top .hx-media-text__body {
	flex: 1 1 100%;
	max-width: 100%;
}

.hx-media-text--rounded .hx-media-text__media img {
	border-radius: var(--hx-radius-media);
}

.hx-media-text--align-left   { text-align: left; }
.hx-media-text--align-center { text-align: center; }
.hx-media-text--align-right  { text-align: right; }

.hx-media-text--vstart  { align-items: flex-start; }
.hx-media-text--vcenter { align-items: center; }
.hx-media-text--vend    { align-items: flex-end; }

.hx-media-text__desc {
	color: var(--hx-text);
	line-height: var(--hx-leading);
}

.hx-media-text__desc > *:last-child,
.hx-media-text__content > *:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   5.6 hx-list   (C7, components/list.php — Elementor icon-list)  — owned here

   base.css strips list markers globally; both layouts here are marker-less by
   design, so nothing needs putting back.
   -------------------------------------------------------------------------- */

.hx-list {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.hx-list__item {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	color: var(--hx-text);
	line-height: var(--hx-leading);
}

.hx-list--traditional > .hx-list__item + .hx-list__item {
	margin-top: .35em;
}

.hx-list__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: calc(var(--hx-leading) * 1em);
	color: var(--hx-primary);
}

.hx-list__icon .hx-icon {
	fill: currentColor;
}

.hx-list__link {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.hx-list__link:hover,
.hx-list__link:focus {
	color: var(--hx-link-hover);
}

/* Inline layout — the recipe meta strip ("Servings: 1 | Difficulty: ..."). */
.hx-list--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em 1em;
}

.hx-list--inline > .hx-list__item {
	margin: 0;
}

.hx-list--align-center { justify-content: center; text-align: center; }
.hx-list--align-right  { justify-content: flex-end; text-align: right; }

.hx-list--align-center:not(.hx-list--inline) > .hx-list__item { justify-content: center; }
.hx-list--align-right:not(.hx-list--inline) > .hx-list__item  { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   5.7 hx-divider   (C8, components/divider.php)  — owned here

   The live widget is elementor-widget-divider--view-line wrapping an empty
   separator span: a plain 1px rule, no gap styling of its own.
   -------------------------------------------------------------------------- */

.hx-divider {
	width: var(--hx-divider-w, 100%);
	margin-block: var(--hx-divider-gap, 15px);
	border: 0;
	border-top: 1px solid var(--hx-border);
	height: 0;
	opacity: 1;
}

.hx-divider--left   { margin-inline: 0 auto; }
.hx-divider--center { margin-inline: auto; }
.hx-divider--right  { margin-inline: auto 0; }

/* --------------------------------------------------------------------------
   5.8 hx-section   (components/section.php)  — owned here

   The band wrapper that replaces Elementor's container/section chrome.
   -------------------------------------------------------------------------- */

.hx-section {
	position: relative;
}

.hx-section--pad-none { padding-block: 0; }
.hx-section--pad-sm   { padding-block: 20px; }
.hx-section--pad-md   { padding-block: var(--hx-content-pad-y); }
.hx-section--pad-lg   { padding-block: var(--hx-footer-pad-y); }

.hx-section--bg-alt {
	background-color: var(--hx-bg-alt);
}

.hx-section--bg-primary {
	background-color: var(--hx-primary);
	color: var(--hx-inverse);
}

.hx-section--bg-secondary {
	background-color: var(--hx-secondary);
	color: var(--hx-inverse);
}

.hx-section--bg-primary .hx-heading__title,
.hx-section--bg-secondary .hx-heading__title,
.hx-section--bg-primary .hx-heading__tagline,
.hx-section--bg-secondary .hx-heading__tagline {
	color: inherit;
}

/* --------------------------------------------------------------------------
   5.9 hx-products   (components/products-grid.php)  — owned here

   Replaces pressmart_products_grid_carousel's Bootstrap row/col markup. The
   column counts arrive as inline custom properties, so one rule set serves the
   3-up homepage row, the 3-up shop grid and the 1-up bundle spotlights.

   Breakpoint is 1025, NOT 992 — bootstrap-grid.css was retuned and the
   Elementor kit agrees (viewport_lg 1025).
   -------------------------------------------------------------------------- */

.hx-products__grid {
	display: grid;
	gap: var(--hx-products-gap, var(--hx-gutter));
	grid-template-columns: repeat(var(--hx-products-sm, 2), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.hx-products__grid {
		grid-template-columns: repeat(var(--hx-products-md, 3), minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.hx-products__grid {
		grid-template-columns: repeat(var(--hx-products-lg, 3), minmax(0, 1fr));
	}
}

.hx-products__grid > .product {
	min-width: 0;
	list-style: none;
}

/* Carousel layout: the same element becomes a scroll-snap track. Flex, not
   grid, so the horizontal overflow has something to overflow. */
.hx-products--carousel .hx-products__grid {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.hx-products--carousel .hx-products__grid::-webkit-scrollbar {
	display: none;
}

.hx-products--carousel .hx-products__grid > .product {
	flex: 0 0 calc(
		(100% - (var(--hx-products-sm, 2) - 1) * var(--hx-products-gap, var(--hx-gutter)))
		/ var(--hx-products-sm, 2)
	);
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.hx-products--carousel .hx-products__grid > .product {
		flex-basis: calc(
			(100% - (var(--hx-products-md, 3) - 1) * var(--hx-products-gap, var(--hx-gutter)))
			/ var(--hx-products-md, 3)
		);
	}
}

@media (min-width: 1025px) {
	.hx-products--carousel .hx-products__grid > .product {
		flex-basis: calc(
			(100% - (var(--hx-products-lg, 3) - 1) * var(--hx-products-gap, var(--hx-gutter)))
			/ var(--hx-products-lg, 3)
		);
	}
}

/* --------------------------------------------------------------------------
   5.10 hx-carousel   (C11, components/carousel.php + carousel.js) — owned here

   Pure CSS scroll-snap. Replaces Swiper 8 + Owl 2 + Slick (~256 KB). It is
   fully usable with JS off — arrows and dots are the enhancement, which is why
   the component ships them hidden/empty for carousel.js to reveal.
   -------------------------------------------------------------------------- */

.hx-carousel {
	position: relative;
}

.hx-carousel__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.hx-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.hx-carousel__track {
	display: flex;
	gap: var(--hx-carousel-gap, var(--hx-gutter));
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-carousel__slide {
	flex: 0 0 calc(
		(100% - (var(--hx-slides-xs, 1) - 1) * var(--hx-carousel-gap, var(--hx-gutter)))
		/ var(--hx-slides-xs, 1)
	);
	min-width: 0;
	scroll-snap-align: start;
}

@media (min-width: 576px) {
	.hx-carousel__slide {
		flex-basis: calc(
			(100% - (var(--hx-slides-sm, 1) - 1) * var(--hx-carousel-gap, var(--hx-gutter)))
			/ var(--hx-slides-sm, 1)
		);
	}
}

@media (min-width: 768px) {
	.hx-carousel__slide {
		flex-basis: calc(
			(100% - (var(--hx-slides-md, 1) - 1) * var(--hx-carousel-gap, var(--hx-gutter)))
			/ var(--hx-slides-md, 1)
		);
	}
}

@media (min-width: 1025px) {
	.hx-carousel__slide {
		flex-basis: calc(
			(100% - (var(--hx-slides-lg, 1) - 1) * var(--hx-carousel-gap, var(--hx-gutter)))
			/ var(--hx-slides-lg, 1)
		);
	}
}

@media (min-width: 1200px) {
	.hx-carousel__slide {
		flex-basis: calc(
			(100% - (var(--hx-slides-xl, 1) - 1) * var(--hx-carousel-gap, var(--hx-gutter)))
			/ var(--hx-slides-xl, 1)
		);
	}
}

.hx-carousel__nav {
	position: absolute;
	top: 50%;
	z-index: var(--hx-z-card);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	transform: translateY(-50%);
	background: var(--hx-bg);
	border: 0;
	border-radius: var(--hx-radius-round);
	box-shadow: var(--hx-shadow-ring-strong);
	color: var(--hx-text-strong);
	cursor: pointer;
	transition: var(--hx-t-ui);
}

.hx-carousel__nav:hover,
.hx-carousel__nav:focus {
	background: var(--hx-primary);
	color: var(--hx-inverse);
}

.hx-carousel__nav[hidden] {
	display: none;
}

.hx-carousel__nav[disabled] {
	opacity: .4;
	cursor: default;
}

.hx-carousel__nav--prev { left: 10px; }
.hx-carousel__nav--next { right: 10px; }

.hx-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-top: 15px;
}

.hx-carousel__dots:empty {
	display: none;
}

/* The visible dot is 10px, but a 10px tap target fails WCAG 2.5.8 (24px
   minimum). The button is sized to 24px with a transparent background and
   paints the dot with a pseudo-element, so the hit area grows without the
   design changing. The rail's negative margin keeps the row's optical spacing. */
.hx-carousel__dot {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.hx-carousel__dot::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-radius: var(--hx-radius-round);
	background: var(--hx-border);
	content: "";
	transform: translate(-50%, -50%);
	transition: var(--hx-t-ui);
}

.hx-carousel__dot:hover,
.hx-carousel__dot:focus {
	background: none;
}

.hx-carousel__dot[aria-selected="true"]::before {
	background: var(--hx-primary);
}

@media (prefers-reduced-motion: reduce) {
	.hx-carousel__viewport {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   6. PAGE BLOCKS + RECIPES      —  added by content-pages-recipes
   Owner: template-parts/blocks/*.php, template-parts/recipe/*.php,
          page.php, page-templates/page-full-width.php,
          archive-recipe.php, single-recipe.php.
   Source: page-specs/content-page.md and page-specs/recipes.md.

   NOT DEFINED HERE, deliberately — section 5 (shared component library) owns
   them, and every block in template-parts/blocks/ is a thin ADAPTER that maps
   an ACF row onto those components rather than reimplementing them:
     .hx-heading      -> §5.1   (components/heading.php)
     .hx-tile         -> §5.3   (components/tile.php)
     .hx-icon-box     -> §5.4   (components/icon-box.php)
     .hx-media-text   -> §5.5   (components/media-text.php)
     .hx-accordion    -> §5     (components/accordion.php)
     .hx-testimonial* -> §3.7   (components/testimonial(s).php)
     .hx-button       -> base.css §6 (components/button.php)

   What IS defined here is only what no component owns: the rows and shells the
   blocks arrange components INTO, and the whole recipe page type.

   Breakpoints are literals by design (see the base.css header): 768 / 1025.
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1 Block rhythm
   -------------------------------------------------------------------------- */

.hx-block {
	margin-bottom: 2rem;
}

.hx-block:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   6.2 Check list   (About page, inside a media_text body)

   The check mark is a CSS mask of the sprite's own check path, NOT an inline
   <svg><use>. That is deliberate and load-bearing: this list is composed into
   components/media-text.php's `content` slot, which runs through
   wp_kses_post() — and wp_kses_post does not allow <svg> or <use> (verified
   against wp-includes/kses.php). An inline sprite icon is stripped silently
   there and the list loses every bullet with no error anywhere.

   Using a mask rather than a background keeps the colour under CSS control, so
   it still tracks --hx-primary.
   -------------------------------------------------------------------------- */

.hx-check-list {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

.hx-check-list li {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	margin-bottom: 10px;
	color: #303030;
	font-size: var(--hx-text-base);
}

.hx-check-list li::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: .45em;
	background-color: var(--hx-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%201024'%3E%3Cpath%20transform='translate(0,960)%20scale(1,-1)'%20d='M1011%20796c-17%2017%20-44%2017%20-61%200l-609%20-605%20-268%20264c-17%2017%20-44%2017%20-61%200s-17%20-44%200%20-60l298%20-294c17%20-16%2044%20-16%2061%200l639%20635c17%2017%2017%2044%200%2060%20-17%2017%2017%20-17%200%200z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%201024'%3E%3Cpath%20transform='translate(0,960)%20scale(1,-1)'%20d='M1011%20796c-17%2017%20-44%2017%20-61%200l-609%20-605%20-268%20264c-17%2017%20-44%2017%20-61%200s-17%20-44%200%20-60l298%20-294c17%20-16%2044%20-16%2061%200l639%20635c17%2017%2017%2044%200%2060%20-17%2017%2017%20-17%200%200z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   6.3 Tile row   (About: 3 lifestyle tiles. Contact Us: 4 tiles in a card.)
   The tiles themselves are components/tile.php — this is only the row.
   -------------------------------------------------------------------------- */

.hx-tile-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.hx-tile-row--card {
	background: var(--hx-bg-alt);
	padding: 2rem;
}

@media (min-width: 768px) {
	.hx-tile-row--2 { grid-template-columns: repeat(2, 1fr); }
	.hx-tile-row--3 { grid-template-columns: repeat(3, 1fr); }
	.hx-tile-row--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   6.4 Icon cards   (Support page)

   3-up >=1025px, 2-up 768-1024px, 1-up below. The original is a flex row of
   30.3333%-wide children with 10px margins; a grid with an equivalent gap is
   the same layout without the wrap arithmetic.

   The card body is components/icon-box.php + components/button.php. This is
   the shell that binds them.
   -------------------------------------------------------------------------- */

.hx-icon-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 768px) {
	.hx-icon-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
	.hx-icon-cards { grid-template-columns: repeat(3, 1fr); }
}

.hx-icon-card {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 2rem;
	background: var(--hx-bg);
	border-radius: var(--hx-radius-media);
	text-align: center;
}

/* Push the CTA to the card foot so buttons line up across uneven copy. */
.hx-icon-card > .hx-button-wrap:last-child { margin-top: auto; }

/* --------------------------------------------------------------------------
   6.5 Contact   (Contact Us page)

   50/50 on desktop. The 66.335/33.33 widescreen values in the captured CSS are
   an editing artefact — both rule sets are emitted and the spec resolves to
   50/50.
   -------------------------------------------------------------------------- */

.hx-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.hx-contact__main,
.hx-contact__aside {
	flex: 1 1 100%;
	max-width: 100%;
}

@media (min-width: 768px) {
	.hx-contact__main,
	.hx-contact__aside { flex: 0 0 calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); }
	.hx-contact__main  { margin-right: 1rem; }
}

@media (min-width: 1025px) {
	.hx-contact__main,
	.hx-contact__aside { flex: 0 0 calc(50% - 1.5rem); max-width: calc(50% - 1.5rem); }
	.hx-contact__main  { margin-right: 3rem; }
}

.hx-contact__aside {
	background: var(--hx-bg-alt);
	padding: 2rem;
}

/* The aside already supplies the card chrome — do not double it. */
.hx-contact__aside .hx-tile-row--card { background: none; padding: 0; }

/* --------------------------------------------------------------------------
   6.6 FAQ columns   (FAQ page)
   Two 50% columns, each a heading + its own independent accordion.
   -------------------------------------------------------------------------- */

.hx-faq-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.hx-faq-columns__col {
	flex: 1 1 100%;
	max-width: 100%;
}

@media (min-width: 768px) {
	.hx-faq-columns__col { flex: 0 0 50%; max-width: 50%; }
	.hx-faq-columns__col + .hx-faq-columns__col { padding-left: 1rem; }
}

/* --------------------------------------------------------------------------
   6.7 Testimonials band

   The negative bottom margin cancels .site-content's 35px bottom padding so
   the grey band butts the footer. That is LOAD-BEARING — remove it and a white
   strip appears above the footer on the FAQ page.

   The testimonials themselves are components/testimonial(s).php (§3.7).
   -------------------------------------------------------------------------- */

.hx-testimonials-band {
	background: var(--hx-bg-alt);
	padding: 6% 0;
	margin-bottom: calc(-1 * var(--hx-content-pad-y));
}

/* --------------------------------------------------------------------------
   6.8 Embed   (TrustIndex social feed on the About page)
   -------------------------------------------------------------------------- */

.hx-embed__body > * { max-width: 100%; }

/* ==========================================================================
   6.9 RECIPES
   Source: page-specs/recipes.md, resolved to literals.

   THREE-BLUES NOTE: #204597 (recipe chrome), #1D4497 (card hover, which IS the
   brand token) and #2f3e8f (step number) are three near-identical blues in the
   original. Phase 1 ships them literally to stay pixel-faithful; the visual
   pass collapses them to --hx-primary. The two non-token blues are declared
   once, here, as local custom properties so that collapse is a two-line edit
   rather than a hunt through the file.
   ========================================================================== */

.hx-recipe {
	--hx-recipe-blue: #204597;
	--hx-recipe-step-blue: #2f3e8f;
	--hx-recipe-surface: #f0f5fa;
}

/* -- Index grid -----------------------------------------------------------
   Elementor emits --gap:0px on the row, so cards touch with no gutter and the
   images butt edge to edge. That is almost certainly an accident, but it is
   what production renders, so phase 1 ships gap:0. Flagged for sign-off. */

.hx-recipe-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1200px;
}

@media (min-width: 768px) {
	.hx-recipe-grid { grid-template-columns: repeat(3, 1fr); }
}

.hx-recipe-card__media {
	display: block;
	margin-bottom: 15px;
}

.hx-recipe-card__media img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform var(--hx-t-image);
}

.hx-recipe-card__body { text-align: center; }

.hx-recipe-card__title {
	margin: 0 0 .25em;
	font-family: var(--hx-font);
	font-size: 21px;
	font-weight: var(--hx-weight-heading);
	line-height: var(--hx-leading-heading);
	color: var(--hx-heading);
}

.hx-recipe-card__title a {
	color: inherit;
	text-decoration: none;
}

/* :focus-within as well as :hover — the original used :has(:hover) only, so
   the hover state was unreachable by keyboard. */
.hx-recipe-card:hover .hx-recipe-card__title,
.hx-recipe-card:focus-within .hx-recipe-card__title {
	color: var(--hx-primary);
}

.hx-recipe-card__meta {
	margin: 0;
	font-size: var(--hx-text-base);
	color: var(--hx-text);
}

/* -- Single: intro, pills, jump button ------------------------------------ */

.hx-recipe-intro { padding-bottom: 20px; }

.hx-recipe-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
	list-style: none;
	margin: 0;
	padding: 0 0 20px;
	font-size: var(--hx-text-small);
}

/* row-reverse + gap:19px is genuinely what Elementor emits: the icon renders
   to the RIGHT of the label. Kept. */
.hx-button--jump {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 19px;
	padding: 12px 24px;
	background: var(--hx-recipe-blue, #204597);
	color: var(--hx-inverse);
	border: 1px solid var(--hx-recipe-blue, #204597);
	border-radius: 8px;
	font-weight: var(--hx-weight-heading);
	text-decoration: none;
	transition: background-color var(--hx-t-ui), color var(--hx-t-ui);
}

.hx-button--jump .hx-icon { fill: currentColor; }

.hx-button--jump:hover,
.hx-button--jump:focus {
	background: var(--hx-bg);
	color: var(--hx-recipe-blue, #204597);
}

.hx-recipe-lede { margin: 20px 0 0; }

/* The jump target must not land under a sticky header. */
#recipe-ingredients { scroll-margin-top: 110px; }

/* -- Single: intro card --------------------------------------------------- */

.hx-recipe-hero {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.hx-recipe-hero__text,
.hx-recipe-hero__media {
	flex: 1 1 100%;
	max-width: 100%;
	background: var(--hx-recipe-surface, #f0f5fa);
}

.hx-recipe-hero__text { padding: 20px; }

@media (min-width: 768px) {
	.hx-recipe-hero__text,
	.hx-recipe-hero__media { flex: 0 0 50%; max-width: 50%; }
}

.hx-recipe-hero__media img {
	display: block;
	width: 100%;
	height: auto;
}

.hx-rule {
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 15px 0;
}

/* -- Single: meta strip ---------------------------------------------------
   Items 2 and 3 are centre-aligned, 1 and 4 left-aligned. That inconsistency
   is in the original; reproduced in phase 1, flagged for the visual pass. */

.hx-recipe-meta {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: end;
	margin: 0;
	padding: 10px;
	background: var(--hx-recipe-surface, #f0f5fa);
	font-size: 13px;
}

.hx-recipe-meta__item:nth-child(2),
.hx-recipe-meta__item:nth-child(3) { text-align: center; }

.hx-recipe-meta dt { display: inline; font-weight: var(--hx-weight-body); }
.hx-recipe-meta dd { display: inline; margin: 0; font-weight: 700; }

@media (max-width: 767px) {
	.hx-recipe-meta { grid-template-columns: 1fr; }
}

/* -- Single: ingredients -------------------------------------------------- */

.hx-recipe-ingredients {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	background: var(--hx-recipe-surface, #f0f5fa);
	padding: 20px;
}

@media (max-width: 767px) {
	.hx-recipe-ingredients { grid-template-columns: 1fr; }
}

.hx-ingredient-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hx-ingredient-list li {
	display: flex;
	align-items: center;
	color: var(--hx-recipe-blue, #204597);
}

.hx-ingredient-list li + li { margin-top: .4em; }

.hx-icon--check {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-right: 3.5px;
	fill: var(--hx-recipe-blue, #204597);
}

.hx-ingredient__note { opacity: .8; }

/* min-height:309px and the mint-green input border are Delicious Recipes
   leftovers with no design intent behind them. Reproduced for phase-1
   fidelity; both are flagged in docs/PARITY-CHECKLIST.md. */
.hx-recipe-ingredients__scale {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	align-self: flex-start;
	min-height: 309px;
	margin: 0 20px;
}

.hx-recipe-ingredients__scale label {
	margin: 0 6px;
	font-size: .83333em;
	letter-spacing: .5px;
}

.hx-servings-input {
	width: 90px;
	height: 50px;
	padding: 10px 15px;
	background: var(--hx-bg);
	color: var(--hx-secondary);
	border: 1px solid rgba(45, 182, 141, .35);
	border-radius: 3px;
}

/* -- Single: instructions ------------------------------------------------- */

.hx-recipe-instructions {
	background: var(--hx-recipe-surface, #f0f5fa);
	padding: 20px;
}

.hx-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: step;
}

.hx-step { counter-increment: step; }
.hx-step + .hx-step { margin-top: 1.5rem; }

.hx-step__title {
	display: flex;
	align-items: center;
	margin: 0 0 .4em;
	font-size: 17px;
	font-weight: var(--hx-weight-heading);
	/* NOT line-height:3px. That value in the original is a typo that collapses
	   the line box, and it is explicitly not ported. */
	line-height: var(--hx-leading-heading);
}

.hx-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	margin-right: 10px;
	background: var(--hx-recipe-step-blue, #2f3e8f);
	color: var(--hx-inverse);
	border-radius: var(--hx-radius-round);
	font-size: var(--hx-text-small);
	font-weight: var(--hx-weight-heading);
}

/* The step number comes from a counter, so deleting a step in the CPT
   renumbers the rest automatically. The original hardcoded it per widget. */
.hx-step__num::before { content: counter(step); }

.hx-recipe-nutrition { margin: 2rem 0; }

.hx-recipe-nutrition img {
	display: block;
	width: 100%;
	height: auto;
}

.hx-recipe-note-title {
	margin: 0;
	padding: 50px;
	background: var(--hx-bg);
}

.hx-recipe-note { padding-left: 10px; }
/* ========================================================================== 
   HELIXX CONCEPT — "FUEL, SIMPLIFIED"
   Education-led homepage art direction, 2026.
   ========================================================================== */

.hx-concept {
	--concept-ink: #101820;
	--concept-blue: #1d4497;
	--concept-blue-bright: #255bd1;
	--concept-cream: #f3eee3;
	--concept-oat: #ddd1bd;
	--concept-lime: #d8ef65;
	--concept-line: rgba(16, 24, 32, .16);
	background: #fff;
	color: var(--concept-ink);
	overflow: hidden;
}

.hx-concept-shell {
	width: min(100% - 48px, 1380px);
	margin-inline: auto;
}

.hx-concept h1,
.hx-concept h2,
.hx-concept h3,
.hx-concept p {
	margin-top: 0;
}

.hx-concept h1,
.hx-concept h2 {
	color: inherit;
	font-weight: 700;
	letter-spacing: -.055em;
	line-height: .96;
}

.hx-concept h2 {
	font-size: clamp(2.44rem, 3.49vw, 4.12rem);
}

.hx-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
}

.hx-kicker::before {
	content: none;
}

.hx-concept-button {
	display: inline-flex;
	min-height: 58px;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding: 15px 24px;
	border: 1px solid var(--concept-ink);
	border-radius: 100px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	text-decoration: none;
	transition: transform .25s ease, background .25s ease, color .25s ease;
}

.hx-concept-button:hover {
	transform: translateY(-3px);
}

.hx-concept-button--dark {
	background: var(--concept-ink);
	color: #fff;
}

.hx-concept-button--dark:hover {
	background: var(--concept-blue);
	color: #fff;
}

.hx-concept-link {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	padding-block: 8px;
	border-bottom: 1px solid currentColor;
	color: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: gap .2s ease;
}

.hx-concept-link:hover {
	gap: 22px;
	color: var(--concept-blue-bright);
}

.hx-concept-link--light:hover { color: var(--concept-lime); }

/* Hero */
.hx-concept-hero {
	position: relative;
	background: var(--concept-cream);
}

.hx-concept-hero::before {
	position: absolute;
	inset: 0 0 0 58%;
	background: var(--concept-blue);
	content: "";
}

.hx-concept-hero__grid {
	display: grid;
	min-height: min(790px, calc(100vh - 115px));
	grid-template-columns: 1.05fr .95fr;
	align-items: center;
}

.hx-concept-hero__copy {
	position: relative;
	z-index: 2;
	max-width: 730px;
	padding: 95px 9vw 85px 0;
}

.hx-concept-hero h1 {
	max-width: 760px;
	margin-bottom: 32px;
	font-size: clamp(3rem, 4.22vw, 4.69rem);
}

.hx-concept-hero__lede {
	max-width: 620px;
	margin-bottom: 36px;
	font-size: clamp(18px, 1.45vw, 22px);
	font-weight: 450;
	line-height: 1.55;
}

.hx-concept-actions {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-bottom: 58px;
}

.hx-concept-proof {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-concept-proof li {
	display: grid;
	min-width: 112px;
	padding: 0 22px;
	border-left: 1px solid var(--concept-line);
}

.hx-concept-proof li:first-child { padding-left: 0; border-left: 0; }
.hx-concept-proof strong { font-size: 26px; line-height: 1; }
.hx-concept-proof span { margin-top: 7px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

.hx-concept-hero__visual {
	position: relative;
	z-index: 1;
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding: 70px 0 50px 7%;
}

.hx-concept-hero__visual::before {
	position: absolute;
	width: min(40vw, 610px);
	aspect-ratio: 1;
	border: 1px solid rgba(255,255,255,.26);
	border-radius: 50%;
	content: "";
}

.hx-concept-hero__visual img {
	position: relative;
	z-index: 1;
	width: min(55vw, 820px);
	max-width: none;
	filter: drop-shadow(0 30px 25px rgba(0,0,0,.2));
	transform: rotate(-2deg);
}

.hx-concept-hero__stamp {
	position: absolute;
	top: 12%;
	right: 3%;
	z-index: 2;
	display: grid;
	width: 105px;
	aspect-ratio: 1;
	place-items: center;
	padding: 18px;
	border-radius: 50%;
	background: var(--concept-lime);
	color: var(--concept-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.35;
	text-align: center;
	text-transform: uppercase;
	transform: rotate(9deg);
}

.hx-concept-hero__note {
	position: absolute;
	right: 0;
	bottom: 40px;
	margin: 0;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
}

/* Brand ticker */
.hx-concept-ticker {
	overflow: hidden;
	background: var(--concept-ink);
	color: #fff;
}

.hx-concept-ticker > div {
	display: flex;
	min-width: max-content;
	align-items: center;
	justify-content: center;
	gap: 34px;
	padding: 18px 28px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hx-concept-ticker i { color: var(--concept-lime); font-style: normal; }

/* Editorial introduction */
.hx-concept-intro { padding: 150px 0 140px; }
.hx-concept-intro .hx-concept-shell { display: grid; grid-template-columns: .9fr 1.1fr; gap: 10vw; }
.hx-concept-intro h2 { max-width: 600px; margin: 0; }
.hx-concept-intro__body { max-width: 700px; padding-top: 58px; }
.hx-concept-intro__body p { max-width: 630px; margin-bottom: 22px; font-size: 17px; line-height: 1.75; }
.hx-concept-intro__body .hx-concept-intro__lead { margin-bottom: 28px; font-size: clamp(21px, 1.94vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.35; }

/* Education split */
.hx-concept-education { display: grid; min-height: 760px; grid-template-columns: 1fr 1fr; background: var(--concept-blue); color: #fff; }
.hx-concept-education__image { min-height: 680px; overflow: hidden; }
.hx-concept-education__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.hx-concept-education:hover .hx-concept-education__image img { transform: scale(1.025); }
.hx-concept-education__content { display: flex; flex-direction: column; justify-content: center; padding: 85px clamp(40px, 7vw, 120px); }
.hx-concept-education__content h2 { max-width: 720px; margin-bottom: 55px; }
.hx-concept-reasons { margin: 0 0 38px; padding: 0; list-style: none; }
.hx-concept-reasons li { display: grid; grid-template-columns: 54px 1fr; gap: 15px; padding: 23px 0; border-top: 1px solid rgba(255,255,255,.3); }
.hx-concept-reasons li:last-child { border-bottom: 1px solid rgba(255,255,255,.3); }
.hx-concept-reasons li > span { color: var(--concept-lime); font-size: 11px; font-weight: 700; }
.hx-concept-reasons h3 { margin-bottom: 5px; color: #fff; font-size: 18px; font-weight: 650; }
.hx-concept-reasons p { margin-bottom: 0; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.6; }

/* Product range */
.hx-concept-shop { padding: 145px 0; background: #f6f4ef; }
.hx-concept-section-head { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 68px; }
.hx-concept-section-head h2 { margin: 0; }
.hx-concept-shop .hx-featured { margin: 0; padding: 0; }
.hx-concept-shop .hx-featured__grid { gap: 18px; }
.hx-concept-shop .hx-featured .product-wrapper { height: 100%; padding: 0 0 28px; border: 1px solid rgba(16,24,32,.11); border-radius: 0; background: #fff; box-shadow: none; transition: transform .3s ease, box-shadow .3s ease; }
.hx-concept-shop .hx-featured .product:hover .product-wrapper { box-shadow: 0 20px 45px rgba(16,24,32,.09); transform: translateY(-7px); }
.hx-concept-shop .hx-featured .product-image { margin: 0 0 25px; padding: 28px; background: #eeece6; }
.hx-concept-shop .hx-featured .product-image img { width: 100%; height: 420px; object-fit: contain; }
.hx-concept-shop .hx-featured .product-info { padding-inline: 25px; }
.hx-concept-shop .hx-featured .product-title { margin-bottom: 12px; font-size: 18px; letter-spacing: -.025em; }
.hx-concept-shop .hx-featured .product-title a { color: var(--concept-ink); }
.hx-concept-shop .hx-featured .price { color: var(--concept-blue); font-size: 15px; font-weight: 700; }
.hx-concept-shop .hx-featured .quickview-button { display: none; }
.hx-concept-shop .hx-featured .woocommerce-product-details__short-description { display: none; }

/* How it works */
.hx-concept-how { padding: 130px 0; background: var(--concept-lime); }
.hx-concept-how .hx-concept-shell { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8vw; }
.hx-concept-how__intro h2 { max-width: 610px; margin-bottom: 0; }
.hx-concept-how__steps { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 20px; padding-top: 45px; }
.hx-concept-how__steps article { padding-top: 24px; border-top: 2px solid var(--concept-ink); }
.hx-concept-how__steps b { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 50px; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; }
.hx-concept-how__steps h3 { margin-bottom: 12px; font-size: 22px; letter-spacing: -.03em; }
.hx-concept-how__steps p { margin-bottom: 0; font-size: 14px; line-height: 1.65; }

/* Recipes */
.hx-concept-recipes { padding: 145px 0; }
.hx-concept-recipes__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 18px; }
.hx-recipe-tile { position: relative; min-height: 550px; overflow: hidden; background: var(--concept-ink); color: #fff; }
.hx-recipe-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: transform .6s ease, opacity .3s ease; }
.hx-recipe-tile::after { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.82)); content: ""; }
.hx-recipe-tile > span { position: absolute; right: 28px; bottom: 28px; left: 28px; z-index: 1; display: grid; gap: 7px; }
.hx-recipe-tile small { color: var(--concept-lime); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-recipe-tile strong { color: #fff; font-size: clamp(20px, 1.8vw, 27px); letter-spacing: -.035em; line-height: 1.15; }
.hx-recipe-tile:hover img { opacity: .95; transform: scale(1.04); }

/* Review and final CTA */
.hx-concept-quote { padding: 135px 0; background: var(--concept-blue); color: #fff; text-align: center; }
.hx-concept-quote .hx-concept-shell { max-width: 1050px; }
.hx-concept-quote__stars { margin-bottom: 35px; color: var(--concept-lime); font-size: 18px; letter-spacing: .35em; }
.hx-concept-quote blockquote { margin: 0 0 30px; font-size: clamp(26px, 3.1vw, 45px); font-weight: 650; letter-spacing: -.045em; line-height: 1.18; }
.hx-concept-quote cite { font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-concept-final { padding: 160px 0; background: var(--concept-cream); text-align: center; }
.hx-concept-final .hx-kicker { justify-content: center; }
.hx-concept-final h2 { max-width: 950px; margin: 0 auto 50px; }

@media (max-width: 1180px) {
	.hx-concept-hero::before { left: 55%; }
	.hx-concept-hero__grid { grid-template-columns: 1fr 1fr; }
	.hx-concept-hero__copy { padding-right: 5vw; }
	.hx-concept-hero__visual img { width: 60vw; }
	.hx-concept-shop .hx-featured .product-image img { height: 330px; }
	.hx-concept-how .hx-concept-shell { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.hx-concept-shell { width: min(100% - 36px, 1380px); }
	.hx-concept-hero::before { inset: auto 0 0; height: 45%; }
	.hx-concept-hero__grid { min-height: auto; grid-template-columns: 1fr; }
	.hx-concept-hero__copy { max-width: 800px; padding: 85px 0 65px; }
	.hx-concept-hero__visual { min-height: 510px; padding: 25px 0 10px; }
	.hx-concept-hero__visual img { width: min(105vw, 790px); }
	.hx-concept-hero__visual::before { width: 480px; }
	.hx-concept-hero__stamp { top: 4%; right: 3%; }
	.hx-concept-hero__note { display: none; }
	.hx-concept-intro { padding: 105px 0; }
	.hx-concept-intro .hx-concept-shell { grid-template-columns: 1fr; gap: 20px; }
	.hx-concept-intro__body { padding-top: 25px; }
	.hx-concept-education { grid-template-columns: 1fr; }
	.hx-concept-education__image { min-height: 620px; }
	.hx-concept-education__content { padding: 80px 36px; }
	.hx-concept-shop,
	.hx-concept-recipes { padding: 105px 0; }
	.hx-concept-how { padding: 100px 0; }
	.hx-concept-recipes__grid { grid-template-columns: 1.35fr 1fr; }
	.hx-recipe-tile:last-child { display: none; }
}

@media (max-width: 767px) {
	.hx-concept-shell { width: min(100% - 28px, 1380px); }
	.hx-concept h2 { font-size: clamp(2.28rem, 10.29vw, 3.12rem); }
	.hx-concept-hero h1 { font-size: clamp(2.9rem, 11.28vw, 3.85rem); }
	.hx-concept-hero__copy { padding: 65px 0 50px; }
	.hx-concept-hero__lede { font-size: 17px; }
	.hx-concept-actions { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 45px; }
	.hx-concept-button { min-height: 54px; }
	.hx-concept-proof li { min-width: 0; padding: 0 15px; }
	.hx-concept-proof strong { font-size: 22px; }
	.hx-concept-proof span { font-size: 9px; }
	.hx-concept-hero__visual { min-height: 380px; margin-inline: -14px; }
	.hx-concept-hero__visual::before { width: 330px; }
	.hx-concept-hero__visual img { width: 125vw; }
	.hx-concept-hero__stamp { width: 82px; padding: 12px; font-size: 9px; }
	.hx-concept-ticker > div { justify-content: flex-start; gap: 18px; overflow-x: auto; }
	.hx-concept-intro { padding: 85px 0; }
	.hx-concept-intro__body .hx-concept-intro__lead { font-size: 21px; }
	.hx-concept-education__image { min-height: 470px; }
	.hx-concept-education__content { padding: 70px 22px; }
	.hx-concept-education__content h2 { margin-bottom: 40px; }
	.hx-concept-section-head { align-items: flex-start; flex-direction: column; margin-bottom: 45px; }
	.hx-concept-shop,
	.hx-concept-recipes { padding: 85px 0; }
	.hx-concept-shop .hx-featured__grid { grid-template-columns: 1fr; gap: 15px; }
	.hx-concept-shop .hx-featured .product-image img { height: 350px; }
	.hx-concept-how { padding: 80px 0; }
	.hx-concept-how__steps { grid-template-columns: 1fr; gap: 42px; }
	.hx-concept-how__steps b { margin-bottom: 26px; }
	.hx-concept-recipes__grid { grid-template-columns: 1fr; }
	.hx-recipe-tile { min-height: 480px; }
	.hx-recipe-tile:not(:first-child) { display: none; }
	.hx-concept-quote { padding: 95px 0; }
	.hx-concept-final { padding: 100px 0; }
}
/* ========================================================================== 
   HELIXX HOMEPAGE V2 — restrained editorial food brand system
   ========================================================================== */

.hx2 {
	--hx2-ink: #101820;
	--hx2-blue: #1d4497;
	--hx2-blue-dark: #14326f;
	--hx2-cream: #f5f1e8;
	--hx2-sand: #e6dece;
	--hx2-pale-blue: #dbe5f6;
	--hx2-line: rgba(16, 24, 32, .16);
	background: #fff;
	color: var(--hx2-ink);
	overflow: hidden;
}

.hx2-wrap { width: min(100% - 56px, 1320px); margin-inline: auto; }
.hx2 h1, .hx2 h2, .hx2 h3, .hx2 p { margin-top: 0; }
.hx2 h1, .hx2 h2 { color: inherit; font-weight: 650; letter-spacing: -.045em; line-height: 1.02; }
.hx2 h2 { font-size: clamp(2.28rem, 3.27vw, 3.54rem); }

.hx2-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
}
.hx2-eyebrow::before { content: none; }

.hx2-btn {
	display: inline-flex;
	min-height: 54px;
	align-items: center;
	justify-content: center;
	padding: 14px 25px;
	border: 1px solid transparent;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.hx2-btn:hover { transform: translateY(-2px); }
.hx2-btn--blue { background: var(--hx2-blue); color: #fff; }
.hx2-btn--blue:hover { background: var(--hx2-blue-dark); color: #fff; }
.hx2-btn--outline { border-color: var(--hx2-ink); color: var(--hx2-ink); }
.hx2-btn--outline:hover { background: var(--hx2-ink); color: #fff; }
.hx2-btn--white { background: #fff; color: var(--hx2-blue-dark); }
.hx2-btn--white:hover { background: var(--hx2-cream); color: var(--hx2-blue-dark); }

.hx2-text-link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 8px 0;
	border-bottom: 1px solid currentColor;
	color: inherit;
	font-size: 13px;
	font-weight: 650;
	line-height: 1.3;
	text-decoration: none;
}
.hx2-text-link span { transition: transform .2s ease; }
.hx2-text-link:hover { color: var(--hx2-blue); }
.hx2-text-link:hover span { transform: translateX(4px); }

/* Hero — copy lives in genuine photographic negative space. */
.hx2-hero { position: relative; min-height: 720px; background: var(--hx2-cream); }
.hx2-hero::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(245,241,232,.98) 0%, rgba(245,241,232,.86) 28%, rgba(245,241,232,0) 54%); content: ""; }
.hx2-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hx2-hero__inner { position: relative; z-index: 1; display: flex; min-height: 720px; align-items: center; }
.hx2-hero__copy { width: min(48%, 600px); padding-block: 80px; }
.hx2-hero h1 { max-width: 590px; margin-bottom: 28px; font-size: clamp(2.85rem, 3.54vw, 3.94rem); }
.hx2-hero__copy > p:not(.hx2-eyebrow):not(.hx2-hero__shipping) { max-width: 520px; margin-bottom: 34px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.62; }
.hx2-actions { display: flex; align-items: center; gap: 26px; }
.hx2-hero__shipping { margin: 30px 0 0; color: rgba(16,24,32,.7); font-size: 11px; font-weight: 650; letter-spacing: .06em; }

/* Proof rail */
.hx2-proof { border-top: 1px solid var(--hx2-line); border-bottom: 1px solid var(--hx2-line); background: #fff; }
.hx2-proof .hx2-wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.hx2-proof .hx2-wrap > div { display: grid; gap: 5px; padding: 27px 30px; border-left: 1px solid var(--hx2-line); }
.hx2-proof .hx2-wrap > div:first-child { border-left: 0; }
.hx2-proof strong { font-size: 14px; letter-spacing: -.01em; }
.hx2-proof span { color: #73777a; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }

/* Intro */
.hx2-intro { padding: 135px 0; background: #f5f7fb; }
.hx2-intro__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; gap: clamp(55px, 8vw, 115px); }
.hx2-intro__media { position: relative; margin: 0; padding: clamp(18px, 2.2vw, 30px); border: 1px solid #dbe2ee; border-radius: 24px; background: #fff; box-shadow: 0 28px 65px rgba(30, 56, 105, .11); }
.hx2-intro__media::before { content: ""; position: absolute; inset: -12px auto auto -12px; width: 76px; height: 76px; border-top: 3px solid var(--hx2-blue); border-left: 3px solid var(--hx2-blue); border-radius: 16px 0 0; pointer-events: none; }
.hx2-intro__media img { display: block; width: 100%; height: auto; border-radius: 12px; }
.hx2-intro__media figcaption { margin-top: 15px; color: #5f6773; font-size: 10px; font-weight: 650; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.hx2-intro__copy { max-width: 610px; padding-top: 0; }
.hx2-intro__copy h2 { margin: 0 0 25px; font-size: clamp(31px, 3.05vw, 46px); line-height: 1.08; letter-spacing: -.045em; }
.hx2-intro__canada { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 8px 13px; border: 1px solid #d4deee; border-radius: 20px; background: #fff; color: var(--hx2-blue); font-size: 11px; font-weight: 750; letter-spacing: .11em; line-height: 1; text-transform: uppercase; }
.hx2-intro__canada img { display: block; width: 15px; height: 15px; object-fit: contain; }
.hx2-intro__copy .hx2-lead { margin-bottom: 20px; color: #253248; font-size: clamp(19px, 1.53vw, 23px); font-weight: 600; letter-spacing: -.02em; line-height: 1.48; }
.hx2-intro__copy > p:not(.hx2-lead):not(.hx2-intro__canada) { margin-bottom: 27px; color: #555f6c; font-size: 15px; line-height: 1.8; }
.hx2-intro__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 31px; }
.hx2-intro__facts span { display: inline-flex; min-height: 34px; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 5px; background: #e7edf9; color: #244278; font-size: 10px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.hx2-intro__facts .hx-benefit-icon { width: auto; max-width: 21px; height: 20px; flex: 0 0 auto; }
.hx2-intro__facts .hx-benefit-icon--vegan { max-width: 25px; height: 16px; }

/* Reusable section heading */
.hx2-section-head { display: grid; grid-template-columns: 1.45fr .55fr; align-items: end; gap: 80px; margin-bottom: 68px; }
.hx2-section-head h2 { max-width: 820px; margin-bottom: 0; }
.hx2-section-head > p { max-width: 410px; margin-bottom: 5px; color: #5d6266; font-size: 15px; line-height: 1.75; }

/* Flavours */
.hx2-flavours { padding: 130px 0 140px; background: var(--hx2-cream); }
.hx2-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hx2-product__media { position: relative; display: grid; min-height: 530px; place-items: center; overflow: hidden; }
.hx2-product--blue .hx2-product__media { background: #dfe7f5; }
.hx2-product--cocoa .hx2-product__media { background: #e8ddd7; }
.hx2-product--oat .hx2-product__media { background: #eae4d6; }
.hx2-product__media img { width: 88%; height: 455px; object-fit: contain; mix-blend-mode: multiply; transition: transform .45s cubic-bezier(.2,.65,.3,1); }
.hx2-product__media:hover img { transform: scale(1.035) translateY(-6px); }
.hx2-product__media > span { position: absolute; top: 18px; left: 18px; padding: 8px 11px; background: #fff; color: var(--hx2-ink); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hx2-product__info { display: flex; align-items: start; justify-content: space-between; gap: 25px; padding: 24px 4px 0; }
.hx2-product__info p { margin-bottom: 7px; color: #5c6063; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx2-product__info h3 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.hx2-product__info h3 a { color: var(--hx2-ink); text-decoration: none; }
.hx2-product__info > strong { padding-top: 18px; color: var(--hx2-blue); font-size: 14px; white-space: nowrap; }
.hx2-product__info > strong ins { text-decoration: none; }

/* "Shop on Amazon" card button.
   Not decoration: catalog-mode.php routes every purchase to Amazon, so on these
   cards this is the only way to actually buy the product. It therefore reveals
   on hover where hovering exists, and stays permanently in the flow under the
   pouch on touch, where a hover-only CTA would be unreachable.
   .hx2-product__media is itself an <a>, so the button is its sibling inside
   .hx2-product__frame — anchors cannot nest. */
.hx2-product__frame { position: relative; overflow: hidden; }
.hx2-amazon {
	display: flex;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 10px;
	padding: 14px 20px;
	border: 1px solid transparent;
	border-radius: 3px;
	background: #ff9900;
	color: #17212b;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.hx2-amazon:hover,
.hx2-amazon:focus-visible { background: var(--hx2-ink); color: #fff; }
.hx2-amazon__go { font-size: 15px; }

@media (hover: hover) and (pointer: fine) {
	.hx2-amazon {
		position: absolute;
		right: 16px;
		bottom: 16px;
		left: 16px;
		margin-top: 0;
		opacity: 0;
		pointer-events: none;
		transform: translateY(calc(100% + 16px));
		transition: opacity .3s ease, transform .35s cubic-bezier(.2,.65,.3,1), background .2s ease, color .2s ease;
	}
	.hx2-product:hover .hx2-amazon,
	.hx2-product:focus-within .hx2-amazon { opacity: 1; pointer-events: auto; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hx2-amazon { transition: opacity .01ms linear, background .2s ease, color .2s ease; transform: none; }
}
.hx2-flavours__footer { display: flex; align-items: center; justify-content: center; gap: 30px; padding-top: 65px; }

/* Bowl directions */
.hx2-routine { display: grid; min-height: 790px; grid-template-columns: 1fr 1fr; background: var(--hx2-blue); color: #fff; }
.hx2-routine__image { overflow: hidden; }
.hx2-routine__image img { width: 100%; height: 100%; object-fit: cover; }
.hx2-routine__copy { display: flex; flex-direction: column; justify-content: center; padding: 90px clamp(50px, 7vw, 120px); }
.hx2-routine__copy h2 { max-width: 650px; margin-bottom: 30px; }
.hx2-routine__copy > p:not(.hx2-eyebrow) { max-width: 660px; margin-bottom: 34px; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.8; }
.hx2-routine__methods { max-width: 700px; margin-bottom: 24px; }
.hx2-routine__methods h3 { margin-bottom: 15px; color: #fff; font-size: 16px; }
.hx2-routine__methods nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hx2-routine__methods a { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 17px; border: 1px solid rgba(255,255,255,.42); border-radius: 7px; color: #fff; background: rgba(255,255,255,.08); font-size: 13px; font-weight: 700; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
.hx2-routine__methods a span { font-size: 17px; transition: transform .2s ease; }
.hx2-routine__methods a:hover, .hx2-routine__methods a:focus { color: var(--hx2-blue-dark); background: #fff; transform: translateY(-2px); }
.hx2-routine__methods a:hover span, .hx2-routine__methods a:focus span { transform: translateX(3px); }
.hx2-routine__inspiration { display: flex; max-width: 700px; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; border-radius: 10px; color: var(--hx2-ink); background: #dfe7f5; }
.hx2-routine__inspiration > div { display: grid; gap: 5px; }
.hx2-routine__inspiration strong { font-size: 14px; }
.hx2-routine__inspiration > div > span { color: #536273; font-size: 12px; line-height: 1.5; }
.hx2-routine__inspiration .hx2-btn { flex: 0 0 auto; min-height: 48px; padding: 12px 17px; color: var(--hx2-blue-dark); }
.hx2-routine__inspiration .hx2-btn span { margin-left: 7px; }

/* Why grid */
.hx2-why { padding: 140px 0; }
.hx2-why__heading { display: grid; grid-template-columns: 1fr 2fr; align-items: end; gap: 50px; margin-bottom: 72px; }
.hx2-why__heading .hx2-eyebrow { margin-bottom: 8px; }
.hx2-why__heading h2 { max-width: 780px; margin-bottom: 0; }
.hx2-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hx2-line); border-bottom: 1px solid var(--hx2-line); }
.hx2-why__grid article { min-height: 290px; padding: 28px 30px 34px; border-left: 1px solid var(--hx2-line); }
.hx2-why__grid article:first-child { border-left: 0; }
.hx2-why__icon {
	display: flex;
	width: 64px;
	height: 64px;
	margin-bottom: 45px;
	align-items: center;
	justify-content: center;
}
.hx2-why__icon img { display: block; width: auto; max-width: 64px; height: 58px; object-fit: contain; }
.hx2-why__icon .hx-benefit-icon--vegan { height: 42px; }
.hx2-why__grid h3 { margin-bottom: 16px; font-size: 20px; letter-spacing: -.02em; }
.hx2-why__grid p { margin-bottom: 0; color: #5b6063; font-size: 13px; line-height: 1.75; }

/* Recipes */
.hx2-recipes { padding: 135px 0; background: #f7f7f4; }
.hx2-recipes__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 18px; margin-bottom: 48px; }
.hx2-recipe { position: relative; display: block; min-height: 400px; overflow: hidden; border-radius: 16px; background: var(--hx2-ink); color: #fff; }
.hx2-recipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform .5s ease, opacity .3s ease; }
/* Gradient strong enough that the title + stats read clearly on any photo. */
.hx2-recipe::after { position: absolute; inset: 0; background: linear-gradient(rgba(7,13,18,.05) 6%, transparent 28%, rgba(7,13,18,.5) 62%, rgba(7,13,18,.92)); content: ""; }
.hx2-recipe > span { position: absolute; right: 22px; bottom: 20px; left: 22px; z-index: 1; display: grid; gap: 9px; }
.hx2-recipe small { color: #d7e3f8; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hx2-recipe strong { color: #fff; font-size: clamp(19px, 1.58vw, 23px); letter-spacing: -.02em; line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Stat pills — servings / difficulty / time, each with an icon. */
.hx2-recipe__stats { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 2px; }
.hx2-recipe__stat { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(255,255,255,.17); backdrop-filter: blur(3px); color: #fff; font-size: 12px; font-weight: 600; }
.hx2-recipe__stat svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .95; }
/* "Open recipe" badge, top-right. */
.hx2-recipe > i { position: absolute; top: 15px; right: 15px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--hx2-ink); font-style: normal; font-size: 17px; line-height: 1; transition: transform .3s ease, background .3s ease; }
.hx2-recipe:hover > i { transform: translate(2px, -2px); background: #fff; }
.hx2-recipe:hover img { opacity: 1; transform: scale(1.04); }

/* Recipe archive (/recipes/) — the featured card treatment, as a full grid. */
.hx-recipes-archive { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: min(100% - 40px, 1240px); margin: 58px auto 34px; }
.hx-recipes-archive .hx2-recipe { min-height: 360px; }
@media (max-width: 900px) {
	.hx-recipes-archive { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.hx-recipes-archive { grid-template-columns: 1fr; gap: 15px; }
	.hx-recipes-archive .hx2-recipe { min-height: 280px; }
}

/* Reviews */
.hx2-reviews {
	position: relative;
	padding: 125px 0;
	overflow: hidden;
	background: #f6f2e9;
}

.hx2-reviews::after {
	position: absolute;
	right: -130px;
	bottom: -190px;
	width: 430px;
	height: 430px;
	border-radius: 50%;
	background: rgba(29, 68, 151, .07);
	content: "";
	pointer-events: none;
}

.hx2-reviews .hx2-wrap {
	position: relative;
	z-index: 1;
}

.hx2-reviews__intro {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 36px;
	margin-bottom: 48px;
}

.hx2-reviews__intro .hx2-eyebrow {
	margin-bottom: 17px;
}

.hx2-reviews__intro h2 {
	max-width: 720px;
	margin-bottom: 0;
}

.hx2-reviews__rating {
	flex: 0 0 auto;
	padding: 17px 21px;
	border: 1px solid rgba(29, 68, 151, .14);
	border-radius: 14px;
	background: rgba(255, 255, 255, .64);
}

.hx2-stars,
.hx2-review-card__stars {
	color: var(--hx2-blue);
	font-family: Arial, sans-serif;
	letter-spacing: .14em;
}

.hx2-stars {
	margin-bottom: 5px;
	font-size: 17px;
}

.hx2-reviews__rating > span {
	color: #5f666b;
	font-size: 11px;
	font-weight: 650;
}

.hx2-review-carousel {
	--hx-carousel-gap: 18px;
	--hx-slides-xs: 1.08;
	--hx-slides-sm: 1.18;
	--hx-slides-md: 2;
	--hx-slides-lg: 3;
	--hx-slides-xl: 3;
}

.hx2-review-list {
	padding: 2px;
	overscroll-behavior-inline: contain;
}

.hx2-review-list .hx-carousel__track {
	align-items: stretch;
}

.hx2-review-card {
	position: relative;
	display: flex;
	min-height: 345px;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(28px, 3vw, 40px);
	margin: 0;
	border: 0;
	border-radius: 22px;
	box-shadow: 0 14px 34px rgba(25, 38, 51, .07);
	color: var(--hx2-ink);
	font-style: normal;
}

.hx2-review-card::before {
	position: absolute;
	top: 25px;
	right: 29px;
	color: rgba(29, 68, 151, .12);
	content: "\201C";
	font-family: Georgia, serif;
	font-size: 59px;
	line-height: 1;
	pointer-events: none;
}

.hx2-review-card--blue { background: #e4ecfa; }
.hx2-review-card--cocoa { background: #eee2dc; }
.hx2-review-card--cream { background: #fff; }

.hx2-review-card__stars {
	position: relative;
	z-index: 1;
	margin-bottom: 45px;
	font-size: 14px;
}

.hx2-review-card p {
	position: relative;
	z-index: 1;
	margin-bottom: 38px;
	font-size: clamp(19px, 1.55vw, 22px);
	font-weight: 600;
	font-style: normal;
	letter-spacing: -.025em;
	line-height: 1.46;
}

.hx2-review-card footer {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--hx2-ink);
	font-style: normal;
}

.hx2-review-card__avatar {
	display: grid;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 50%;
	color: #fff;
	background: var(--hx2-blue);
	font-size: 11px;
	font-weight: 750;
	letter-spacing: .04em;
	place-items: center;
}

.hx2-review-card footer > span:last-child {
	display: grid;
	gap: 3px;
}

.hx2-review-card footer strong {
	font-size: 13px;
}

.hx2-review-card footer small {
	color: #616a70;
	font-size: 10px;
	font-weight: 650;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.hx2-review-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 28px;
}

.hx2-review-controls > div:last-child {
	display: flex;
	gap: 8px;
}

.hx2-review-controls .hx-carousel__nav {
	position: static;
	display: grid;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(16, 24, 32, .18);
	border-radius: 50%;
	box-shadow: none;
	color: var(--hx2-ink);
	background: rgba(255, 255, 255, .72);
	transform: none;
	place-items: center;
}

.hx2-review-controls .hx-carousel__nav:hover,
.hx2-review-controls .hx-carousel__nav:focus {
	border-color: var(--hx2-blue);
	color: #fff;
	background: var(--hx2-blue);
}

.hx2-review-controls .hx-carousel__nav[hidden] {
	display: none;
}

.hx2-review-controls .hx-carousel__dots {
	position: static;
	justify-content: flex-start;
	padding: 0;
}

/* Same 24px tap target as the shared dot; the pill shape lives on ::before. */
.hx2-review-controls .hx-carousel__dot {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
}

.hx2-review-controls .hx-carousel__dot::before {
	width: 8px;
	height: 8px;
	background: rgba(29, 68, 151, .24);
}

.hx2-review-controls .hx-carousel__dot[aria-selected="true"]::before {
	width: 20px;
	border-radius: 20px;
	background: var(--hx2-blue);
}

@media (min-width: 1025px) {
	.hx2-review-controls {
		display: none;
	}
}

/* Closing CTA */
.hx2-close { padding: 140px 0; background: var(--hx2-blue-dark); color: #fff; text-align: center; }
.hx2-close .hx2-eyebrow { justify-content: center; }
.hx2-close h2 { max-width: 950px; margin: 0 auto 26px; }
.hx2-close > .hx2-wrap > p:not(.hx2-eyebrow) { max-width: 620px; margin: 0 auto 38px; color: rgba(255,255,255,.73); font-size: 17px; line-height: 1.7; }

@media (max-width: 1080px) {
	.hx2-hero { min-height: 660px; }
	.hx2-hero__inner { min-height: 660px; }
	.hx2-hero__copy { width: 52%; }
	.hx2-product__media { min-height: 430px; }
	.hx2-product__media img { height: 375px; }
	.hx2-routine { min-height: 700px; }
	.hx2-why__grid { grid-template-columns: repeat(2, 1fr); }
	.hx2-why__grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--hx2-line); }
	.hx2-why__grid article:nth-child(4) { border-top: 1px solid var(--hx2-line); }
}

@media (max-width: 800px) {
	.hx2-wrap { width: min(100% - 36px, 1320px); }
	.hx2 h2 { font-size: clamp(2.22rem, 6.59vw, 3.15rem); }
	.hx2-hero { display: grid; min-height: auto; grid-template-rows: auto auto; }
	.hx2-hero::after { display: none; }
	.hx2-hero__image { position: relative; grid-row: 2; height: 62vw; min-height: 420px; object-position: 72% center; }
	.hx2-hero__inner { min-height: 0; grid-row: 1; padding: 70px 0 62px; }
	.hx2-hero__copy { width: 100%; padding: 0; }
	.hx2-hero h1 { max-width: 700px; font-size: clamp(2.69rem, 7.49vw, 3.68rem); }
	.hx2-proof .hx2-wrap { grid-template-columns: repeat(2, 1fr); }
	.hx2-proof .hx2-wrap > div:nth-child(3) { border-top: 1px solid var(--hx2-line); border-left: 0; }
	.hx2-proof .hx2-wrap > div:nth-child(4) { border-top: 1px solid var(--hx2-line); }
	.hx2-intro { padding: 100px 0; }
	.hx2-intro__grid, .hx2-section-head { grid-template-columns: 1fr; gap: 35px; }
	.hx2-intro__copy { padding-top: 0; }
	.hx2-products { grid-template-columns: 1fr 1fr; }
	.hx2-product:last-child { grid-column: 1 / -1; width: calc(50% - 9px); }
	.hx2-routine { grid-template-columns: 1fr; }
	.hx2-routine__image { min-height: 600px; }
	.hx2-routine__copy { padding: 85px 36px; }
	.hx2-why__heading { grid-template-columns: 1fr; gap: 20px; }
	.hx2-recipes__grid { grid-template-columns: 1fr 1fr; }
	.hx2-recipe:last-child { grid-column: 1 / -1; min-height: 320px; }
	.hx2-reviews .hx2-wrap { grid-template-columns: 1fr; gap: 60px; }
	.hx2-reviews__intro { position: static; align-items: flex-start; flex-direction: column; gap: 24px; margin-bottom: 38px; }
}

@media (max-width: 600px) {
	.hx2-wrap { width: min(100% - 28px, 1320px); }
	.hx2 h2 { font-size: 2.22rem; }
	.hx2-hero__inner { padding: 58px 0 54px; }
	.hx2-hero h1 { font-size: 2.78rem; }
	.hx2-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
	.hx2-hero__image { height: 100vw; min-height: 390px; object-position: 68% center; }
	.hx2-proof .hx2-wrap > div { padding: 21px 14px; }
	.hx2-intro, .hx2-flavours, .hx2-why, .hx2-recipes, .hx2-reviews { padding: 82px 0; }
	.hx2-section-head { margin-bottom: 48px; }
	.hx2-products { grid-template-columns: 1fr; gap: 48px; }
	.hx2-product:last-child { grid-column: auto; width: auto; }
	.hx2-product__media { min-height: 430px; }
	.hx2-product__media img { height: 390px; }
	.hx2-flavours__footer { align-items: flex-start; flex-direction: column; gap: 18px; padding-top: 55px; }
	.hx2-routine__image { min-height: 440px; }
	.hx2-routine__copy { padding: 72px 22px; }
	.hx2-routine__methods nav { grid-template-columns: 1fr; }
	.hx2-routine__inspiration { align-items: stretch; flex-direction: column; }
	.hx2-routine__inspiration .hx2-btn { width: 100%; }
	.hx2-why__heading { margin-bottom: 48px; }
	.hx2-why__grid { grid-template-columns: 1fr; }
	.hx2-why__grid article { min-height: 0; padding: 25px 0 30px; border-top: 1px solid var(--hx2-line); border-left: 0; }
	.hx2-why__grid article:first-child { border-top: 0; }
	.hx2-why__icon { margin-bottom: 28px; }
	.hx2-recipes__grid { grid-template-columns: 1fr; }
	.hx2-recipe { min-height: 290px; }
	.hx2-recipe:last-child { grid-column: auto; min-height: 290px; }
	.hx2-review-list blockquote p { font-size: 21px; }
	.hx2-reviews__rating { padding: 14px 17px; }
	.hx2-review-card { min-height: 330px; }
	.hx2-close { padding: 90px 0; }
}
/* ========================================================================== 
   HERO BANNER FOCUS PASS
   Everything outside .hx2-hero and .hx2-proof is intentionally unchanged.
   ========================================================================== */

.hx2-hero { min-height: 760px; }
.hx2-hero__inner { min-height: 760px; }
.hx2-hero::after { background: linear-gradient(90deg, rgba(245,241,232,.98) 0%, rgba(245,241,232,.9) 29%, rgba(245,241,232,.25) 46%, rgba(245,241,232,0) 57%); }
.hx2-hero__image { object-position: center top; }
.hx2-hero__copy { width: min(44%, 540px); padding-block: 68px; }
.hx2-hero h1 { max-width: 520px; margin-bottom: 24px; font-size: clamp(2.88rem, 3.41vw, 3.65rem); line-height: .98; }
.hx2-hero__copy > p:not(.hx2-eyebrow) { max-width: 470px; }
.hx2-hero__rating { margin-top: 27px; color: #5f6468; font-size: 10px; font-weight: 650; letter-spacing: .045em; text-transform: uppercase; }
.hx2-hero__rating span { margin-right: 8px; color: #1d4497; font-size: 12px; letter-spacing: .1em; }

.hx2-proof .hx2-wrap { max-width: 1120px; }
.hx2-proof .hx2-wrap > div {
	display: flex;
	min-height: 86px;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 13px;
	padding: 20px;
}
.hx2-proof img {
	width: auto;
	max-width: 48px;
	height: 48px;
	object-fit: contain;
}
.hx2-proof strong { font-size: 12px; font-weight: 700; letter-spacing: .015em; }

@media (max-width: 1024px) {
	.hx2-hero { min-height: 700px; }
	.hx2-hero__inner { min-height: 700px; }
}

@media (max-width: 800px) {
	.hx2-hero { min-height: auto; }
	.hx2-hero__inner { min-height: 0; padding: 64px 0 56px; }
	.hx2-hero__copy { width: 100%; padding: 0; }
	.hx2-hero h1 { max-width: 570px; font-size: clamp(2.59rem, 7.79vw, 3.4rem); }
	.hx2-hero__image { height: 72vw; min-height: 440px; object-position: 68% 34%; }
	.hx2-proof .hx2-wrap > div { min-height: 76px; justify-content: flex-start; }
}

@media (max-width: 600px) {
	.hx2-hero__inner { padding: 54px 0 50px; }
	.hx2-hero h1 { font-size: 2.66rem; }
	.hx2-hero__copy > p:not(.hx2-eyebrow) { font-size: 16px; }
	.hx2-hero__image { height: 94vw; min-height: 390px; }
	.hx2-proof .hx2-wrap > div { min-height: 72px; padding: 16px 12px; }
	.hx2-proof img { max-width: 38px; height: 38px; }
	.hx2-proof strong { font-size: 10px; }
}

/* ==========================================================================
   7. CONVERTED-PAGE POLISH
   Two surfaces the Elementor->native conversion left as bare markup:
   (a) the /recipes/ hub grid, now embedded in a prose page body, and
   (b) <details>/<summary> accordions on FAQ (EN/FR), Support and Shipping.
   Both reuse existing tokens and the §6.9 recipe design — nothing new invented.
   ========================================================================== */

/* -- 7.1 /recipes/ hub grid inside a prose body ---------------------------
   The hub (page 4657) renders the same card markup the recipe archive uses,
   but inside .entry-content.hx-prose. These rules stop .hx-prose's element
   defaults (heading/paragraph margins, link underline) from leaking into the
   cards; the visual design is inherited from §6.9 above. */
.hx-prose .hx-recipe-grid { margin: 2rem auto; }
.hx-prose .hx-recipe-card__media { margin: 0 0 15px; text-decoration: none; }
.hx-prose .hx-recipe-card__media img { margin: 0; }
.hx-prose .hx-recipe-card__title { margin: 0 0 .25em; }
.hx-prose .hx-recipe-card__meta { margin: 0; }

/* -- 7.2 Prose accordions  (<details>/<summary>) --------------------------
   FAQ (EN 606 / FR 2063), Support (612 / 2078) and Shipping (1720) were
   Elementor accordions; migration 07 converted each panel to a semantic
   <details>/<summary> that works with JS disabled. Styled here to a clean
   bordered accordion with a chevron that rotates on open. */
.hx-prose details {
	margin: 0 0 12px;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-media);
	background: var(--hx-bg);
	overflow: hidden;
}

.hx-prose summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 18px 22px;
	color: var(--hx-heading);
	font-weight: var(--hx-weight-heading);
	line-height: var(--hx-leading-heading);
	list-style: none;                 /* removes the Firefox disclosure triangle */
	cursor: pointer;
	transition: color var(--hx-t-ui), background-color var(--hx-t-ui);
}

.hx-prose summary::-webkit-details-marker { display: none; } /* WebKit/Blink triangle */

.hx-prose summary:hover,
.hx-prose summary:focus-visible {
	color: var(--hx-primary);
	background: var(--hx-bg-alt);
}

/* Chevron: a rotated corner of two borders. Points down when closed. */
.hx-prose summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-right: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--hx-t-ui);
}

.hx-prose details[open] > summary {
	color: var(--hx-primary);
	border-bottom: 1px solid var(--hx-border);
}

.hx-prose details[open] > summary::after {
	transform: rotate(-135deg);       /* points up when open */
}

/* Panel body: inset the direct children to line up under the summary text and
   tame the prose margins at the panel's top and bottom edges. */
.hx-prose details > :not(summary) { padding-inline: 22px; }
.hx-prose details > summary + * { margin-top: 18px; }
.hx-prose details > :last-child { margin-bottom: 18px; }

/* -- 7.3 Link-card hubs  (Support, Contact) -------------------------------
   These pages are hubs: a few sections that each point somewhere (another page,
   an email, a phone number). Rendered as a responsive card grid inside .hx-prose.
   auto-fit means 3 cards (Support) and 4 cards (Contact) both lay out sensibly. */
.hx-prose .hx-linkcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin: 2rem 0 0;
}

.hx-prose .hx-linkcard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px 26px;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-media);
	background: var(--hx-bg);
	transition: transform .25s ease, box-shadow .25s ease;
}

.hx-prose .hx-linkcard:hover,
.hx-prose .hx-linkcard:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--hx-shadow-card-hover);
}

.hx-prose .hx-linkcard h3 {
	margin: 0 0 10px;
	font-size: var(--hx-h4);
	color: var(--hx-heading);
}

.hx-prose .hx-linkcard p {
	margin: 0 0 22px;
	color: var(--hx-text);
	font-size: var(--hx-text-small);
	line-height: var(--hx-leading);
}

/* Pin the action to the card's bottom edge so ragged copy lengths still align. */
.hx-prose .hx-linkcard > :last-child {
	margin-top: auto;
	margin-bottom: 0;
}

/* .hx-button links inside prose must keep the button's own colours, not the
   prose link underline/blue. */
.hx-prose .hx-button,
.hx-prose .hx-button:visited {
	color: var(--hx-btn-text);
	text-decoration: none;
}

.hx-prose .hx-button:hover,
.hx-prose .hx-button:focus {
	color: var(--hx-inverse);
}

/* ========================================================================== 
   8. FAQ EXPLORER
   A focused help-centre experience for /faq/ and its French counterpart.
   ========================================================================== */

.hx-faq-page {
	--hx-faq-ink: #13223a;
	--hx-faq-muted: #617086;
	--hx-faq-wash: #f3f6fb;
	--hx-faq-line: #dfe6f0;
	color: var(--hx-faq-ink);
	background: var(--hx-bg);
}

.hx-faq-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(72px, 8vw, 124px) 0 clamp(64px, 7vw, 105px);
	background:
		radial-gradient(circle at 12% 15%, rgba(80, 125, 225, .32), transparent 27%),
		linear-gradient(128deg, #0b2d72 0%, #173f93 54%, #2458b3 100%);
	color: var(--hx-inverse);
}

.hx-faq-hero::after {
	content: "";
	position: absolute;
	right: -12vw;
	bottom: -24vw;
	width: 54vw;
	height: 54vw;
	border: clamp(42px, 7vw, 110px) solid rgba(255, 255, 255, .055);
	border-radius: 50%;
	pointer-events: none;
}

.hx-faq-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(340px, .75fr);
	align-items: center;
	gap: clamp(48px, 8vw, 130px);
	max-width: 1260px;
}

.hx-faq-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 42px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .68);
}

.hx-faq-breadcrumb a { color: var(--hx-inverse); text-decoration: none; }
.hx-faq-breadcrumb a:hover { text-decoration: underline; }

.hx-faq-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 15px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.hx-faq-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: #8fb1ff;
}

.hx-faq-hero h1 {
	max-width: 720px;
	margin: 0;
	color: var(--hx-inverse);
	font-size: clamp(2.22rem, 3.64vw, 3.5rem);
	font-weight: 650;
	line-height: 1.04;
	letter-spacing: -.045em;
}

.hx-faq-hero__lead {
	max-width: 640px;
	margin: 22px 0 0;
	color: rgba(255, 255, 255, .78);
	font-size: clamp(16px, 1.28vw, 19px);
	line-height: 1.65;
}

.hx-faq-search {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 650px;
	margin-top: 34px;
	color: var(--hx-faq-ink);
}

.hx-faq-search__icon {
	position: absolute;
	left: 21px;
	z-index: 1;
	color: var(--hx-primary);
}

.hx-faq-search input[type="search"] {
	width: 100%;
	height: 62px;
	margin: 0;
	padding: 0 56px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 12px;
	background: var(--hx-bg);
	box-shadow: 0 20px 50px rgba(1, 19, 58, .24);
	color: var(--hx-faq-ink);
	font: inherit;
	font-size: 14px;
}

.hx-faq-search input[type="search"]:focus {
	border-color: #9db9ff;
	box-shadow: 0 0 0 4px rgba(157, 185, 255, .24), 0 20px 50px rgba(1, 19, 58, .24);
	outline: 0;
}

.hx-faq-search__clear {
	position: absolute;
	right: 13px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hx-faq-wash);
	color: var(--hx-faq-muted);
	cursor: pointer;
}

.hx-faq-hero__jump {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 22px;
	color: var(--hx-inverse);
	font-size: 13px;
	font-weight: 650;
	text-decoration: none;
}

.hx-faq-hero__media {
	position: relative;
	margin: 0;
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 28px;
	background: rgba(255, 255, 255, .09);
	box-shadow: 0 30px 70px rgba(1, 16, 47, .35);
	transform: rotate(1.5deg);
}

.hx-faq-hero__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 4.35;
	border-radius: 18px;
	object-fit: cover;
}

.hx-faq-hero__media figcaption {
	position: absolute;
	right: -24px;
	bottom: 34px;
	display: flex;
	flex-direction: column;
	min-width: 148px;
	padding: 17px 22px;
	border-radius: 12px;
	background: var(--hx-bg);
	box-shadow: 0 16px 42px rgba(1, 16, 47, .25);
	color: var(--hx-faq-ink);
	transform: rotate(-1.5deg);
}

.hx-faq-hero__media figcaption strong { font-size: 23px; line-height: 1; }
.hx-faq-hero__media figcaption span { margin-top: 5px; color: var(--hx-faq-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

.hx-faq-intro { border-bottom: 1px solid var(--hx-faq-line); background: var(--hx-faq-wash); }
.hx-faq-intro__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px; max-width: 1120px; padding-top: 31px; padding-bottom: 31px; }
.hx-faq-intro p { margin: 0; color: var(--hx-faq-muted); font-size: 13px; line-height: 1.72; }

.hx-faq-ai {
	position: relative;
	padding: clamp(58px, 6.5vw, 88px) 0;
	border-bottom: 1px solid var(--hx-faq-line);
	background: var(--hx-bg);
}

.hx-faq-ai__inner { max-width: 1260px; }

.hx-faq-ai__header {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(320px, .7fr);
	align-items: end;
	gap: clamp(40px, 8vw, 130px);
	margin-bottom: 30px;
}

.hx-faq-ai .hx-faq-eyebrow { color: var(--hx-primary); }

.hx-faq-ai__header h2 {
	max-width: 650px;
	margin: 0;
	color: var(--hx-faq-ink);
	font-size: clamp(23px, 2.59vw, 33px);
	line-height: 1.2;
	letter-spacing: -.035em;
}

.hx-faq-ai__header > p {
	margin: 0;
	color: var(--hx-faq-muted);
	font-size: 13px;
	line-height: 1.75;
}

.hx-faq-ai__providers {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.hx-faq-ai-card {
	--hx-ai-colour: var(--hx-primary);
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 20px;
	align-items: center;
	gap: 13px;
	min-height: 82px;
	padding: 16px 17px;
	border: 1px solid var(--hx-faq-line);
	border-radius: 15px;
	background: var(--hx-bg);
	box-shadow: 0 10px 28px rgba(24, 47, 87, .05);
	color: var(--hx-faq-ink);
	text-decoration: none;
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.hx-faq-ai-card--chatgpt { --hx-ai-colour: #087f6c; }
.hx-faq-ai-card--gemini  { --hx-ai-colour: #386bd8; }
.hx-faq-ai-card--grok    { --hx-ai-colour: #171717; }
.hx-faq-ai-card--claude  { --hx-ai-colour: #b75d3c; }

.hx-faq-ai-card:hover,
.hx-faq-ai-card:focus-visible {
	border-color: color-mix(in srgb, var(--hx-ai-colour) 46%, var(--hx-faq-line));
	box-shadow: 0 16px 35px rgba(24, 47, 87, .12);
	color: var(--hx-faq-ink);
	transform: translateY(-3px);
}

.hx-faq-ai-card:focus-visible { outline: 2px solid var(--hx-ai-colour); outline-offset: 3px; }

.hx-faq-ai-card__mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: color-mix(in srgb, var(--hx-ai-colour) 10%, white);
	color: var(--hx-ai-colour);
	font-size: 16px;
	font-weight: 750;
}

.hx-faq-ai-card__text { display: flex; flex-direction: column; line-height: 1.2; }
.hx-faq-ai-card__text small { margin-bottom: 4px; color: var(--hx-faq-muted); font-size: 9px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.hx-faq-ai-card__text strong { font-size: 14px; }
.hx-faq-ai-card__arrow { justify-self: end; color: var(--hx-ai-colour); transition: transform .2s ease; }
.hx-faq-ai-card:hover .hx-faq-ai-card__arrow { transform: translateX(3px); }

.hx-faq-ai__note {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 17px 0 0;
	color: #616f80;
	font-size: 10px;
	line-height: 1.55;
}

.hx-faq-ai__note span {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 17px;
	height: 17px;
	border: 1px solid #b8c2d0;
	border-radius: 50%;
	font-family: Georgia, serif;
	font-size: 11px;
	font-weight: 700;
}

/* Compact AI discovery row inside the FAQ hero. */
.hx-faq-ai--hero {
	max-width: 650px;
	margin-top: 14px;
	padding: 0;
	border: 0;
	background: transparent;
}

.hx-faq-ai--hero .hx-faq-ai__compact-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 8px;
	color: rgba(255, 255, 255, .68);
}

.hx-faq-ai--hero .hx-faq-ai__compact-head h2 {
	margin: 0;
	color: #fff;
	font-size: 10px;
	font-weight: 750;
	letter-spacing: .12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.hx-faq-ai--hero .hx-faq-ai__compact-head span {
	overflow: hidden;
	font-size: 10px;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hx-faq-ai--hero .hx-faq-ai__providers {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.hx-faq-ai--hero .hx-faq-ai-card {
	grid-template-columns: 24px auto;
	gap: 7px;
	min-height: 34px;
	padding: 5px 10px 5px 6px;
	border-color: rgba(255, 255, 255, .2);
	border-radius: 18px;
	background: rgba(255, 255, 255, .09);
	box-shadow: none;
	color: rgba(255, 255, 255, .9);
	backdrop-filter: blur(5px);
}

.hx-faq-ai--hero .hx-faq-ai-card:hover,
.hx-faq-ai--hero .hx-faq-ai-card:focus-visible {
	border-color: rgba(255, 255, 255, .55);
	background: rgba(255, 255, 255, .16);
	box-shadow: none;
	color: #fff;
	transform: translateY(-1px);
}

.hx-faq-ai--hero .hx-faq-ai-card__mark {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	font-size: 10px;
}

.hx-faq-ai--hero .hx-faq-ai-card__text { display: block; }
.hx-faq-ai--hero .hx-faq-ai-card__text small,
.hx-faq-ai--hero .hx-faq-ai-card__arrow { display: none; }
.hx-faq-ai--hero .hx-faq-ai-card__text strong { color: inherit; font-size: 11px; }

.hx-faq-layout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: clamp(45px, 7vw, 105px);
	max-width: 1260px;
	padding-top: clamp(60px, 7vw, 100px);
	padding-bottom: clamp(75px, 9vw, 130px);
}

.hx-faq-sidebar__sticky { position: sticky; top: 115px; }
.hx-faq-sidebar__title { margin: 0 0 16px; color: var(--hx-faq-muted); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hx-faq-topic-nav { display: grid; }
.hx-faq-topic-nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 13px 0;
	border-bottom: 1px solid var(--hx-faq-line);
	color: var(--hx-faq-muted);
	font-size: 13px;
	font-weight: 550;
	line-height: 1.45;
	text-decoration: none;
}
.hx-faq-topic-nav a::before { content: ""; width: 0; height: 1px; margin-right: -15px; background: var(--hx-primary); transition: width .2s ease; }
.hx-faq-topic-nav a span { display: grid; flex: 0 0 auto; place-items: center; min-width: 27px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--hx-faq-wash); font-size: 10px; }
.hx-faq-topic-nav a:hover,
.hx-faq-topic-nav a.is-current { color: var(--hx-primary); }
.hx-faq-topic-nav a:hover::before,
.hx-faq-topic-nav a.is-current::before { width: 16px; }

.hx-faq-sidebar__help { margin-top: 34px; padding: 22px; border-radius: 14px; background: var(--hx-primary); color: var(--hx-inverse); }
.hx-faq-sidebar__help > .hx-icon { color: #a9c3ff; }
.hx-faq-sidebar__help p { margin: 10px 0 8px; color: var(--hx-inverse); font-size: 14px; font-weight: 650; }
.hx-faq-sidebar__help a { display: inline-flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, .78); font-size: 11px; font-weight: 600; text-decoration: none; }
.hx-faq-sidebar__help a:hover { color: var(--hx-inverse); }

.hx-faq-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 33px; padding-bottom: 17px; border-bottom: 1px solid var(--hx-faq-line); }
.hx-faq-toolbar p { margin: 0; color: var(--hx-faq-muted); font-size: 12px; }
.hx-faq-toolbar div { display: flex; align-items: center; gap: 9px; }
.hx-faq-toolbar button { padding: 0; border: 0; background: transparent; color: var(--hx-primary); font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; }
.hx-faq-toolbar button:hover { text-decoration: underline; }

.hx-faq-section { scroll-margin-top: 115px; }
.hx-faq-section + .hx-faq-section { margin-top: clamp(54px, 7vw, 86px); }
.hx-faq-section__header { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.hx-faq-section__header > span { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 50%; background: #e8efff; color: var(--hx-primary); font-size: 11px; font-weight: 700; }
.hx-faq-section__header h2 { margin: 0; color: var(--hx-faq-ink); font-size: clamp(20px, 1.82vw, 26px); letter-spacing: -.025em; line-height: 1.25; }
.hx-faq-section__header p { margin: 4px 0 0; color: var(--hx-faq-muted); font-size: 11px; }

.hx-faq-list { border-top: 1px solid var(--hx-faq-line); }
.hx-faq-item,
.hx-prose .hx-faq-item { margin: 0; border: 0; border-bottom: 1px solid var(--hx-faq-line); border-radius: 0; background: transparent; overflow: visible; }
.hx-faq-item[hidden],
.hx-faq-section[hidden] { display: none; }

.hx-faq-item summary,
.hx-prose .hx-faq-item summary {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 38px;
	align-items: center;
	gap: 13px;
	min-height: 82px;
	padding: 16px 0;
	border: 0;
	background: transparent;
	color: var(--hx-faq-ink);
	list-style: none;
	cursor: pointer;
}
.hx-faq-item summary::-webkit-details-marker { display: none; }
.hx-faq-item summary::after { content: none; }
.hx-faq-item summary:hover,
.hx-faq-item summary:focus-visible { color: var(--hx-primary); background: transparent; }
.hx-faq-item__number { color: #66738a; font-size: 10px; font-weight: 650; letter-spacing: .06em; }
.hx-faq-item__question { font-size: 14px; font-weight: 650; line-height: 1.5; }
.hx-faq-item__toggle { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--hx-faq-line); border-radius: 50%; color: var(--hx-primary); transition: color .2s ease, background-color .2s ease, transform .25s ease; }
.hx-faq-item[open] .hx-faq-item__toggle { background: var(--hx-primary); color: var(--hx-inverse); transform: rotate(45deg); }
.hx-faq-item[open] > summary { color: var(--hx-primary); border-bottom: 0; }

.hx-faq-item__answer,
.hx-prose .hx-faq-item__answer { padding: 0 52px 27px 47px; color: var(--hx-faq-muted); font-size: 13px; line-height: 1.78; }
.hx-prose .hx-faq-item__answer > :first-child { margin-top: 0; }
.hx-prose .hx-faq-item__answer > :last-child { margin-bottom: 0; }
.hx-prose .hx-faq-item__answer a { font-weight: 600; }

.hx-faq-empty { padding: 70px 25px; border: 1px dashed #cad5e5; border-radius: 18px; background: var(--hx-faq-wash); text-align: center; }
.hx-faq-empty > .hx-icon { color: var(--hx-primary); }
.hx-faq-empty h2 { margin: 14px 0 7px; color: var(--hx-faq-ink); font-size: 19px; }
.hx-faq-empty p { margin: 0; color: var(--hx-faq-muted); font-size: 13px; }
.hx-faq-empty button { margin-top: 18px; padding: 10px 18px; border: 1px solid var(--hx-primary); border-radius: 20px; background: transparent; color: var(--hx-primary); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }

.hx-faq-cta { padding: clamp(55px, 6vw, 82px) 0; background: #0d2f72; color: var(--hx-inverse); }
.hx-faq-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 55px; max-width: 1260px; }
.hx-faq-cta h2 { margin: 0; color: var(--hx-inverse); font-size: clamp(25px, 2.59vw, 33px); letter-spacing: -.03em; }
.hx-faq-cta p:not(.hx-faq-eyebrow) { max-width: 680px; margin: 12px 0 0; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.7; }
.hx-faq-cta__actions { display: flex; flex: 0 0 auto; gap: 12px; }
.hx-faq-cta .hx-button { padding: 14px 24px; border: 1px solid var(--hx-inverse); border-radius: 24px; background: var(--hx-inverse); color: var(--hx-primary); font-size: 12px; font-weight: 700; text-decoration: none; }
.hx-faq-cta .hx-button:hover { background: #e9efff; color: var(--hx-primary); }
.hx-faq-cta .hx-button--outline { background: transparent; color: var(--hx-inverse); }
.hx-faq-cta .hx-button--outline:hover { background: rgba(255, 255, 255, .1); color: var(--hx-inverse); }

@media (max-width: 1024px) {
	.hx-faq-hero__grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 45px; }
	.hx-faq-ai__providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hx-faq-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 45px; }
}

@media (max-width: 767px) {
	.hx-faq-hero { padding: 54px 0 62px; }
	.hx-faq-hero__grid { display: block; }
	.hx-faq-breadcrumb { margin-bottom: 32px; }
	.hx-faq-hero h1 { font-size: clamp(2.12rem, 9.24vw, 2.85rem); }
	.hx-faq-hero__media { display: none; }
	.hx-faq-search input[type="search"] { height: 58px; font-size: 12px; }
	.hx-faq-ai--hero .hx-faq-ai__compact-head span { display: none; }
	.hx-faq-intro__inner { grid-template-columns: 1fr; gap: 13px; }
	.hx-faq-ai__header { grid-template-columns: 1fr; gap: 14px; }
	.hx-faq-ai__providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hx-faq-layout { display: block; padding-top: 50px; }
	.hx-faq-sidebar { margin-bottom: 35px; }
	.hx-faq-sidebar__sticky { position: static; }
	.hx-faq-sidebar__help { display: none; }
	.hx-faq-topic-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: thin; }
	.hx-faq-topic-nav a { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--hx-faq-line); border-radius: 20px; }
	.hx-faq-topic-nav a::before,
	.hx-faq-topic-nav a span { display: none; }
	.hx-faq-topic-nav a.is-current { border-color: var(--hx-primary); background: var(--hx-primary); color: var(--hx-inverse); }
	.hx-faq-item summary,
	.hx-prose .hx-faq-item summary { grid-template-columns: 25px minmax(0, 1fr) 34px; gap: 9px; min-height: 74px; }
	.hx-faq-item__question { font-size: 13px; }
	.hx-faq-item__answer,
	.hx-prose .hx-faq-item__answer { padding: 0 0 25px 34px; }
	.hx-faq-cta__inner { display: block; }
	.hx-faq-cta__actions { margin-top: 28px; flex-wrap: wrap; }
}

@media (max-width: 480px) {
	.hx-faq-ai__providers { grid-template-columns: 1fr; }
	.hx-faq-ai-card { min-height: 74px; }
	.hx-faq-ai--hero .hx-faq-ai__providers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hx-faq-ai--hero .hx-faq-ai-card { min-height: 34px; }
	.hx-faq-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }
	.hx-faq-cta__actions { display: grid; }
	.hx-faq-cta .hx-button { text-align: center; }
}

/* -- 7.4 Events list  (Events page) ---------------------------------------
   Was 15 full-bleed event posters stacked vertically; now a compact list, each
   row a thumbnail + date + title + time/venue. */
.hx-prose .hx-events {
	display: grid;
	gap: 18px;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.hx-prose .hx-event {
	display: grid;
	grid-template-columns: 210px 1fr;
	gap: 24px;
	margin: 0;
	padding: 18px;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-media);
	background: var(--hx-bg);
}

.hx-prose .hx-event__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: calc(var(--hx-radius-media) - 8px);
	background: var(--hx-bg-alt);
}

.hx-prose .hx-event__media img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;   /* posters/logos: show whole image, don't crop */
}

.hx-prose .hx-event__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hx-prose .hx-event__date {
	margin-bottom: 8px;
	color: var(--hx-primary);
	font-size: var(--hx-text-xs);
	font-weight: var(--hx-weight-heading);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hx-prose .hx-event__title {
	margin: 0 0 12px;
	font-size: var(--hx-h3);
	color: var(--hx-heading);
}

.hx-prose .hx-event__meta {
	margin: 0 0 6px;
	font-size: var(--hx-text-small);
	line-height: var(--hx-leading-heading);
	color: var(--hx-text);
}

.hx-prose .hx-event__meta:last-child { margin-bottom: 0; }
.hx-prose .hx-event__meta strong { color: var(--hx-heading); }

@media (max-width: 600px) {
	.hx-prose .hx-event { grid-template-columns: 1fr; gap: 14px; }
	.hx-prose .hx-event__media { aspect-ratio: 16 / 9; }
}

/* -- 7.5 Events (dynamic CPT) : sections, actions, single -----------------
   Extends §7.4 for the backend-managed Events CPT (inc/cpt-event.php):
   "Coming up" / "Where we've been" sections, per-card action links, and the
   single-event view. */
.hx-prose .hx-events-section { margin-top: 2.5rem; }
.hx-prose .hx-events-section:first-of-type { margin-top: 2rem; }

.hx-prose .hx-events-section__title {
	margin: 0 0 1.1rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--hx-primary);
	font-size: var(--hx-h4);
	color: var(--hx-heading);
}

.hx-prose .hx-events-section--past { opacity: .92; }

.hx-prose .hx-event__media { text-decoration: none; }

.hx-prose .hx-event--nomedia { grid-template-columns: 1fr; }

.hx-prose .hx-event__title { margin: 0 0 12px; }
.hx-prose .hx-event__title a { color: var(--hx-heading); text-decoration: none; }
.hx-prose .hx-event__title a:hover,
.hx-prose .hx-event__title a:focus { color: var(--hx-primary); }

.hx-prose .hx-event__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.hx-prose .hx-event__action {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-pill);
	background: var(--hx-bg);
	color: var(--hx-heading);
	font-size: var(--hx-text-xs);
	font-weight: var(--hx-weight-heading);
	text-decoration: none;
	transition: color var(--hx-t-ui), background-color var(--hx-t-ui), border-color var(--hx-t-ui);
}

.hx-prose .hx-event__action:hover,
.hx-prose .hx-event__action:focus {
	color: var(--hx-inverse);
	background: var(--hx-primary);
	border-color: var(--hx-primary);
}

.hx-prose .hx-event__action--primary {
	color: var(--hx-inverse);
	background: var(--hx-secondary);
	border-color: var(--hx-secondary);
}

/* Single event */
.hx-event-single__media { margin: 0 0 1.75rem; }
.hx-event-single__media img { width: 100%; height: auto; border-radius: var(--hx-radius-media); }

.hx-event-single__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px 24px;
	margin: 0 0 1.5rem;
	padding: 22px 24px;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-media);
	background: var(--hx-bg-alt);
}
.hx-event-single__meta div { margin: 0; }
.hx-event-single__meta dt {
	margin: 0 0 2px;
	color: var(--hx-primary);
	font-size: var(--hx-text-xs);
	font-weight: var(--hx-weight-heading);
	letter-spacing: .06em;
	text-transform: uppercase;
}
.hx-event-single__meta dd { margin: 0; color: var(--hx-heading); }

.hx-event-single__back { margin-top: 2rem; }

/* ==========================================================================
   HOMEPAGE V2 — Events strip (front-page.php)
   Uses the .hx2 palette tokens (defined on .hx2). Sits between reviews and the
   closing CTA; content comes from the Events CPT.
   ========================================================================== */
.hx2-events { padding: 130px 0; background: #fff; }
.hx2-events__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 46px; }

.hx2-event { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.hx2-event__media {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	margin-bottom: 20px;
	overflow: hidden;
	background: var(--hx2-cream);
}
.hx2-event__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.2,.65,.3,1); }
.hx2-event:hover .hx2-event__media img { transform: scale(1.04); }

.hx2-event__date { margin-bottom: 9px; color: var(--hx2-blue); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx2-event h3 { margin: 0 0 6px; min-height: 2.4em; font-size: 20px; letter-spacing: -.025em; line-height: 1.2; }
.hx2-event p { margin: 0; color: #5c6063; font-size: 13px; }

@media (max-width: 800px) {
	.hx2-events { padding: 90px 0; }
	.hx2-events__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 600px) {
	.hx2-events { padding: 72px 0; }
	.hx2-events__grid { grid-template-columns: 1fr; gap: 42px; }
}

/* ========================================================================== 
   EVENTS HUB V2 — date browser, compact lineup cards, single event
   ========================================================================== */

.hx-events-page,
.hx-event-detail { background: #f7f9fc; }

.hx-events-kicker {
	margin: 0 0 9px;
	color: var(--hx-primary);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.hx-event-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 9px 17px;
	border: 1px solid #ccd5e3;
	border-radius: 999px;
	background: #fff;
	color: #172033;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.hx-event-button:hover,
.hx-event-button:focus-visible {
	border-color: var(--hx-primary);
	color: var(--hx-primary);
	transform: translateY(-1px);
}

.hx-event-button--primary {
	border-color: var(--hx-primary);
	background: var(--hx-primary);
	color: #fff;
}

.hx-event-button--primary:hover,
.hx-event-button--primary:focus-visible {
	border-color: #173b80;
	background: #173b80;
	color: #fff;
}

.hx-event-button--light { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.1); color: #fff; }
.hx-event-button--light:hover,
.hx-event-button--light:focus-visible { border-color: #fff; background: #fff; color: var(--hx-primary); }
.hx-event-button--text { border-color: transparent; background: transparent; }
.hx-events-hero .hx-event-button--primary { border-color: #fff; background: #fff; color: var(--hx-primary); }
.hx-events-hero .hx-event-button--primary:hover,
.hx-events-hero .hx-event-button--primary:focus-visible { border-color: #dfe9ff; background: #dfe9ff; color: #153b82; }

/* Intro */
.hx-events-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(68px, 9vw, 118px) 0;
	background:
		radial-gradient(circle at 85% 20%, rgba(255,255,255,.15), transparent 28%),
		linear-gradient(125deg, #153b82 0%, var(--hx-primary) 60%, #2f67c4 100%);
	color: #fff;
}

.hx-events-hero::after {
	content: "";
	position: absolute;
	right: -80px;
	bottom: -150px;
	width: 430px;
	height: 430px;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 50%;
	box-shadow: 0 0 0 45px rgba(255,255,255,.035), 0 0 0 90px rgba(255,255,255,.025);
}

.hx-events-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(400px, 500px); align-items: center; gap: clamp(44px, 7vw, 100px); }
.hx-events-hero__copy { max-width: 680px; }
.hx-events-hero .hx-events-kicker { color: #bcd1ff; }
.hx-events-hero h1 { margin: 0 0 18px; color: #fff; font-size: clamp(39px, 4.81vw, 58px); line-height: .95; letter-spacing: -.055em; }
.hx-events-hero__copy > p:not(.hx-events-kicker) { max-width: 680px; margin: 0; color: rgba(255,255,255,.85); font-size: clamp(17px, 1.93vw, 20px); line-height: 1.65; }
.hx-events-hero__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.hx-events-hero__calendar { min-width: 0; }
.hx-events-hero__calendar-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.hx-events-hero__calendar-head h2 { margin: 0; color: #fff; font-size: 23px; letter-spacing: -.03em; }
.hx-events-hero__calendar-head > span { max-width: 110px; color: rgba(255,255,255,.7); font-size: 11px; font-weight: 700; line-height: 1.35; text-align: right; text-transform: uppercase; }
.hx-events-hero__calendar .hx-event-calendar { padding: 24px; border: 0; box-shadow: 0 28px 70px rgba(7,25,61,.26); }
.hx-events-hero__calendar .hx-event-calendar__nav { margin-bottom: 18px; }
.hx-events-hero__calendar .hx-event-calendar__day,
.hx-events-hero__calendar .hx-event-calendar__blank { font-size: 12px; }
.hx-events-hero__calendar .hx-events-filterbar { margin: 12px 0 0; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); }
.hx-events-hero__calendar .hx-events-filterbar p,
.hx-events-hero__calendar .hx-events-filterbar button { color: #fff; }
.hx-events-page__editor { max-width: 860px; margin: 54px auto 0; }

/* Calendar */
.hx-events-explorer {
	display: grid;
	grid-template-columns: minmax(240px, .75fr) minmax(380px, 1.25fr);
	gap: clamp(36px, 7vw, 90px);
	align-items: center;
	max-width: 1120px;
	margin: clamp(64px, 8vw, 105px) auto;
}

.hx-events-explorer__intro h2 { margin: 0 0 16px; color: var(--hx-heading); font-size: clamp(30px, 3.19vw, 42px); letter-spacing: -.04em; }
.hx-events-explorer__intro > p:last-child { margin: 0; color: #5d6878; font-size: 16px; line-height: 1.7; }
.hx-event-calendar { padding: clamp(22px, 4vw, 36px); border: 1px solid #dbe2ed; border-radius: 24px; background: #fff; box-shadow: 0 22px 65px rgba(26,48,86,.09); }
.hx-event-calendar__nav { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 10px; margin-bottom: 24px; }
.hx-event-calendar__nav h3 { margin: 0; color: #172033; font-size: 20px; text-align: center; }
.hx-event-calendar__nav button { width: 40px; height: 40px; padding: 0; border: 1px solid #dbe2ed; border-radius: 50%; background: #fff; color: #172033; font-size: 18px; cursor: pointer; }
.hx-event-calendar__nav button:hover,
.hx-event-calendar__nav button:focus-visible { border-color: var(--hx-primary); color: var(--hx-primary); }
.hx-event-calendar__weekdays,
.hx-event-calendar__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.hx-event-calendar__weekdays { margin-bottom: 8px; color: #8791a0; font-size: 10px; font-weight: 800; text-align: center; text-transform: uppercase; }
.hx-event-calendar__day,
.hx-event-calendar__blank { display: grid; place-items: center; aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; color: #596475; font: inherit; font-size: 13px; }
button.hx-event-calendar__day { cursor: pointer; }
.hx-event-calendar__day.has-events { position: relative; background: #edf3ff; color: var(--hx-primary); font-weight: 800; }
.hx-event-calendar__day.has-events::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.hx-event-calendar__day.has-events:hover,
.hx-event-calendar__day.has-events:focus-visible,
.hx-event-calendar__day.is-selected { outline: none; background: var(--hx-primary); color: #fff; }
.hx-events-filterbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: -48px; padding: 14px 18px; border: 1px solid #dbe2ed; border-radius: 12px; background: #fff; }
.hx-events-filterbar[hidden] { display: none; }
.hx-events-filterbar p { margin: 0; color: #364154; font-weight: 700; }
.hx-events-filterbar button { padding: 0; border: 0; background: none; color: var(--hx-primary); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* Lineup */
.hx-events-lineup { padding: clamp(70px, 8vw, 105px) 0 clamp(80px, 10vw, 140px); scroll-margin-top: 90px; }
.hx-events-section + .hx-events-section { margin-top: clamp(70px, 9vw, 110px); }
.hx-events-section[hidden] { display: none; }
.hx-events-section__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 27px; padding-bottom: 17px; border-bottom: 1px solid #d9e0ea; }
.hx-events-section__head h2 { margin: 0; color: var(--hx-heading); font-size: clamp(28px, 3.25vw, 39px); letter-spacing: -.04em; }
.hx-events-section__head > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #eaf1ff; color: var(--hx-primary); font-weight: 800; }
.hx-events-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.hx-event-card {
	display: grid;
	grid-template-columns: 82px minmax(0, 1fr) 210px;
	gap: clamp(20px, 3vw, 34px);
	align-items: center;
	margin: 0;
	padding: 20px;
	border: 1px solid #dde4ee;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 8px 30px rgba(22,42,76,.045);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hx-event-card[hidden] { display: none; }
.hx-event-card:hover { border-color: #bdcbe1; box-shadow: 0 15px 38px rgba(22,42,76,.08); transform: translateY(-2px); }
.hx-event-card__date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 96px; border-radius: 14px; background: #edf3ff; color: var(--hx-primary); text-align: center; }
.hx-event-card__month { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hx-event-card__day { font-size: 31px; line-height: 1; letter-spacing: -.05em; }
.hx-event-card__year { margin-top: 3px; color: #60708a; font-size: 10px; }
.hx-event-card__eyebrow { margin: 0 0 6px; color: var(--hx-primary); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hx-event-card__title { margin: 0 0 8px; font-size: clamp(20px, 1.85vw, 24px); line-height: 1.2; letter-spacing: -.025em; }
.hx-event-card__title a { color: var(--hx-heading); text-decoration: none; }
.hx-event-card__title a:hover,
.hx-event-card__title a:focus-visible { color: var(--hx-primary); }
.hx-event-card__location { display: flex; flex-wrap: wrap; gap: 3px 8px; margin: 0; color: #647083; font-size: 13px; }
.hx-event-card__location strong { color: #343f51; }
.hx-event-card__location strong + span::before { content: "· "; }
.hx-event-card__excerpt { margin: 9px 0 0; color: #5d6878; font-size: 13px; line-height: 1.55; }
.hx-event-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #f1f4f8; }
.hx-event-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.hx-event-card:hover .hx-event-card__media img { transform: scale(1.025); }
.hx-event-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hx-event-card__actions .hx-event-button { min-height: 36px; padding: 7px 13px; font-size: 11px; }
.hx-event-menu { position: relative; }
.hx-event-menu > summary { list-style: none; }
.hx-event-menu > summary::-webkit-details-marker { display: none; }
.hx-event-menu > summary::after { content: "⌄"; margin-left: 7px; font-size: 12px; }
.hx-event-menu[open] > summary { border-color: var(--hx-primary); color: var(--hx-primary); }
.hx-event-menu__items { position: absolute; z-index: 8; top: calc(100% + 7px); left: 0; display: grid; min-width: 185px; overflow: hidden; border: 1px solid #d8e0eb; border-radius: 11px; background: #fff; box-shadow: 0 14px 35px rgba(20,38,68,.16); }
.hx-event-menu__items a { padding: 11px 14px; color: #2c3748; font-size: 12px; font-weight: 700; text-decoration: none; }
.hx-event-menu__items a + a { border-top: 1px solid #edf0f5; }
.hx-event-menu__items a:hover,
.hx-event-menu__items a:focus-visible { background: #edf3ff; color: var(--hx-primary); }
.hx-events-empty { max-width: 680px; margin: 90px auto; padding: 45px; border: 1px solid #dbe2ed; border-radius: 20px; background: #fff; text-align: center; }

/* Single event */
.hx-event-detail { padding: 34px 0 clamp(80px, 9vw, 130px); }
.hx-event-detail__breadcrumb { margin-bottom: 28px; }
.hx-event-detail__breadcrumb a { color: var(--hx-primary); font-size: 13px; font-weight: 700; text-decoration: none; }
.hx-event-detail__hero { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr); overflow: hidden; border: 1px solid #dbe2ed; border-radius: 24px; background: #fff; box-shadow: 0 24px 70px rgba(20,41,78,.09); }
.hx-event-detail__hero--no-media { grid-template-columns: 1fr; }
.hx-event-detail__media { display: grid; place-items: center; min-height: 540px; padding: clamp(24px, 4vw, 55px); background: #f0f4fa; }
.hx-event-detail__media img { width: 100%; max-height: 580px; object-fit: contain; }
.hx-event-detail__summary { align-self: center; padding: clamp(34px, 6vw, 80px); }
.hx-event-detail__summary h1 { margin: 0 0 30px; color: var(--hx-heading); font-size: clamp(32px, 3.79vw, 47px); line-height: 1.02; letter-spacing: -.05em; }
.hx-event-detail__facts { display: grid; gap: 16px; }
.hx-event-detail__facts > div { display: grid; grid-template-columns: 82px 1fr; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid #e4e9f1; }
.hx-event-detail__facts span { color: #7b8697; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hx-event-detail__facts strong { color: #293446; font-size: 15px; }
.hx-event-detail__facts small { grid-column: 2; margin-top: -11px; color: #687386; }
.hx-event-detail__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.hx-event-detail__body { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: clamp(40px, 7vw, 90px); margin-top: clamp(55px, 8vw, 95px); }
.hx-event-detail__content { max-width: 800px; }
.hx-event-detail__content h2,
.hx-event-detail__aside h2 { margin-top: 0; color: var(--hx-heading); font-size: clamp(26px, 2.55vw, 34px); letter-spacing: -.035em; }
.hx-event-detail__aside { align-self: start; padding: 27px; border: 1px solid #dbe2ed; border-radius: 17px; background: #fff; }

@media (max-width: 980px) {
	.hx-events-hero__inner { grid-template-columns: minmax(0, .85fr) minmax(370px, 1.15fr); gap: 38px; }
	.hx-events-explorer { grid-template-columns: 1fr; max-width: 680px; }
	.hx-events-filterbar { margin-top: -50px; }
	.hx-event-card { grid-template-columns: 76px minmax(0, 1fr) 160px; }
	.hx-event-detail__hero { grid-template-columns: 1fr 1.1fr; }
	.hx-event-detail__body { grid-template-columns: 1fr 270px; }
}

@media (max-width: 760px) {
	.hx-events-hero { padding-block: 60px; }
	.hx-events-hero__inner { display: grid; grid-template-columns: 1fr; }
	.hx-events-hero__actions { align-items: stretch; flex-direction: column; }
	.hx-events-hero__actions .hx-event-button { width: 100%; }
	.hx-events-hero__calendar-head { margin-top: 8px; }
	.hx-events-hero__calendar .hx-event-calendar { padding: 20px 16px; }
	.hx-events-explorer { margin-block: 58px 76px; }
	.hx-events-filterbar { align-items: flex-start; flex-direction: column; margin-top: -42px; }
	.hx-event-card { grid-template-columns: 68px minmax(0, 1fr); align-items: start; padding: 15px; }
	.hx-event-card__date { min-height: 78px; }
	.hx-event-card__day { font-size: 26px; }
	.hx-event-card__media { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; aspect-ratio: 16 / 8; }
	.hx-event-card__content { grid-column: 2; }
	.hx-event-card__actions { margin-left: -88px; }
	.hx-event-card__actions .hx-event-button,
	.hx-event-card__actions .hx-event-menu { flex: 1 1 auto; }
	.hx-event-card__actions .hx-event-menu > .hx-event-button { width: 100%; }
	.hx-event-menu__items { right: 0; left: auto; }
	.hx-event-detail__hero { grid-template-columns: 1fr; }
	.hx-event-detail__media { min-height: 0; padding: 25px; }
	.hx-event-detail__media img { max-height: 420px; }
	.hx-event-detail__body { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.hx-event-calendar { padding: 17px 12px; border-radius: 16px; }
	.hx-event-calendar__weekdays,
	.hx-event-calendar__days { gap: 2px; }
	.hx-event-calendar__day.has-events::after { bottom: 3px; }
	.hx-event-card__location span { flex-basis: 100%; }
	.hx-event-card__location strong + span::before { content: ""; }
	.hx-event-detail__summary { padding: 27px 20px 32px; }
	.hx-event-detail__facts > div { grid-template-columns: 70px 1fr; }
	.hx-event-detail__actions .hx-event-button { flex: 1 1 100%; }
}

/* ==========================================================================
   ROTATING FLAVOUR HERO  (front-page.php)
   One slide per flavour on its accent colour. Built on the carousel engine
   (assets/js/carousel.js, shape A): the track is a scroll-snap scroller that
   works with JS off; the script adds autoplay, dots and arrows. These rules
   override the earlier single-image .hx2-hero block above.
   ========================================================================== */
.hx2-hero { position: relative; overflow: hidden; min-height: 0; background: none; }
.hx2-hero::after { content: none; }   /* remove the old cream gradient overlay */

.hx2-hero__track {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.hx2-hero__track::-webkit-scrollbar { display: none; }

.hx2-hero__slide {
	position: relative;
	display: flex;
	flex: 0 0 100%;
	min-width: 0;   /* keep the slide exactly one viewport; content wraps inside */
	align-items: center;
	min-height: 660px;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
.hx2-hero__slide--blue  { background: #dbe5f6; }
.hx2-hero__slide--cocoa { background: #e8ddd7; }
.hx2-hero__slide--oat   { background: #ece5d6; }

.hx2-hero__panel {
	display: grid;
	grid-template-columns: .82fr 1.18fr;
	align-items: center;
	gap: clamp(18px, 2.5vw, 42px);
	width: min(100% - 40px, 1380px);
	margin-inline: auto;
	padding-block: 64px;
}
/* Let the columns shrink; without this the pouch's intrinsic width forces the
   grid wider than the viewport and the headline stops wrapping. */
.hx2-hero__panel > * { min-width: 0; }

.hx2-hero__copy { max-width: 560px; }
.hx2-hero__slide .hx2-eyebrow { margin-bottom: 0; }
.hx2-hero__slide h1,
.hx2-hero__slide h2 {
	margin: 18px 0 20px;
	color: var(--hx2-ink);
	font-weight: 650;
	font-size: clamp(2.44rem, 3.22vw, 3.5rem);
	letter-spacing: -.045em;
	line-height: .98;
}
.hx2-hero__lede {
	max-width: 460px;
	margin-bottom: 32px;
	color: #3a3f43;
	font-size: clamp(17px, 1.32vw, 20px);
	line-height: 1.6;
}
.hx2-hero__rating { margin-top: 26px; }

.hx2-hero__visual {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 440px;
}
/* The pouches are wrapped in <picture> to serve WebP. display:contents keeps
   the <img> as the direct flex child the single-bag layout below sizes,
   so the wrapper is invisible to layout. */
.hx2-hero__visual picture {
	display: contents;
}
.hx2-hero__visual img {
	position: relative;
	z-index: 1;
	width: auto;
	max-width: 100%;
	max-height: 560px;
	object-fit: contain;
	/* Transparent cut-out pouches — no blend trick, they sit on the accent as-is. */
	filter: drop-shadow(0 20px 22px rgba(16, 24, 32, .18));
}
/* Soft glow so the pouch lifts off the flat colour. */
.hx2-hero__visual::before {
	content: "";
	position: absolute;
	width: 68%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0));
}

/* Arrows — revealed by carousel.js (ship hidden, so no dead control JS-off). */
.hx2-hero__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .82);
	color: var(--hx2-ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background .2s ease, transform .2s ease;
}
.hx2-hero__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.hx2-hero__nav[hidden] { display: none; }
.hx2-hero__nav--prev { left: clamp(12px, 2vw, 28px); }
.hx2-hero__nav--next { right: clamp(12px, 2vw, 28px); }

/* Dots */
.hx2-hero__dots {
	position: absolute;
	bottom: 22px;
	left: 50%;
	z-index: 3;
	display: flex;
	gap: 0;
	transform: translateX(-50%);
}
.hx2-hero__dots:empty { display: none; }
/* 24px button, 9px dot painted by ::before — see .hx-carousel__dot for why. */
.hx2-hero__dots .hx-carousel__dot {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.hx2-hero__dots .hx-carousel__dot::before {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(16, 24, 32, .28);
	transition: background .2s ease, transform .2s ease;
}
.hx2-hero__dots .hx-carousel__dot[aria-selected="true"]::before {
	background: var(--hx2-blue);
	transform: translate(-50%, -50%) scale(1.3);
}

@media (max-width: 900px) {
	.hx2-hero__slide { min-height: 0; }
	.hx2-hero__panel { grid-template-columns: 1fr; gap: 8px; padding-block: 44px 52px; text-align: center; }
	.hx2-hero__copy { max-width: 640px; margin-inline: auto; }
	.hx2-hero__lede { margin-inline: auto; }
	.hx2-hero__slide .hx2-eyebrow { justify-content: center; }
	.hx2-hero .hx2-actions { justify-content: center; }
	.hx2-hero__visual { order: -1; min-height: 280px; }
	.hx2-hero__visual img { max-height: 320px; }
	.hx2-hero__slide h1,
	.hx2-hero__slide h2 { font-size: clamp(2.06rem, 4.8vw, 2.56rem); }
	.hx2-hero__slide h1,
	.hx2-hero__slide h2,
	.hx2-hero__lede { max-width: 100%; overflow-wrap: break-word; }
}
@media (max-width: 600px) {
	.hx2-hero__slide h1,
	.hx2-hero__slide h2 { font-size: clamp(1.78rem, 6.39vw, 2.19rem); letter-spacing: -.03em; }
	.hx2-hero__slide .hx2-eyebrow { font-size: 10px; letter-spacing: .1em; }
	.hx2-hero__nav { width: 38px; height: 38px; font-size: 20px; }
}

/* --- Rotating hero: Quaker-style polish (big text left, crisp pouch right) --
   Refines the pouch-on-colour layout above for a cleaner, more premium banner:
   a bigger product shot, a soft vertical tint on the accent colour, and a
   grounding shadow under the pouch. */
.hx2-hero__slide {
	background-image: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%);
	background-blend-mode: normal;
}
.hx2-hero__slide--blue  { background-color: #dbe5f6; }
.hx2-hero__slide--cocoa { background-color: #e9ded7; }
.hx2-hero__slide--oat   { background-color: #ece5d6; }

.hx2-hero__visual img { max-height: 600px; }
.hx2-hero__visual::before { width: 74%; }
/* Grounding shadow so the pouch sits on the surface, not floating. */
.hx2-hero__visual::after {
	content: "";
	position: absolute;
	bottom: 8%;
	width: 46%;
	height: 26px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(16, 24, 32, .22), rgba(16, 24, 32, 0));
}

/* --- Hero: fit hero + benefits above the fold; "all flavours" main slide -----
   Size each slide so header (~134px) + hero + proof rail (~90px) == viewport,
   so the four benefits sit just inside the fold on desktop. Mobile keeps the
   stacked layout (min-height reset below). */
.hx2-hero__slide { min-height: calc(100vh - 254px); }
.hx2-hero__panel { padding-block: clamp(18px, 3vh, 46px); }
.hx2-hero__visual img { max-height: min(510px, calc(100vh - 348px)); }
/* Compact copy so hero + benefits clear the fold on common desktop heights. */
.hx2-hero__slide h1,
.hx2-hero__slide h2 { font-size: clamp(2rem, 2.8vw, 2.95rem); margin: 10px 0 16px; line-height: 1; }
.hx2-hero__lede { margin-bottom: 22px; }
.hx2-hero__rating { margin-top: 16px; }

/* Neutral "all flavours" main slide (the bag lineup is styled at the end). */
.hx2-hero__slide--all { background-color: #eef1f5; }

@media (max-width: 900px) {
	.hx2-hero__slide { min-height: 0; }   /* re-assert stacked layout, not 100vh */
}

@media (max-width: 600px) {
	.hx2-hero__panel { width: min(100% - 20px, 1380px); }
}

/* ========================================================================== 
   12. SINGLE RECIPE — EDITORIAL RECIPE SHEET
   ========================================================================== */

.hx-recipe-single {
	--hx-recipe-ink: #101820;
	--hx-recipe-muted: #65707b;
	--hx-recipe-line: #dfe4e8;
	--hx-recipe-cream: #f5f1e8;
	--hx-recipe-blue-wash: #edf3fb;
	padding: 0 0 clamp(64px, 8vw, 110px);
	background: #fbfbfa;
}

.hx-recipe-shell {
	width: min(100% - 40px, 1280px);
	margin-inline: auto;
}

.hx-recipe-breadcrumbs {
	padding: 24px 0;
	color: var(--hx-recipe-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
}

.hx-recipe-breadcrumbs a {
	color: inherit;
}

.hx-recipe-header {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	min-height: 570px;
	background: var(--hx-recipe-cream);
}

.hx-recipe-header__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(42px, 6vw, 86px);
}

.hx-recipe-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	color: var(--hx-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .15em;
	line-height: 1.2;
	text-transform: uppercase;
}

.hx-recipe-kicker::before {
	content: none;
}

.hx-recipe-header h1 {
	margin: 0;
	color: var(--hx-recipe-ink);
	font-size: clamp(35px, 3.42vw, 51px);
	font-weight: 600;
	letter-spacing: -.05em;
	line-height: 1.02;
	text-wrap: balance;
}

.hx-recipe-header__lede {
	margin: 24px 0 0;
	color: var(--hx-recipe-ink);
	font-size: clamp(18px, 1.45vw, 20px);
	font-weight: 500;
	line-height: 1.55;
}

.hx-recipe-header__description {
	margin-top: 18px;
	color: var(--hx-recipe-muted);
	font-size: 15px;
	line-height: 1.75;
}

.hx-recipe-header__description p {
	margin-bottom: .8em;
}

.hx-recipe-header__media {
	min-width: 0;
	margin: 0;
	background: var(--hx-recipe-blue-wash);
}

.hx-recipe-header__media img {
	width: 100%;
	height: 100%;
	min-height: 570px;
	object-fit: cover;
}

.hx-recipe-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 30px;
}

.hx-recipe-actions .hx-button--jump,
.hx-recipe-print {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 11px 20px;
	border: 1px solid var(--hx-primary);
	border-radius: 0;
	box-shadow: none;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

.hx-recipe-actions .hx-button--jump {
	flex-direction: row;
	background: var(--hx-primary);
	color: var(--hx-inverse);
}

.hx-recipe-actions .hx-button--jump:hover,
.hx-recipe-actions .hx-button--jump:focus {
	background: var(--hx-primary-deep);
	color: var(--hx-inverse);
}

.hx-recipe-print {
	background: transparent;
	color: var(--hx-primary);
}

.hx-recipe-print:hover,
.hx-recipe-print:focus {
	background: var(--hx-inverse);
	color: var(--hx-primary-deep);
}

.hx-recipe-actions .hx-icon,
.hx-recipe-print .hx-icon {
	width: 17px;
	height: 17px;
}

.hx-recipe-single .hx-recipe-meta {
	display: grid;
	grid-template-columns: repeat(var(--hx-recipe-meta-count, 6), minmax(0, 1fr));
	align-items: stretch;
	padding: 0;
	margin: 0 0 clamp(40px, 6vw, 76px);
	background: var(--hx-primary);
	color: var(--hx-inverse);
}

.hx-recipe-single .hx-recipe-meta__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 92px;
	padding: 18px 20px;
	text-align: left;
	border-right: 1px solid rgba(255, 255, 255, .22);
}

.hx-recipe-single .hx-recipe-meta__item:last-child {
	border-right: 0;
}

.hx-recipe-single .hx-recipe-meta dt,
.hx-recipe-single .hx-recipe-meta dd {
	display: block;
}

.hx-recipe-single .hx-recipe-meta dt {
	margin-bottom: 5px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .13em;
	line-height: 1.2;
	text-transform: uppercase;
	opacity: .72;
}

.hx-recipe-single .hx-recipe-meta dd {
	color: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.hx-recipe-sheet {
	display: grid;
	grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
	align-items: start;
	gap: clamp(40px, 6vw, 78px);
	max-width: 1140px;
	margin-inline: auto;
}

.hx-recipe-sheet__aside {
	position: sticky;
	top: calc(var(--hx-header-main-h-sticky) + 28px);
}

.hx-recipe-single .hx-recipe-ingredients {
	display: block;
	padding: clamp(26px, 3vw, 38px);
	background: var(--hx-recipe-blue-wash);
}

.hx-recipe-ingredients__header {
	display: block;
	padding-bottom: 20px;
	margin-bottom: 22px;
	border-bottom: 1px solid #ced9e7;
}

.hx-recipe-section-heading > span {
	display: block;
	margin-bottom: 7px;
	color: var(--hx-primary);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
}

.hx-recipe-section-heading h2,
.hx-recipe-instructions > .hx-recipe-section-heading h2 {
	margin: 0;
	color: var(--hx-recipe-ink);
	font-size: clamp(26px, 2.55vw, 34px);
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: 1.1;
}

.hx-recipe-single .hx-recipe-ingredients__scale {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 0;
	padding: 13px;
	margin: 20px 0 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, .82);
}

.hx-recipe-single .hx-recipe-ingredients__scale label {
	flex: 1 0 100%;
	margin: 0;
	color: var(--hx-recipe-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
}

.hx-servings-control {
	display: grid;
	grid-template-columns: 38px 46px 38px;
	align-items: stretch;
	border: 1px solid #bdc9d7;
	border-radius: 7px;
	overflow: hidden;
	background: #fff;
}

.hx-recipe-single .hx-servings-control__button {
	display: grid;
	width: 38px;
	height: 40px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--hx-primary);
	background: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	place-items: center;
}

.hx-recipe-single .hx-servings-control__button:hover,
.hx-recipe-single .hx-servings-control__button:focus {
	color: #fff;
	background: var(--hx-primary);
}

.hx-recipe-single .hx-servings-control__button:disabled {
	color: #9da7b0;
	background: #f4f6f8;
	cursor: not-allowed;
}

.hx-recipe-single .hx-servings-input {
	width: 46px;
	height: 40px;
	padding: 5px 2px;
	border: 0;
	border-right: 1px solid #d8dfe6;
	border-left: 1px solid #d8dfe6;
	border-radius: 0;
	color: var(--hx-recipe-ink);
	background: #fff;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
}

.hx-recipe-single .hx-servings-input::-webkit-inner-spin-button,
.hx-recipe-single .hx-servings-input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.hx-servings-person {
	color: var(--hx-recipe-muted);
	font-size: 12px;
	font-weight: 600;
}

.hx-recipe-single .hx-ingredient-list li {
	align-items: flex-start;
	gap: 10px;
	padding-block: 10px;
	color: #34404c;
	font-size: 14px;
	line-height: 1.6;
	border-bottom: 1px solid rgba(29, 68, 151, .12);
}

.hx-recipe-single .hx-ingredient-list li + li {
	margin-top: 0;
}

.hx-recipe-single .hx-icon--check {
	width: 15px;
	height: 15px;
	margin: 4px 0 0;
}

.hx-recipe-single .hx-ingredient__qty {
	color: var(--hx-recipe-ink);
}

.hx-recipe-single .hx-ingredient__note {
	display: block;
	color: var(--hx-recipe-muted);
	font-size: 12px;
}

.hx-recipe-product {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 18px;
	margin-top: 20px;
	padding: 20px;
	background: var(--hx-recipe-ink);
	color: var(--hx-inverse);
}

.hx-recipe-product__media {
	align-self: center;
	background: var(--hx-inverse);
}

.hx-recipe-product__media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
}

.hx-recipe-product__eyebrow {
	display: block;
	margin-bottom: 7px;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	opacity: .62;
}

.hx-recipe-product__title {
	margin: 0 0 7px;
	font-size: 14px;
	line-height: 1.35;
}

.hx-recipe-product__title a {
	color: var(--hx-inverse);
}

.hx-recipe-product__price {
	margin-bottom: 12px;
	font-size: 13px;
	font-weight: 700;
}

.hx-recipe-product__form {
	margin: 0;
}

.hx-recipe-product .hx-recipe-product__button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 9px 12px;
	background: var(--hx-primary);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--hx-inverse);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
}

.hx-recipe-product .hx-recipe-product__button:hover,
.hx-recipe-product .hx-recipe-product__button:focus {
	background: var(--hx-inverse);
	color: var(--hx-recipe-ink);
}

.hx-recipe-single .hx-recipe-instructions {
	padding: 0;
	background: transparent;
}

.hx-recipe-instructions > .hx-recipe-section-heading {
	padding-bottom: 24px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--hx-recipe-line);
}

.hx-recipe-single .hx-step {
	position: relative;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	padding: 26px 0;
	border-bottom: 1px solid var(--hx-recipe-line);
}

.hx-recipe-single .hx-step + .hx-step {
	margin-top: 0;
}

.hx-recipe-single .hx-step__title,
.hx-recipe-single .hx-step__body {
	grid-column: 2;
}

.hx-recipe-single .hx-step__title {
	display: block;
	margin: 0 0 8px;
	font-size: 20px;
	letter-spacing: -.02em;
}

.hx-recipe-single .hx-step__num {
	position: absolute;
	top: 24px;
	left: 0;
	width: 36px;
	height: 36px;
	margin: 0;
	background: var(--hx-primary);
	border-radius: 0;
	font-size: 13px;
}

.hx-recipe-single .hx-step__body {
	color: #46515c;
	font-size: 16px;
	line-height: 1.8;
}

.hx-recipe-single .hx-step__body p:last-child {
	margin-bottom: 0;
}

.hx-recipe-notes,
.hx-recipe-nutrition-panel {
	margin-top: 36px;
}

.hx-recipe-notes {
	padding: 30px;
	background: var(--hx-recipe-cream);
}

.hx-recipe-notes h2,
.hx-recipe-nutrition-panel h2 {
	margin: 0 0 16px;
	color: var(--hx-recipe-ink);
	font-size: 22px;
	letter-spacing: -.02em;
}

.hx-recipe-single .hx-recipe-note {
	padding: 0;
}

.hx-recipe-single .hx-recipe-keywords {
	margin-top: 18px;
	color: var(--hx-recipe-muted);
	font-size: 12px;
}

.hx-recipe-single .hx-recipe-nutrition {
	margin: 0;
}

.hx-recipe-single .hx-recipe-nutrition img {
	max-width: 720px;
}

.hx-recipe-single > .hx-recipe > .hx-recipe-shell > .entry-content {
	max-width: 760px;
	margin: 60px auto 0;
}

.hx-recipe-more {
	margin-top: clamp(72px, 9vw, 120px);
	padding: clamp(68px, 8vw, 105px) 0;
	background: var(--hx-recipe-cream);
}

.hx-recipe-more__inner {
	width: min(100% - 40px, 1200px);
	margin-inline: auto;
}

.hx-recipe-more__header {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr);
	align-items: end;
	gap: 50px;
	margin-bottom: 38px;
}

.hx-recipe-more__header span {
	display: block;
	margin-bottom: 12px;
	color: var(--hx-primary);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.hx-recipe-more__header h2 {
	max-width: 760px;
	margin: 0;
	color: var(--hx-recipe-ink);
	font-size: clamp(30px, 3.17vw, 43px);
	letter-spacing: -.04em;
	line-height: 1.08;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.hx-recipe-more__header p {
	margin: 0 0 4px;
	color: var(--hx-recipe-muted);
	font-size: 15px;
	line-height: 1.7;
}

.hx-recipe-more__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.hx-recipe-more__grid .hx2-recipe {
	min-height: 360px;
}

.hx-recipe-more__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
	padding: 14px 20px;
	border-radius: 4px;
	color: #fff;
	background: var(--hx-primary);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.hx-recipe-more__link span {
	font-size: 18px;
	transition: transform .2s ease;
}

.hx-recipe-more__link:hover,
.hx-recipe-more__link:focus {
	color: #fff;
	background: var(--hx-primary-deep);
}

.hx-recipe-more__link:hover span,
.hx-recipe-more__link:focus span {
	transform: translateX(3px);
}

@media (max-width: 1024px) {
	.hx-recipe-header {
		min-height: 520px;
	}

	.hx-recipe-header__content {
		padding: 44px;
	}

	.hx-recipe-header__media img {
		min-height: 520px;
	}

	.hx-recipe-single .hx-recipe-meta {
		grid-template-columns: repeat(3, 1fr);
	}

	.hx-recipe-single .hx-recipe-meta__item:nth-child(3n) {
		border-right: 0;
	}

	.hx-recipe-single .hx-recipe-meta__item:nth-child(-n+3) {
		border-bottom: 1px solid rgba(255, 255, 255, .22);
	}

	.hx-recipe-sheet {
		grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
		gap: 42px;
	}

	.hx-recipe-product {
		grid-template-columns: 86px minmax(0, 1fr);
		padding: 16px;
	}
}

@media (max-width: 820px) {
	.hx-recipe-shell {
		width: min(100% - 32px, 720px);
	}

	.hx-recipe-header {
		grid-template-columns: 1fr;
	}

	.hx-recipe-header__media {
		grid-row: 1;
	}

	.hx-recipe-header__media img {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.hx-recipe-header__content {
		padding: clamp(34px, 7vw, 54px);
	}

	.hx-recipe-sheet {
		grid-template-columns: 1fr;
		max-width: 700px;
	}

	.hx-recipe-sheet__aside {
		position: static;
	}

	.hx-recipe-product {
		grid-template-columns: 110px minmax(0, 1fr);
	}

	.hx-recipe-more__header {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.hx-recipe-more__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hx-recipe-more__grid .hx2-recipe:last-child {
		grid-column: 1 / -1;
		min-height: 300px;
	}
}

@media (max-width: 560px) {
	.hx-recipe-shell {
		width: 100%;
	}

	.hx-recipe-breadcrumbs {
		padding: 18px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.hx-recipe-header__media img {
		aspect-ratio: 4 / 3;
	}

	.hx-recipe-header__content {
		padding: 34px 20px 38px;
	}

	.hx-recipe-header h1 {
		font-size: clamp(33px, 9.58vw, 42px);
		overflow-wrap: anywhere;
		text-wrap: wrap;
	}

	.hx-recipe-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.hx-recipe-actions .hx-button--jump,
	.hx-recipe-print {
		width: 100%;
		padding-inline: 12px;
	}

	.hx-recipe-single .hx-recipe-meta {
		grid-template-columns: repeat(2, 1fr);
		margin-bottom: 32px;
	}

	.hx-recipe-single .hx-recipe-meta__item,
	.hx-recipe-single .hx-recipe-meta__item:nth-child(3n) {
		min-height: 78px;
		padding: 14px 18px;
		border-right: 1px solid rgba(255, 255, 255, .22);
		border-bottom: 1px solid rgba(255, 255, 255, .22);
	}

	.hx-recipe-single .hx-recipe-meta__item:nth-child(2n) {
		border-right: 0;
	}

	.hx-recipe-sheet {
		width: calc(100% - 32px);
		gap: 28px;
		margin-inline: 16px;
	}

	.hx-recipe-single .hx-recipe-ingredients {
		padding: 26px 20px;
	}

	.hx-recipe-ingredients__header {
		align-items: center;
	}

	.hx-recipe-section-heading h2,
	.hx-recipe-instructions > .hx-recipe-section-heading h2 {
		font-size: 27px;
	}

	.hx-recipe-product {
		grid-template-columns: 92px minmax(0, 1fr);
		margin-inline: 0;
	}

	.hx-recipe-sheet__main {
		padding-inline: 0;
	}

	.hx-recipe-single .hx-step {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.hx-recipe-single .hx-step__title,
	.hx-recipe-single .hx-step__body {
		grid-column: 2;
	}

	.hx-recipe-notes {
		padding: 24px;
	}

	.hx-recipe-more {
		margin-top: 68px;
		padding: 60px 0 66px;
	}

	.hx-recipe-more__inner {
		width: 100%;
	}

	.hx-recipe-more__header,
	.hx-recipe-more__link {
		margin-right: 16px;
		margin-left: 16px;
	}

	.hx-recipe-more__grid {
		display: flex;
		gap: 12px;
		padding: 0 16px 8px;
		overflow-x: auto;
		scroll-padding-inline: 16px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.hx-recipe-more__grid::-webkit-scrollbar {
		display: none;
	}

	.hx-recipe-more__grid .hx2-recipe,
	.hx-recipe-more__grid .hx2-recipe:last-child {
		flex: 0 0 82%;
		min-height: 315px;
		grid-column: auto;
		scroll-snap-align: start;
	}

	.hx-recipe-more__link {
		justify-content: center;
		width: calc(100% - 32px);
		margin-top: 24px;
		white-space: normal;
	}
}

@media print {
	@page {
		margin: .5in;
	}

	body.single-recipe {
		background: #fff !important;
		color: #000;
		font-size: 10pt;
	}

	body.single-recipe .site-header,
	body.single-recipe .site-footer,
	body.single-recipe .hx-navbar,
	body.single-recipe .hx-recipe-breadcrumbs,
	body.single-recipe .hx-recipe-actions,
	body.single-recipe .hx-recipe-product,
	body.single-recipe .hx-recipe-more,
	body.single-recipe .pressmart-mask-overaly,
	body.single-recipe .tawk-min-container {
		display: none !important;
	}

	body.single-recipe .site-wrapper,
	body.single-recipe .hx-recipe-single,
	body.single-recipe .hx-recipe-shell,
	body.single-recipe .hx-recipe {
		display: block;
		width: 100%;
		max-width: none;
		padding: 0;
		margin: 0;
		background: #fff !important;
	}

	body.single-recipe .hx-recipe-header {
		display: grid;
		grid-template-columns: 1fr 220px;
		min-height: 0;
		margin-bottom: 12pt;
		background: #fff !important;
		border-bottom: 2px solid #1d4497;
	}

	body.single-recipe .hx-recipe-header__content {
		display: block;
		padding: 0 18pt 12pt 0;
	}

	body.single-recipe .hx-recipe-header h1 {
		font-size: 28pt;
		line-height: 1.05;
	}

	body.single-recipe .hx-recipe-header__lede {
		margin-top: 8pt;
		font-size: 12pt;
	}

	body.single-recipe .hx-recipe-header__description {
		margin-top: 6pt;
		font-size: 9pt;
		line-height: 1.4;
	}

	body.single-recipe .hx-recipe-header__media img {
		height: 170px;
		min-height: 0;
		object-fit: cover;
	}

	body.single-recipe .hx-recipe-meta {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		margin: 0 0 16pt;
		background: #fff !important;
		color: #000;
		border: 1px solid #999;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	body.single-recipe .hx-recipe-meta__item {
		min-height: 0;
		padding: 7pt;
		border-right: 1px solid #bbb;
		border-bottom: 0;
	}

	body.single-recipe .hx-recipe-meta dt {
		font-size: 6.5pt;
		opacity: 1;
	}

	body.single-recipe .hx-recipe-meta dd {
		font-size: 9pt;
	}

	body.single-recipe .hx-recipe-sheet {
		display: grid;
		grid-template-columns: 34% 1fr;
		gap: 22pt;
		max-width: none;
	}

	body.single-recipe .hx-recipe-sheet__aside {
		position: static;
	}

	body.single-recipe .hx-recipe-ingredients {
		padding: 14pt;
		background: #f1f4f8 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	body.single-recipe .hx-recipe-ingredients__header {
		padding-bottom: 8pt;
		margin-bottom: 8pt;
	}

	body.single-recipe .hx-recipe-section-heading h2,
	body.single-recipe .hx-recipe-instructions > .hx-recipe-section-heading h2 {
		font-size: 18pt;
	}

	body.single-recipe .hx-recipe-ingredients__scale {
		display: none;
	}

	body.single-recipe .hx-ingredient-list li {
		padding-block: 4pt;
		font-size: 8.5pt;
		line-height: 1.35;
		break-inside: avoid;
	}

	body.single-recipe .hx-step {
		grid-template-columns: 30px 1fr;
		padding: 10pt 0;
		break-inside: avoid;
	}

	body.single-recipe .hx-step__num {
		top: 9pt;
		width: 22px;
		height: 22px;
		font-size: 8pt;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	body.single-recipe .hx-step__title,
	body.single-recipe .hx-step__body {
		grid-column: 2;
	}

	body.single-recipe .hx-step__title {
		font-size: 12pt;
	}

	body.single-recipe .hx-step__body {
		font-size: 9pt;
		line-height: 1.45;
	}

	body.single-recipe .hx-recipe-notes,
	body.single-recipe .hx-recipe-nutrition-panel {
		margin-top: 16pt;
		break-inside: avoid;
	}

	body.single-recipe .hx-recipe-notes {
		padding: 12pt;
		background: #f7f3ea !important;
	}

	body.single-recipe .hx-recipe-nutrition img {
		max-height: 320px;
		width: auto;
	}
}

/* ==========================================================================
   Partner hero with the application form in-hero (above the fold).
   Wholesale + Ambassador: value prop left, application card right. The lower
   standalone application section was removed, so the form is the hero's right
   column. See page-wholesale-distribution.php / page-affiliate-sign-up.php.
   ========================================================================== */
.hx-partner-hero--apply .hx-partner-hero__grid {
	grid-template-columns: minmax(0, .82fr) minmax(430px, 1fr);
	align-items: start;
}
.hx-partner-hero__form {
	min-width: 0;
}
.hx-partner-hero--apply .hx-partner-hero__copy {
	padding-top: 8px;
}
/* Card header (sits above the form inside the .hx-partner-form card). */
.hx-partner-form__head {
	margin-bottom: 20px;
}
.hx-partner-form__head .hx-partner-eyebrow {
	margin-bottom: 10px;
}
.hx-partner-form__head h2 {
	margin: 0 0 9px;
	font-size: clamp(21px, 2vw, 26px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
}
.hx-partner-form__head p {
	margin: 0;
	color: #56626f;
	font-size: 14.5px;
	line-height: 1.6;
}
/* Single-column fields convert better and fit the narrower in-hero card. */
.hx-partner-hero--apply .hx-wholesale-form__grid {
	grid-template-columns: 1fr;
}
/* Trust bullets / steps as a card footer. */
.hx-partner-checks--card,
.hx-application-steps--card {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--hx-partner-line);
}
.hx-application-steps--card {
	margin-bottom: 0;
}
.hx-application-steps--card li:last-child {
	padding-bottom: 0;
}

@media (max-width: 1024px) {
	.hx-partner-hero--apply .hx-partner-hero__grid {
		grid-template-columns: minmax(0, .82fr) minmax(340px, 1fr);
		gap: 34px;
	}
}
@media (max-width: 767px) {
	/* minmax(0,1fr), not 1fr: a bare `1fr` track keeps its `auto` (min-content)
	   minimum, so the form's widest control would stretch the shared single
	   column past the viewport and clip the copy. 0 lets it shrink. */
	.hx-partner-hero--apply .hx-partner-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.hx-partner-hero--apply .hx-partner-hero__copy,
	.hx-partner-hero--apply .hx-partner-hero__form {
		min-width: 0;
		max-width: 100%;
	}
	/* Tighten the hero so the application clears the fold quickly on phones. */
	.hx-partner-hero--apply {
		padding: 34px 0 44px;
	}
	.hx-partner-hero--apply h1 {
		margin-bottom: 16px;
		font-size: clamp(28px, 7.8vw, 38px);
	}
	.hx-partner-hero--apply .hx-partner-hero__copy > p {
		margin-bottom: 18px;
		font-size: 16px;
	}
	.hx-partner-hero--apply .hx-partner-hero__grid {
		gap: 26px;
	}
}

/* ==========================================================================
   My Account — login + register card (woocommerce/myaccount/form-login.php)
   Two-panel: brand/benefits rail + Reddit-style Log in / Sign up toggle.
   ========================================================================== */
.hx-login { display: flex; justify-content: center; padding: clamp(20px, 4vw, 56px) 0; }
.hx-login__card {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	width: 100%;
	max-width: 940px;
	overflow: hidden;
	border-radius: 22px;
	box-shadow: 0 30px 80px rgba(20, 33, 45, .16);
	background: #fff;
}
.hx-login__aside {
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 3.2vw, 46px);
	color: #fff;
	background: linear-gradient(160deg, var(--hx-partner-blue-deep, #10245f) 0%, var(--hx2-blue, #1d4497) 100%);
}
.hx-login .hx-login__logo { width: auto !important; max-width: 148px; height: auto; margin-bottom: 24px; }
.hx-login__aside-title { margin: 0 0 8px; color: #fff !important; font-size: clamp(22px, 2.08vw, 26px); font-weight: 700; letter-spacing: -.01em; }
.hx-login__aside-sub { margin: 0 0 28px; color: rgba(255, 255, 255, .82); font-size: 15px; line-height: 1.6; }
.hx-login__benefits { margin: auto 0 0; padding: 0; list-style: none; display: grid; gap: 15px; }
.hx-login__benefits li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.hx-login__benefits svg { flex: 0 0 auto; width: 22px; height: 22px; color: #cfe0ff; }
.hx-login__benefits span { padding-top: 1px; }

.hx-login__main { position: relative; padding: clamp(26px, 3vw, 44px); }
/* Strip WooCommerce core's bordered box on form.login / form.register. */
.hx-login__main form.login,
.hx-login__main form.register { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.hx-auth__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hx-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin-bottom: 26px;
	padding: 5px;
	border-radius: 999px;
	background: #eef1f6;
}
.hx-auth__tab {
	padding: 10px;
	border-radius: 999px;
	color: #5a6472;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.hx-auth__radio--login:checked ~ .hx-auth__tabs .hx-auth__tab[for="hx-auth-login"],
.hx-auth__radio--register:checked ~ .hx-auth__tabs .hx-auth__tab[for="hx-auth-register"] {
	color: var(--hx2-blue, #1d4497);
	background: #fff;
	box-shadow: 0 2px 7px rgba(20, 33, 45, .13);
}
.hx-auth__panel--register { display: none; }
.hx-auth__radio--register:checked ~ .hx-auth__panel--register { display: block; }
.hx-auth__radio--register:checked ~ .hx-auth__panel--login { display: none; }

.hx-auth__head h1 { margin: 0 0 6px; font-size: clamp(20px, 1.94vw, 24px); font-weight: 700; letter-spacing: -.01em; }
.hx-auth__head p { margin: 0 0 22px; color: #5a6472; font-size: 14.5px; }
.hx-login .form-row { display: block; margin: 0 0 15px; }
.hx-login .form-row > label { display: block; margin-bottom: 7px; color: #28313c; font-size: 13px; font-weight: 600; }
.hx-login input[type="text"],
.hx-login input[type="email"],
.hx-login input[type="password"] {
	width: 100%;
	min-height: 52px;
	padding: 12px 15px;
	border: 1px solid #cfd7df;
	border-radius: 10px;
	font-size: 15px;
	color: #1a2230;
	background: #fff;
}
.hx-login input:focus { border-color: var(--hx2-blue, #1d4497); box-shadow: 0 0 0 3px rgba(29, 68, 151, .12); outline: none; }
.hx-auth__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.hx-auth__remember { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: #3a434e; cursor: pointer; }
.hx-auth__remember input { width: auto !important; min-height: 0 !important; margin: 0; }
.hx-auth__lost { font-size: 13px; color: var(--hx2-blue, #1d4497); text-decoration: none; white-space: nowrap; }
.hx-auth__lost:hover { text-decoration: underline; }
.hx-login .hx-auth__submit {
	width: 100%;
	min-height: 54px;
	margin-top: 18px;
	border: 0 !important;
	border-radius: 10px;
	color: #fff !important;
	font-size: 15.5px;
	font-weight: 700;
	background: var(--hx2-blue, #1d4497) !important;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}
.hx-login .hx-auth__submit:hover,
.hx-login .hx-auth__submit:focus { background: var(--hx-primary-hover, #16367a) !important; transform: translateY(-1px); }
.hx-auth__note { margin: 0 0 6px; color: #5a6472; font-size: 13.5px; }
.hx-auth__switch { margin: 18px 0 0; color: #5a6472; font-size: 14px; text-align: center; }
.hx-auth__switch label { color: var(--hx2-blue, #1d4497); font-weight: 600; cursor: pointer; }
.hx-auth__switch label:hover { text-decoration: underline; }
/* Play nice with WooCommerce's show/hide-password button + notices. */
.hx-login .woocommerce-password-hint { display: block; margin-top: 6px; font-size: 12px; color: #7a828d; }
.hx-login .password-input { display: block; position: relative; }
.hx-login .show-password-input { position: absolute; top: 15px; right: 14px; }

@media (max-width: 767px) {
	.hx-login__card { grid-template-columns: 1fr; max-width: 460px; border-radius: 18px; }
	.hx-login__aside { padding: 24px 22px 22px; }
	.hx-login .hx-login__logo { max-width: 104px; margin-bottom: 14px; }
	.hx-login__aside-sub { margin-bottom: 18px; }
	.hx-login__benefits { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
	.hx-login__benefits li { font-size: 12.5px; }
}
@media (max-width: 420px) {
	.hx-login__benefits { grid-template-columns: 1fr; }
}

/* ==========================================================================
   "Simple, and it works." — focused spotlight that highlights one card at a
   time (front-page hx2-why). CSS-only: every card runs the same keyframe, but
   each is phase-shifted by a quarter via a negative delay, so exactly one is
   lit at any moment. Hover the grid to pause and focus any card by hand.

   --hx2-spot-dim is the unlit opacity. It used to be .4, which rendered the
   body copy at 1.78:1 against white — text no opacity below about .85 can keep
   above the 4.5:1 floor, whatever colour it starts from. The spotlight now
   carries on the background tint and icon motion, which are decoration and
   free to move as far as they like. Lower the value if you want the harder
   contrast back, knowing it fails WCAG AA while a card is unlit.
   ========================================================================== */
.hx2-why__grid { --hx2-spot: 13s; --hx2-spot-dim: .88; }
.hx2-why__grid article {
	opacity: var(--hx2-spot-dim);
	transition: opacity .45s ease, background-color .45s ease;
	animation: hx2-why-spot var(--hx2-spot) ease-in-out infinite both;
}
.hx2-why__grid .hx2-why__icon {
	animation: hx2-why-icon var(--hx2-spot) ease-in-out infinite both;
}
.hx2-why__grid article:nth-child(1),
.hx2-why__grid article:nth-child(1) .hx2-why__icon { animation-delay: 0s; }
.hx2-why__grid article:nth-child(2),
.hx2-why__grid article:nth-child(2) .hx2-why__icon { animation-delay: calc(var(--hx2-spot) / -4); }
.hx2-why__grid article:nth-child(3),
.hx2-why__grid article:nth-child(3) .hx2-why__icon { animation-delay: calc(var(--hx2-spot) / -2); }
.hx2-why__grid article:nth-child(4),
.hx2-why__grid article:nth-child(4) .hx2-why__icon { animation-delay: calc(var(--hx2-spot) * -0.75); }

@keyframes hx2-why-spot {
	0%   { opacity: 1; background-color: rgba(29, 68, 151, .08); }
	21%  { opacity: 1; background-color: rgba(29, 68, 151, .08); }
	27%  { opacity: var(--hx2-spot-dim); background-color: transparent; }
	94%  { opacity: var(--hx2-spot-dim); background-color: transparent; }
	100% { opacity: 1; background-color: rgba(29, 68, 151, .08); }
}
@keyframes hx2-why-icon {
	0%   { border-color: #9fb6e2; background-color: #e7eefb; transform: translateY(-3px) scale(1.06); }
	21%  { border-color: #9fb6e2; background-color: #e7eefb; transform: translateY(-3px) scale(1.06); }
	27%  { border-color: #dbe4f4; background-color: #f4f7fc; transform: none; }
	94%  { border-color: #dbe4f4; background-color: #f4f7fc; transform: none; }
	100% { border-color: #9fb6e2; background-color: #e7eefb; transform: translateY(-3px) scale(1.06); }
}

/* Hover the grid: freeze the loop, dim everything, spotlight the hovered card.
   !important beats the running animation (important author > animations). */
.hx2-why__grid:hover article,
.hx2-why__grid:hover article .hx2-why__icon { animation-play-state: paused; }
.hx2-why__grid:hover article { opacity: var(--hx2-spot-dim) !important; background-color: transparent !important; }
.hx2-why__grid:hover article .hx2-why__icon { border-color: #dbe4f4 !important; background-color: #f4f7fc !important; transform: none !important; }
.hx2-why__grid article:hover { opacity: 1 !important; background-color: rgba(29, 68, 151, .08) !important; }
.hx2-why__grid article:hover .hx2-why__icon { border-color: #9fb6e2 !important; background-color: #e7eefb !important; transform: translateY(-3px) scale(1.06) !important; }

@media (prefers-reduced-motion: reduce) {
	.hx2-why__grid article,
	.hx2-why__grid .hx2-why__icon { animation: none; }
	.hx2-why__grid article { opacity: 1; }
}

/* ==========================================================================
   Policy pages — shipping + returns, EN/FR (template-parts/policy/page.php)
   ========================================================================== */
.hx-ship { --ship-blue: var(--hx2-blue, #1d4497); --ship-ink: #16202a; --ship-line: #e5e9f2; --ship-mut: #5a6472; color: var(--ship-ink); padding-bottom: 0; }
/* The support band is full-bleed and should meet the footer with no white strip. */
.hx-ship .hx-ship-cta:last-child { margin-bottom: 0; }
.hx-ship-hero { padding: clamp(34px, 5vw, 66px) 0 clamp(26px, 3vw, 38px); background: linear-gradient(160deg, #f6f8fd 0%, #fff 70%); border-bottom: 1px solid var(--ship-line); }
.hx-ship-crumbs { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; font-size: 13px; color: var(--ship-mut); }
.hx-ship-crumbs a { color: var(--ship-blue); text-decoration: none; }
.hx-ship-crumbs a:hover { text-decoration: underline; }
.hx-ship-eyebrow { margin: 0 0 10px; color: var(--ship-blue); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hx-ship-hero h1 { margin: 0 0 12px; font-size: clamp(27px, 3.58vw, 39px); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
.hx-ship-lede { max-width: 640px; margin: 0 0 12px; color: var(--ship-mut); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; }
.hx-ship-updated { margin: 0; font-size: 13px; color: #8a929c; }

.hx-ship-facts { margin-top: clamp(-26px, -2vw, -18px); position: relative; z-index: 1; padding-bottom: clamp(24px, 3vw, 40px); }
.hx-ship-facts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hx-ship-fact { display: flex; gap: 13px; align-items: flex-start; padding: 18px; border: 1px solid var(--ship-line); border-radius: 14px; background: #fff; box-shadow: 0 14px 36px rgba(20, 33, 45, .06); }
.hx-ship-fact__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; color: var(--ship-blue); background: rgba(29, 68, 151, .08); }
.hx-ship-fact__icon svg { width: 23px; height: 23px; stroke-width: 1.85; }
.hx-ship-fact strong { display: block; font-size: 15px; line-height: 1.25; }
.hx-ship-fact span { display: block; margin-top: 3px; color: var(--ship-mut); font-size: 13px; }

.hx-ship-body { padding: clamp(8px, 2vw, 20px) 0 clamp(48px, 6vw, 88px); }
.hx-ship-section-head { margin-bottom: 20px; }
.hx-ship-section-head h2 { margin: 6px 0 0; font-size: clamp(20px, 2.02vw, 25px); font-weight: 700; letter-spacing: -.015em; }

.hx-ship-rates { margin-bottom: clamp(34px, 4vw, 56px); }
.hx-ship-table-wrap { overflow-x: auto; border: 1px solid var(--ship-line); border-radius: 14px; }
.hx-ship-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.hx-ship-table th, .hx-ship-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--ship-line); }
.hx-ship-table thead th { background: #f6f8fd; color: var(--ship-ink); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.hx-ship-table tbody tr:last-child th, .hx-ship-table tbody tr:last-child td { border-bottom: 0; }
.hx-ship-table tbody th { font-weight: 600; color: var(--ship-ink); }
.hx-ship-table tbody td:nth-child(2) { font-weight: 700; }
.hx-ship-note { margin: 12px 2px 0; color: var(--ship-mut); font-size: 13px; line-height: 1.6; }

.hx-ship-layout { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.hx-ship-toc__sticky { position: sticky; top: 96px; }
.hx-ship-toc__title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ship-mut); }
.hx-ship-toc__nav { display: flex; flex-direction: column; border-left: 2px solid var(--ship-line); }
.hx-ship-toc__nav a { padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ship-mut); font-size: 13.5px; line-height: 1.35; text-decoration: none; transition: color .15s, border-color .15s; }
.hx-ship-toc__nav a:hover { color: var(--ship-blue); border-left-color: var(--ship-blue); }
.hx-ship-toc__help { margin-top: 22px; padding: 16px; border-radius: 12px; background: #f6f8fd; }
.hx-ship-toc__help p { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.hx-ship-toc__help a { color: var(--ship-blue); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.hx-ship-toc__help a:hover { text-decoration: underline; }

.hx-ship-item { border: 1px solid var(--ship-line); border-radius: 12px; margin-bottom: 12px; background: #fff; overflow: hidden; }
.hx-ship-item > summary { display: flex; align-items: center; gap: 16px; padding: 17px 20px; list-style: none; cursor: pointer; font-weight: 600; font-size: 16px; color: var(--ship-ink); }
.hx-ship-item > summary::-webkit-details-marker { display: none; }
.hx-ship-item__q { flex: 1 1 auto; }
.hx-ship-item__toggle { flex: 0 0 auto; position: relative; width: 20px; height: 20px; }
.hx-ship-item__toggle::before, .hx-ship-item__toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; border-radius: 2px; background: var(--ship-blue); transform: translate(-50%, -50%); transition: transform .2s ease, opacity .2s ease; }
.hx-ship-item__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.hx-ship-item[open] .hx-ship-item__toggle::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
.hx-ship-item[open] > summary { border-bottom: 1px solid var(--ship-line); }
.hx-ship-item__a { padding: 4px 20px 20px; color: var(--ship-mut); font-size: 15px; line-height: 1.7; }
.hx-ship-item__a p { margin: 12px 0 0; }
.hx-ship-item__a a { color: var(--ship-blue); }

.hx-ship-cta { margin-top: 6px; padding: clamp(34px, 4vw, 56px) 0; background: linear-gradient(155deg, var(--hx-partner-blue-deep, #10245f) 0%, var(--hx2-blue, #1d4497) 100%); color: #fff; }
.hx-ship-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.hx-ship-cta h2 { margin: 6px 0 8px; color: #fff; font-size: clamp(21px, 2.19vw, 26px); font-weight: 700; }
.hx-ship-cta p { margin: 0; color: rgba(255, 255, 255, .85); font-size: 15px; }
.hx-ship-eyebrow--light { color: #bcd0ff; }
.hx-ship-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hx-ship-cta .hx-button--primary { background: #fff; color: var(--hx2-blue, #1d4497); border-color: #fff; }
.hx-ship-cta .hx-button--primary:hover { background: #eef2fb; }
.hx-ship-cta .hx-button--quiet { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.hx-ship-cta .hx-button--quiet:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

@media (max-width: 900px) {
	.hx-ship-facts__grid { grid-template-columns: repeat(2, 1fr); }
	.hx-ship-layout { grid-template-columns: 1fr; }
	.hx-ship-toc { display: none; }
}
@media (max-width: 520px) {
	.hx-ship-facts__grid { grid-template-columns: 1fr; }
	.hx-ship-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   /learn/ guides hub — CPT single + archive (single-guide.php / archive-guide.php)
   Reuses the .hx-ship-* hero/toc primitives; adds article + card styles.
   ========================================================================== */
.hx-learn { --learn-blue: var(--hx2-blue, #1d4497); --learn-ink: #16202a; --learn-line: #e5e9f2; --learn-mut: #5a6472; color: var(--learn-ink); padding-bottom: 0; }
.hx-learn-hero { padding: clamp(34px, 5vw, 64px) 0 clamp(20px, 3vw, 30px); background: linear-gradient(160deg, #f6f8fd 0%, #fff 70%); }
.hx-learn-lede { max-width: 680px; margin: 0 0 12px; color: var(--learn-mut); font-size: clamp(16px, 1.48vw, 19px); line-height: 1.6; }

.hx-learn-media { margin: clamp(6px, 2vw, 20px) auto clamp(20px, 3vw, 36px); }
.hx-learn-media img { display: block; width: 100%; max-height: 460px; object-fit: cover; border-radius: 18px; }

.hx-learn-body { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(30px, 4vw, 60px); align-items: start; padding-bottom: clamp(40px, 5vw, 72px); }
.hx-learn-content { max-width: 760px; font-size: 17px; line-height: 1.75; color: #2a323c; }
.hx-learn-content h2 { margin: 1.9em 0 .5em; font-size: clamp(21px, 2vw, 26px); font-weight: 700; letter-spacing: -.015em; scroll-margin-top: 90px; color: var(--learn-ink); }
.hx-learn-content h3 { margin: 1.5em 0 .4em; font-size: 1.18rem; font-weight: 700; }
.hx-learn-content p { margin: 0 0 1.1em; }
.hx-learn-content ul, .hx-learn-content ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.hx-learn-content li { margin-bottom: .5em; }
.hx-learn-content a { color: var(--learn-blue); }
.hx-learn-content > p:first-of-type { font-size: 1.12em; color: #1c2430; }
.hx-learn-content .hx-key-takeaway { margin: 0 0 1.6em; padding: 18px 22px; border-left: 4px solid var(--learn-blue); border-radius: 0 12px 12px 0; background: #f2f6fe; font-size: 1.02em; }
.hx-learn-content .hx-key-takeaway strong { color: var(--learn-ink); }
.hx-learn-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: .96rem; }
.hx-learn-content th, .hx-learn-content td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--learn-line); }
.hx-learn-content thead th { background: #f6f8fd; font-size: .85rem; }
.hx-learn-content details { margin: 0 0 12px; padding: 0; border: 1px solid var(--learn-line); border-radius: 12px; background: #fff; }
.hx-learn-content details > summary { padding: 15px 18px; font-weight: 600; cursor: pointer; list-style: none; }
.hx-learn-content details > summary::-webkit-details-marker { display: none; }
.hx-learn-content details[open] > summary { border-bottom: 1px solid var(--learn-line); }
.hx-learn-content details > *:not(summary) { padding: 0 18px; }
.hx-learn-content details > p { padding: 14px 18px; margin: 0; color: var(--learn-mut); }

.hx-learn-products, .hx-learn-recipes { padding: clamp(34px, 4vw, 56px) 0; border-top: 1px solid var(--learn-line); }
.hx-learn-products { background: #f7f9fc; }
.hx-learn-products__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hx-learn-product { padding: 18px; border: 1px solid var(--learn-line); border-radius: 16px; background: #fff; text-align: center; }
.hx-learn-product__media img { width: 100%; max-width: 190px; height: auto; margin: 0 auto; }
.hx-learn-product h3 { margin: 10px 0 4px; font-size: 15px; }
.hx-learn-product h3 a { color: var(--learn-ink); text-decoration: none; }
.hx-learn-product__price { margin: 0 0 12px; font-weight: 700; color: var(--learn-ink); }
.hx-learn-product__price del { color: #9aa2ac; font-weight: 400; }
.hx-learn-product__btn { width: 100%; }
.hx-learn-recipes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.hx-learn-archive__body { padding: clamp(24px, 3vw, 44px) 0 clamp(48px, 6vw, 80px); }
.hx-learn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.hx-learn-card { display: flex; flex-direction: column; border: 1px solid var(--learn-line); border-radius: 16px; overflow: hidden; background: #fff; transition: box-shadow .2s ease, transform .2s ease; }
.hx-learn-card:hover { box-shadow: 0 18px 44px rgba(20, 33, 45, .1); transform: translateY(-3px); }
.hx-learn-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eef1f7; }
.hx-learn-card__media img { width: 100%; height: 100%; object-fit: cover; }
.hx-learn-card__ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #e8eef9, #f4f7fc); }
.hx-learn-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.hx-learn-card__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; }
.hx-learn-card__title a { color: var(--learn-ink); text-decoration: none; }
.hx-learn-card__title a:hover { color: var(--learn-blue); }
.hx-learn-card__ex { margin: 0; color: var(--learn-mut); font-size: 14px; line-height: 1.55; }
.hx-learn-card__more { margin-top: auto; color: var(--learn-blue); font-size: 14px; font-weight: 600; text-decoration: none; }

@media (max-width: 900px) {
	.hx-learn-body { grid-template-columns: 1fr; }
	.hx-learn-toc { display: none; }
	.hx-learn-products__grid, .hx-learn-recipes__grid, .hx-learn-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.hx-learn-products__grid, .hx-learn-recipes__grid, .hx-learn-grid { grid-template-columns: 1fr; }
}

/* ========================================================================== 
   Blog landing — editorial, useful and distinctly Helixx
   ========================================================================== */

.hx-blog {
	--blog-navy: #10295f;
	--blog-blue: #1d4497;
	--blog-ink: #15213a;
	--blog-muted: #647087;
	--blog-line: #dfe5ef;
	--blog-cream: #f7f3e9;
	background: #fff;
	color: var(--blog-ink);
}

.hx-blog-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 7vw, 96px) 0;
	background:
		radial-gradient(circle at 13% 5%, rgba(75, 125, 225, .44), transparent 30%),
		radial-gradient(circle at 91% 100%, rgba(241, 151, 65, .18), transparent 31%),
		var(--blog-navy);
	color: #fff;
}

.hx-blog-hero::before {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 54px 54px;
	content: "";
	-webkit-mask-image: linear-gradient(to right, #000, transparent 78%);
	mask-image: linear-gradient(to right, #000, transparent 78%);
}

.hx-blog-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(480px, 1.18fr);
	align-items: center;
	gap: clamp(38px, 6vw, 90px);
}

.hx-blog-kicker,
.hx-blog-feature-label {
	margin: 0 0 12px;
	color: #f2a058;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .16em;
	line-height: 1.3;
	text-transform: uppercase;
}

.hx-blog-hero h1 {
	max-width: 690px;
	margin: 0;
	color: #fff;
	font-size: clamp(35px, 3.84vw, 54px);
	font-weight: 750;
	letter-spacing: -.052em;
	line-height: .98;
}

.hx-blog-hero__lede {
	max-width: 600px;
	margin: 24px 0 30px;
	color: rgba(255,255,255,.76);
	font-size: clamp(17px, 1.46vw, 20px);
	line-height: 1.65;
}

.hx-blog-search {
	display: flex;
	max-width: 560px;
	padding: 5px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 14px;
	background: rgba(255,255,255,.1);
	box-shadow: 0 16px 44px rgba(0,0,0,.13);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.hx-blog-search input[type="search"] {
	min-width: 0;
	flex: 1;
	padding: 12px 14px;
	border: 0;
	outline: 0;
	background: transparent;
	color: #fff;
	font-size: 14px;
}

.hx-blog-search input[type="search"]::placeholder { color: rgba(255,255,255,.6); }

.hx-blog-search button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px;
	border: 0;
	border-radius: 10px;
	background: #fff;
	color: var(--blog-navy);
	font-size: 13px;
	font-weight: 750;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.hx-blog-search button:hover { background: #f7d8bc; transform: translateY(-1px); }

.hx-blog-feature-label { margin-left: 2px; color: rgba(255,255,255,.65); }

.hx-blog-card {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--blog-line);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 5px 22px rgba(18, 38, 77, .06);
	transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.hx-blog-card:hover {
	border-color: #c6d1e4;
	box-shadow: 0 20px 48px rgba(18, 38, 77, .13);
	transform: translateY(-5px);
}

.hx-blog-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: #e9eef7;
}

.hx-blog-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s cubic-bezier(.2,.75,.25,1);
}

.hx-blog-card:hover .hx-blog-card__media img { transform: scale(1.045); }

.hx-blog-card__placeholder {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	background:
		radial-gradient(circle at 76% 20%, rgba(243,151,66,.65), transparent 25%),
		linear-gradient(135deg, #163477, #2659bc);
}

.hx-blog-card__placeholder span {
	padding: 9px 13px;
	border: 1px solid rgba(255,255,255,.4);
	border-radius: 999px;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.hx-blog-card__body {
	display: flex;
	min-height: 250px;
	flex: 1;
	flex-direction: column;
	padding: 23px 24px 21px;
}

.hx-blog-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 13px;
	color: var(--blog-muted);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .035em;
}

.hx-blog-card__topic {
	position: relative;
	z-index: 2;
	color: var(--blog-blue);
	font-weight: 800;
	letter-spacing: .08em;
	text-decoration: none;
	text-transform: uppercase;
}

.hx-blog-card__topic:hover { text-decoration: underline; text-underline-offset: 3px; }

.hx-blog-card__title {
	margin: 0;
	font-size: clamp(18px, 1.38vw, 21px);
	font-weight: 750;
	letter-spacing: -.025em;
	line-height: 1.25;
}

.hx-blog-card__title a { color: var(--blog-ink); text-decoration: none; }
.hx-blog-card__title a::after { position: absolute; inset: 0; content: ""; }
.hx-blog-card__title a:focus-visible::after { outline: 3px solid #f2a058; outline-offset: -4px; }

.hx-blog-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 12px 0 22px;
	color: var(--blog-muted);
	font-size: 14px;
	line-height: 1.65;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.hx-blog-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #edf0f5;
	color: #818a9a;
	font-size: 11px;
}

.hx-blog-card__read {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--blog-blue);
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
}

.hx-blog-card__read span { font-size: 17px; transition: transform .2s ease; }
.hx-blog-card:hover .hx-blog-card__read span { transform: translateX(4px); }

.hx-blog-card--featured {
	display: grid;
	grid-template-columns: 1.06fr .94fr;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 28px 70px rgba(0,0,0,.26);
	color: var(--blog-ink);
}

.hx-blog-card--featured .hx-blog-card__media { height: 100%; aspect-ratio: auto; }
.hx-blog-card--featured .hx-blog-card__body { min-height: 360px; padding: 27px; }
.hx-blog-card--featured .hx-blog-card__title { font-size: clamp(20px, 1.82vw, 26px); }
.hx-blog-card--featured .hx-blog-card__excerpt { -webkit-line-clamp: 4; }

.hx-blog-hero__page {
	padding: 36px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 22px;
	background: rgba(255,255,255,.08);
}

.hx-blog-hero__page span { color: #f2a058; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.hx-blog-hero__page p { max-width: 430px; margin: 14px 0 0; color: rgba(255,255,255,.78); font-size: 20px; line-height: 1.55; }

.hx-blog-topics {
	position: relative;
	z-index: 3;
	border-bottom: 1px solid var(--blog-line);
	background: rgba(255,255,255,.96);
}

.hx-blog-topics__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	padding-top: 15px;
	padding-bottom: 15px;
	scrollbar-width: none;
}

.hx-blog-topics__inner::-webkit-scrollbar { display: none; }
.hx-blog-topics__label { margin-right: 7px; color: var(--blog-muted); font-size: 12px; font-weight: 750; white-space: nowrap; }

.hx-blog-topics a {
	padding: 8px 13px;
	border: 1px solid transparent;
	border-radius: 999px;
	color: #4d586e;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.hx-blog-topics a:hover,
.hx-blog-topics a.is-current { border-color: #d9e1ef; background: #eff4fc; color: var(--blog-blue); }

.hx-blog-feed { padding: clamp(62px, 7vw, 100px) 0; }

.hx-blog-section-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: clamp(28px, 4vw, 46px);
}

.hx-blog-section-head .hx-blog-kicker { color: var(--blog-blue); }

.hx-blog-section-head h2 {
	margin: 0;
	color: var(--blog-ink);
	font-size: clamp(28px, 3.19vw, 42px);
	font-weight: 750;
	letter-spacing: -.045em;
	line-height: 1.05;
}

.hx-blog-section-head > p {
	max-width: 440px;
	margin: 0;
	color: var(--blog-muted);
	font-size: 15px;
	line-height: 1.65;
}

.hx-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

.hx-blog .pressmart-pagination { margin-top: 50px; }
.hx-blog .pressmart-pagination ul { display: flex; justify-content: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
.hx-blog .pressmart-pagination a,
.hx-blog .pressmart-pagination span {
	display: grid;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	place-items: center;
	border: 1px solid var(--blog-line);
	border-radius: 10px;
	color: var(--blog-ink);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.hx-blog .pressmart-pagination a:hover,
.hx-blog .pressmart-pagination .current { border-color: var(--blog-blue); background: var(--blog-blue); color: #fff; }

.hx-blog-paths {
	padding: clamp(58px, 7vw, 96px) 0;
	background: #f4f7fb;
}

.hx-blog-paths__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.hx-blog-path {
	position: relative;
	display: flex;
	min-height: 235px;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	padding: 28px;
	border-radius: 20px;
	color: var(--blog-ink);
	text-decoration: none;
	transition: box-shadow .25s ease, transform .25s ease;
}

.hx-blog-path::after {
	position: absolute;
	top: -34px;
	right: -34px;
	width: 132px;
	height: 132px;
	border: 24px solid currentColor;
	border-radius: 50%;
	content: "";
	opacity: .08;
	transition: transform .35s ease;
}

.hx-blog-path:hover { box-shadow: 0 18px 44px rgba(18,38,77,.15); transform: translateY(-4px); }
.hx-blog-path:hover::after { transform: scale(1.15) rotate(8deg); }
.hx-blog-path--blue { background: var(--blog-blue); color: #fff; }
.hx-blog-path--cream { background: #f0e9da; }
.hx-blog-path--orange { background: #ef9d56; color: #18233b; }
.hx-blog-path__number { position: absolute; top: 25px; left: 28px; font-size: 12px; font-weight: 800; letter-spacing: .15em; opacity: .65; }
.hx-blog-path strong { display: block; max-width: 280px; margin-bottom: 11px; font-size: clamp(20px, 1.85vw, 24px); line-height: 1.18; }
.hx-blog-path > span:last-child { font-size: 13px; font-weight: 700; opacity: .82; }

.hx-blog.is-reveal-ready [data-hx-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.25,1);
}

.hx-blog.is-reveal-ready [data-hx-reveal].is-visible { opacity: 1; transform: none; }
.hx-blog-grid [data-hx-reveal]:nth-child(3n + 2) { transition-delay: .07s; }
.hx-blog-grid [data-hx-reveal]:nth-child(3n + 3) { transition-delay: .14s; }
.hx-blog-paths__grid [data-hx-reveal]:nth-child(2) { transition-delay: .08s; }
.hx-blog-paths__grid [data-hx-reveal]:nth-child(3) { transition-delay: .16s; }

@media (max-width: 1080px) {
	.hx-blog-hero__grid { grid-template-columns: minmax(0, .8fr) minmax(440px, 1.2fr); gap: 36px; }
	.hx-blog-card--featured { grid-template-columns: 1fr; }
	.hx-blog-card--featured .hx-blog-card__media { aspect-ratio: 16 / 8; }
	.hx-blog-card--featured .hx-blog-card__body { min-height: 0; }
	.hx-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hx-blog-grid [data-hx-reveal]:nth-child(n) { transition-delay: 0s; }
	.hx-blog-grid [data-hx-reveal]:nth-child(even) { transition-delay: .07s; }
}

@media (max-width: 780px) {
	.hx-blog-hero__grid { grid-template-columns: 1fr; }
	.hx-blog-hero__intro { max-width: 650px; }
	.hx-blog-feature-label { margin-top: 8px; }
	.hx-blog-card--featured { grid-template-columns: 1.05fr .95fr; }
	.hx-blog-section-head { align-items: start; flex-direction: column; gap: 16px; }
	.hx-blog-paths__grid { grid-template-columns: 1fr; }
	.hx-blog-path { min-height: 190px; }
	.hx-blog-paths__grid [data-hx-reveal]:nth-child(n) { transition-delay: 0s; }
}

@media (max-width: 580px) {
	.hx-blog-hero { padding: 48px 0 54px; }
	.hx-blog-hero h1 { font-size: clamp(34px, 10.09vw, 45px); }
	.hx-blog-search button { padding-right: 14px; padding-left: 14px; }
	.hx-blog-search button span { display: none; }
	.hx-blog-card--featured { grid-template-columns: 1fr; }
	.hx-blog-card--featured .hx-blog-card__media { aspect-ratio: 16 / 9; }
	.hx-blog-card--featured .hx-blog-card__body { padding: 23px; }
	.hx-blog-grid { grid-template-columns: 1fr; }
	.hx-blog-grid [data-hx-reveal]:nth-child(n) { transition-delay: 0s; }
	.hx-blog-card__body { min-height: 225px; }
	.hx-blog-topics__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hx-blog *,
	.hx-blog *::before,
	.hx-blog *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
	.hx-blog.is-reveal-ready [data-hx-reveal] { opacity: 1; transform: none; }
}

/* ========================================================================== 
   Ambassador application — focused hero + progressive multi-step form
   ========================================================================== */

.hx-partner--ambassador .hx-partner-actions { margin: 28px 0 0; }

.hx-partner--ambassador .hx-button--primary {
	border-color: var(--hx-partner-blue);
	color: #fff;
	background: var(--hx-partner-blue);
}

.hx-partner--ambassador .hx-button--primary:hover,
.hx-partner--ambassador .hx-button--primary:focus-visible {
	border-color: var(--hx-partner-blue-deep);
	color: #fff;
	background: var(--hx-partner-blue-deep);
}

.hx-ambassador-overview {
	position: relative;
	overflow: hidden;
	padding: clamp(30px, 4.2vw, 50px);
	border-radius: 10px 60px 10px 10px;
	box-shadow: 0 28px 70px rgba(17, 45, 108, .22);
	color: #fff;
	background:
		radial-gradient(circle at 105% -5%, rgba(255,255,255,.18), transparent 31%),
		linear-gradient(145deg, #173b86, var(--hx-partner-blue-deep));
}

.hx-ambassador-overview .hx-partner-eyebrow { margin-bottom: 12px; color: #bed0fb; }

.hx-ambassador-overview h2 {
	margin: 0 0 30px;
	color: #fff;
	font-size: clamp(26px, 2.92vw, 36px);
	letter-spacing: -.035em;
}

.hx-ambassador-overview__items { display: grid; gap: 0; }

.hx-ambassador-overview__items > div {
	padding: 19px 0;
	border-top: 1px solid rgba(255,255,255,.15);
}

.hx-ambassador-overview__items p { margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.55; }
.hx-ambassador-overview__items strong { display: block; margin-bottom: 4px; color: #fff; font-size: 15px; }

.hx-ambassador-apply {
	padding: clamp(66px, 8vw, 108px) 0;
	scroll-margin-top: 90px;
	background: #f3f6fa;
}

.hx-ambassador-apply__layout {
	display: grid;
	grid-template-columns: minmax(260px, .36fr) minmax(0, .64fr);
	align-items: start;
	gap: clamp(38px, 7vw, 92px);
	max-width: 1200px;
}

.hx-ambassador-apply__intro {
	position: sticky;
	top: 115px;
}

.hx-ambassador-apply__intro h2 {
	margin: 0 0 18px;
	font-size: clamp(28px, 3.22vw, 40px);
	letter-spacing: -.04em;
}

.hx-ambassador-apply__intro > p:not(.hx-ambassador-apply__privacy) {
	margin: 0;
	color: #5a6673;
	font-size: 16px;
	line-height: 1.7;
}

.hx-ambassador-apply__privacy {
	position: relative;
	margin: 25px 0 0;
	padding: 17px 18px 17px 43px;
	border: 1px solid #dce3ed;
	border-radius: 9px;
	color: #66717e;
	background: rgba(255,255,255,.65);
	font-size: 12px;
	line-height: 1.55 !important;
}

.hx-ambassador-apply__privacy::before {
	position: absolute;
	top: 17px;
	left: 17px;
	content: "\2713";
	color: var(--hx-partner-blue);
	font-weight: 800;
}

.hx-ambassador-apply .hx-partner-form {
	padding: clamp(25px, 4vw, 44px);
	border: 0;
	border-radius: 20px;
	box-shadow: 0 24px 65px rgba(20, 39, 73, .11);
}

.hx-ambassador-apply .hx-partner-form__head {
	margin-bottom: 24px;
	padding-bottom: 22px;
	border-bottom: 1px solid #e5e9f0;
}

.hx-ambassador-apply .hx-partner-form__head .hx-partner-eyebrow { margin-bottom: 8px; }
.hx-ambassador-apply .hx-partner-form__head h2 { font-size: clamp(23px, 2.65vw, 30px); }
.hx-ambassador-apply .hx-partner-form__head p { font-size: 13px; }

.hx-partner-form--ambassador .woocommerce,
.hx-partner-form--ambassador .woocommerce-form-register { margin: 0; }

.hx-partner-form--ambassador .woocommerce-form-register {
	padding: 0;
	border: 0;
	background: transparent;
}

.hx-ambassador-progress {
	--hx-ambassador-progress: 0;
	position: relative;
	margin: 0 0 34px;
}

.hx-ambassador-progress ol {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-ambassador-progress::before,
.hx-ambassador-progress__track {
	position: absolute;
	top: 17px;
	left: 16.666%;
	width: 66.666%;
	height: 2px;
	content: "";
}

.hx-ambassador-progress::before { background: #dbe1ea; }

.hx-ambassador-progress__track {
	width: 66.666%;
	background: var(--hx-partner-blue);
	transform: scaleX(var(--hx-ambassador-progress));
	transform-origin: left center;
	transition: transform .35s ease;
}

.hx-partner-form--ambassador .hx-ambassador-progress button {
	display: flex;
	width: 100%;
	min-height: 0;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0 4px;
	border: 0;
	box-shadow: none;
	color: #7a8491;
	background: transparent;
	cursor: pointer;
}

.hx-partner-form--ambassador .hx-ambassador-progress button:disabled { cursor: default; opacity: 1; }

.hx-ambassador-progress button > span {
	display: grid;
	width: 35px;
	height: 35px;
	border: 2px solid #dbe1ea;
	border-radius: 50%;
	color: #697584;
	background: #fff;
	font-size: 12px;
	font-weight: 800;
	place-items: center;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.hx-ambassador-progress button small { font-size: 11px; font-weight: 700; line-height: 1.35; }

.hx-ambassador-progress button[aria-current="true"] { color: var(--hx-partner-blue); }
.hx-ambassador-progress button[aria-current="true"] > span { border-color: var(--hx-partner-blue); color: #fff; background: var(--hx-partner-blue); }
.hx-ambassador-progress .is-complete button > span { border-color: var(--hx-partner-blue); color: var(--hx-partner-blue); }

.hx-ambassador-step {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.hx-ambassador-step[hidden] { display: none; }

.hx-ambassador-step__head { margin-bottom: 24px; outline: 0; }
.hx-ambassador-step__head > span { display: block; margin-bottom: 7px; color: var(--hx-partner-blue); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hx-ambassador-step__head h3 { margin: 0 0 7px; font-size: clamp(21px, 2.44vw, 26px); letter-spacing: -.025em; }
.hx-ambassador-step__head p { margin: 0; color: #697481; font-size: 13px; line-height: 1.55; }

.hx-ambassador-step__body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.hx-ambassador-step[data-step="1"] .hx-ambassador-step__body { grid-template-columns: 1fr; gap: 4px; }

.hx-partner-form--ambassador .hx-ambassador-step__body > .form-row {
	min-width: 0;
	margin: 0;
}

.hx-partner-form--ambassador .hx-ambassador-step__body > .form-row:has(textarea) { grid-column: 1 / -1; }

.hx-partner-form--ambassador .form-row > label:first-child {
	margin: 0 0 8px;
	color: #263342;
	font-size: 12px;
	font-weight: 750;
}

.hx-partner-form--ambassador .required { color: #bd3b35; text-decoration: none; }

.hx-partner-form--ambassador input[type="text"],
.hx-partner-form--ambassador input[type="email"],
.hx-partner-form--ambassador input[type="password"],
.hx-partner-form--ambassador input[type="url"],
.hx-partner-form--ambassador textarea,
.hx-partner-form--ambassador select {
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	border: 1px solid #cbd4df;
	border-radius: 9px;
	box-shadow: none;
	color: #182536;
	background: #fbfcfe;
	font-size: 14px;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.hx-partner-form--ambassador textarea { min-height: 105px; resize: vertical; }

.hx-partner-form--ambassador input:focus,
.hx-partner-form--ambassador textarea:focus,
.hx-partner-form--ambassador select:focus {
	border-color: var(--hx-partner-blue);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(29,68,151,.11);
	background: #fff;
}

.hx-partner-form--ambassador .form-row:has(input[type="radio"]) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
	padding: 18px 0;
	border-bottom: 1px solid #e9edf2;
}

.hx-partner-form--ambassador .form-row:has(input[type="radio"]) > label:first-child,
.hx-partner-form--ambassador .form-row:has(input[type="radio"]) > .description { grid-column: 1 / -1; }

.hx-partner-form--ambassador input[type="radio"] {
	position: absolute;
	width: 1px !important;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.hx-partner-form--ambassador label.radio {
	display: flex;
	min-height: 47px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid #cfd7e1;
	border-radius: 9px;
	color: #4a5664;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.hx-partner-form--ambassador input[type="radio"]:checked + label.radio {
	border-color: var(--hx-partner-blue);
	box-shadow: inset 0 0 0 1px var(--hx-partner-blue);
	color: var(--hx-partner-blue);
	background: #eef4ff;
}

.hx-partner-form--ambassador input[type="radio"]:focus-visible + label.radio { outline: 3px solid rgba(29,68,151,.17); outline-offset: 2px; }
.hx-partner-form--ambassador .description { margin: -2px 0 2px; color: #717c88; line-height: 1.5; }

.hx-ambassador-step__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 11px;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid #e5e9ef;
}

.hx-partner-form--ambassador .hx-ambassador-step__actions > button {
	width: auto;
	min-height: 48px;
	padding: 11px 20px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 750;
}

.hx-partner-form--ambassador .hx-ambassador-step__back {
	margin-right: auto;
	border: 1px solid #d3dae3;
	color: #3d4a59;
	background: #fff;
}

.hx-partner-form--ambassador .hx-ambassador-step__back:hover,
.hx-partner-form--ambassador .hx-ambassador-step__back:focus-visible { border-color: #9ca9b8; color: var(--hx-partner-blue); background: #f7f9fc; }

.hx-partner-form--ambassador .hx-ambassador-step__next { border: 1px solid var(--hx-partner-blue); color: #fff; background: var(--hx-partner-blue); }
.hx-partner-form--ambassador .hx-ambassador-step__next:hover,
.hx-partner-form--ambassador .hx-ambassador-step__next:focus-visible { background: var(--hx-partner-blue-deep); }

.hx-ambassador-step__submit { flex: 0 1 300px; margin: 0 !important; }
.hx-partner-form--ambassador .hx-ambassador-step__submit button { min-height: 50px; border-radius: 9px; font-size: 13px; font-weight: 750; }

@media (max-width: 900px) {
	.hx-ambassador-apply__layout { grid-template-columns: 1fr; }
	.hx-ambassador-apply__intro { position: static; max-width: 700px; }
	.hx-ambassador-apply__intro .hx-application-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.hx-ambassador-apply__intro .hx-application-steps li { display: block; padding: 0; }
	.hx-ambassador-apply__intro .hx-application-steps li::before,
	.hx-ambassador-apply__intro .hx-application-steps li::after { display: none; }
	.hx-ambassador-apply__intro .hx-application-steps strong,
	.hx-ambassador-apply__intro .hx-application-steps span { display: block; }
}

@media (max-width: 640px) {
	.hx-partner--ambassador .hx-partner-actions { align-items: stretch; flex-direction: column; }
	.hx-partner--ambassador .hx-partner-actions .hx-button { width: 100%; }
	.hx-ambassador-overview { border-radius: 10px 42px 10px 10px; }
	.hx-ambassador-apply__intro .hx-application-steps { grid-template-columns: 1fr; gap: 12px; }
	.hx-ambassador-apply__intro .hx-application-steps li { padding-left: 17px; border-left: 2px solid #d8e0ef; }
	.hx-ambassador-apply .hx-partner-form { padding: 23px 18px; border-radius: 14px; }
	.hx-ambassador-progress button small { display: none; }
	.hx-ambassador-progress { margin-bottom: 27px; }
	.hx-ambassador-step__body { grid-template-columns: 1fr; }
	.hx-partner-form--ambassador .hx-ambassador-step__body > .form-row:has(textarea) { grid-column: auto; }
	.hx-ambassador-step__actions { align-items: stretch; flex-direction: column-reverse; }
	.hx-partner-form--ambassador .hx-ambassador-step__actions > button,
	.hx-ambassador-step__submit { width: 100%; flex-basis: auto; }
	.hx-partner-form--ambassador .hx-ambassador-step__back { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hx-ambassador-progress__track,
	.hx-partner-form--ambassador * { transition-duration: .01ms !important; }
}

/* ========================================================================== 
   Recipe finder
   ========================================================================== */

.hx-recipe-finder {
	padding: clamp(27px, 4vw, 42px);
	border: 1px solid rgba(29, 68, 151, .16);
	border-radius: 26px;
	box-shadow: 0 24px 65px rgba(22, 39, 57, .11);
	background: rgba(255,255,255,.9);
}

.hx-recipe-finder > .hx-guide-eyebrow { margin-bottom: 11px; }

.hx-recipe-finder fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.hx-recipe-finder legend {
	max-width: 470px;
	margin: 0;
	padding: 0;
	color: var(--hx-guide-ink);
	font-size: clamp(22px, 2.38vw, 30px);
	font-weight: 750;
	letter-spacing: -.035em;
	line-height: 1.1;
}

.hx-recipe-finder fieldset > p {
	margin: 12px 0 20px;
	color: #66727e;
	font-size: 13px;
	line-height: 1.55;
}

.hx-recipe-finder__choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
}

.hx-recipe-finder__choices label { position: relative; min-width: 0; cursor: pointer; }

.hx-recipe-finder__choices input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.hx-recipe-finder__choices label > span {
	display: flex;
	min-height: 48px;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 12px 11px 15px;
	border: 1px solid #d6dde6;
	border-radius: 11px;
	color: #3f4b59;
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease, color .18s ease, background-color .18s ease, transform .18s ease;
}

.hx-recipe-finder__choices strong { min-width: 0; font-size: 13px; line-height: 1.25; }

.hx-recipe-finder__choices small {
	display: grid;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 999px;
	color: #687585;
	background: #edf1f6;
	font-size: 10px;
	font-weight: 800;
	place-items: center;
}

.hx-recipe-finder__choices label:hover > span { border-color: #aebbd0; transform: translateY(-1px); }

.hx-recipe-finder__choices input:checked + span {
	border-color: var(--hx-guide-blue);
	box-shadow: inset 0 0 0 1px var(--hx-guide-blue);
	color: var(--hx-guide-blue);
	background: #eff4fd;
}

.hx-recipe-finder__choices input:checked + span small { color: #fff; background: var(--hx-guide-blue); }
.hx-recipe-finder__choices input:focus-visible + span { outline: 3px solid rgba(29,68,151,.17); outline-offset: 2px; }

.hx-recipe-finder__submit {
	width: 100%;
	min-height: 48px;
	margin-top: 13px;
	border: 0;
	border-radius: 10px;
	color: #fff;
	background: var(--hx-guide-blue);
	font-size: 13px;
	font-weight: 750;
	cursor: pointer;
}

.hx-recipe-finder.is-enhanced .hx-recipe-finder__submit { display: none; }

.hx-recipe-finder__status {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	color: #586573;
	font-size: 12px;
	font-weight: 650;
}

.hx-recipe-finder__status::before {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4d8b59;
	content: "";
}

.hx-recipes-archive[data-active-filter="sweet"] .hx-recipe-filter-item:not(.hx-recipe-trait--sweet),
.hx-recipes-archive[data-active-filter="savoury"] .hx-recipe-filter-item:not(.hx-recipe-trait--savoury),
.hx-recipes-archive[data-active-filter="fruity"] .hx-recipe-filter-item:not(.hx-recipe-trait--fruity),
.hx-recipes-archive[data-active-filter="make-ahead"] .hx-recipe-filter-item:not(.hx-recipe-trait--make-ahead),
.hx-recipes-archive[data-active-filter="quick"] .hx-recipe-filter-item:not(.hx-recipe-trait--quick) { display: none; }

.hx-recipe-filter-empty {
	margin: 38px 0 0;
	padding: 28px;
	border: 1px solid var(--hx-guide-line);
	border-radius: 14px;
	color: #5e6974;
	background: #f7f9fc;
	text-align: center;
}

@media (max-width: 900px) {
	.hx-recipe-finder { max-width: 620px; }
}

@media (max-width: 440px) {
	.hx-recipe-finder__choices { grid-template-columns: 1fr; }
	.hx-recipe-finder { padding: 24px 19px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.hx-recipe-finder__choices label > span { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Wholesale page (page-wholesale-distribution.php)
   Multi-step CF7 application, margin table, retailer-fit grid and process band.
   The D-LIV-R tab component this replaced was removed along with its styles.
   ========================================================================== */

/* --- Multi-step application ---------------------------------------------- */
.hx-wsform__step[hidden] {
	display: none;
}

.hx-wsform__nav {
	--hx-wsform-progress: 0;
	--hx-wsform-steps: 4;
	position: relative;
	margin: 0 0 26px;
}

.hx-wsform__nav ol {
	position: relative;
	z-index: 1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 4px;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* The rail spans crumb centre to crumb centre, hence the half-column inset. */
.hx-wsform__nav::before,
.hx-wsform__track {
	position: absolute;
	top: 16px;
	right: calc(50% / var(--hx-wsform-steps));
	left: calc(50% / var(--hx-wsform-steps));
	height: 2px;
	content: "";
}

.hx-wsform__nav::before {
	background: #dde3ea;
}

.hx-wsform__track {
	background: var(--hx-partner-blue);
	transform: scaleX(var(--hx-wsform-progress));
	transform-origin: left center;
	transition: transform .3s ease;
}

.hx-partner-form--wholesale .hx-wsform__crumb {
	display: grid;
	justify-items: center;
	gap: 7px;
	width: 100%;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #7a8695;
	background: transparent;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
}

.hx-partner-form--wholesale .hx-wsform__crumb:hover,
.hx-partner-form--wholesale .hx-wsform__crumb:focus {
	background: transparent;
}

.hx-partner-form--wholesale .hx-wsform__crumb:disabled {
	cursor: default;
	opacity: 1;
}

.hx-wsform__crumb > span {
	display: grid;
	width: 34px;
	height: 34px;
	border: 2px solid #dde3ea;
	border-radius: 50%;
	color: #7a8695;
	background: #fff;
	font-size: 13px;
	place-items: center;
}

.is-current .hx-wsform__crumb {
	color: var(--hx-partner-blue);
}

.is-current .hx-wsform__crumb > span {
	border-color: var(--hx-partner-blue);
	color: #fff;
	background: var(--hx-partner-blue);
}

.is-complete .hx-wsform__crumb > span {
	border-color: var(--hx-partner-blue);
	color: var(--hx-partner-blue);
}

.hx-wsform__head {
	margin-bottom: 20px;
	outline: 0;
}

.hx-wsform__head > span {
	display: block;
	margin-bottom: 6px;
	color: var(--hx-partner-blue);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.hx-wsform__head h3 {
	margin: 0 0 6px;
	font-size: clamp(20px, 2.05vw, 23px);
	letter-spacing: -.02em;
	line-height: 1.2;
}

.hx-wsform__head p {
	margin: 0;
	color: #6a7581;
	font-size: 13px;
	line-height: 1.55;
}

.hx-wsform__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}

.hx-partner-form--wholesale .hx-wsform__actions > button {
	width: auto;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 700;
}

.hx-partner-form--wholesale .hx-wsform__back {
	border: 1px solid #cfd7df;
	color: #46525f;
	background: #fff;
}

.hx-partner-form--wholesale .hx-wsform__back:hover,
.hx-partner-form--wholesale .hx-wsform__back:focus-visible {
	border-color: #9ca9b8;
	color: var(--hx-partner-blue);
	background: #f7f9fc;
}

.hx-partner-form--wholesale .hx-wsform__next {
	margin-left: auto;
	border: 1px solid var(--hx-partner-blue);
	color: #fff;
	background: var(--hx-partner-blue);
}

.hx-partner-form--wholesale .hx-wsform__next:hover,
.hx-partner-form--wholesale .hx-wsform__next:focus-visible {
	background: var(--hx-partner-blue-deep);
}

/* Nothing to go back to on step one, so the only control takes the full width. */
.hx-partner-form--wholesale .hx-wsform__next:only-child {
	flex: 1 1 auto;
}

.hx-wsform__actions .hx-wholesale-form__submit {
	flex: 1 1 240px;
	margin: 0;
}

.hx-wsform.is-sent .hx-wsform__nav,
.hx-wsform.is-sent .hx-wsform__step {
	display: none;
}

.hx-wholesale-form__grid > .hx-wholesale-form__wide {
	grid-column: 1 / -1;
}

/* --- Contact Form 7 states ------------------------------------------------ */

/* Both of these are normally handled by CF7's own stylesheet. Repeat them here
   so the card does not sprout an empty bordered box if that stylesheet is ever
   dequeued for performance. */
.hx-partner-form--wholesale .hidden-fields-container {
	display: none;
}

.hx-partner-form--wholesale .wpcf7-response-output {
	display: none;
}

.hx-partner-form--wholesale form.sent .wpcf7-response-output,
.hx-partner-form--wholesale form.failed .wpcf7-response-output,
.hx-partner-form--wholesale form.aborted .wpcf7-response-output,
.hx-partner-form--wholesale form.invalid .wpcf7-response-output,
.hx-partner-form--wholesale form.unaccepted .wpcf7-response-output,
.hx-partner-form--wholesale form.payment-required .wpcf7-response-output,
.hx-partner-form--wholesale form.spam .wpcf7-response-output {
	display: block;
}

.hx-partner-form--wholesale .wpcf7-not-valid {
	border-color: #bd3b35;
}

.hx-partner-form--wholesale .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #bd3b35;
	font-size: 12px;
	font-weight: 600;
}

.hx-partner-form--wholesale .wpcf7-response-output {
	padding: 14px 16px;
	margin: 18px 0 0;
	border: 1px solid #cfd7df;
	border-radius: 8px;
	color: #35404c;
	font-size: 13.5px;
	line-height: 1.55;
}

/* --- Margin table --------------------------------------------------------- */
.hx-margin-panel {
	display: grid;
	gap: 18px;
	padding: clamp(22px, 3vw, 34px);
	border: 1px solid var(--hx-partner-line);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(20, 33, 45, .07);
	background: #fff;
}

.hx-margin-table__wrap {
	overflow-x: auto;
}

.hx-margin-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.hx-margin-table th,
.hx-margin-table td {
	padding: 14px 16px;
	border-bottom: 1px solid #e7ecf2;
	text-align: right;
	white-space: nowrap;
}

.hx-margin-table thead th {
	color: #6a7581;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.hx-margin-table tbody th {
	color: var(--hx-partner-ink);
	font-weight: 600;
	text-align: left;
	white-space: normal;
}

.hx-margin-table tbody tr:last-child th,
.hx-margin-table tbody tr:last-child td {
	border-bottom: 0;
}

.hx-margin-table .is-highlight th,
.hx-margin-table .is-highlight td {
	background: #f2f6ff;
}

.hx-margin-table .is-highlight td {
	color: var(--hx-partner-blue);
	font-size: 17px;
	font-weight: 800;
}

.hx-margin-panel__note {
	margin: 0;
	color: #626e7a;
	font-size: 13.5px;
	line-height: 1.6;
}

.hx-margin-points {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-top: 22px;
}

.hx-margin-points article {
	padding: 24px;
	border: 1px solid var(--hx-partner-line);
	border-radius: 10px;
	background: #fff;
}

.hx-margin-points h3 {
	margin-bottom: 9px;
	font-size: 16px;
	letter-spacing: -.01em;
}

.hx-margin-points p {
	margin: 0;
	color: #5b6772;
	font-size: 13.5px;
	line-height: 1.6;
}

/* --- Retailer fit grid ---------------------------------------------------- */
.hx-partner-tinted {
	padding: clamp(68px, 8vw, 112px) 0;
	background: var(--hx-partner-cream);
}

.hx-partner-tinted > .hx-container {
	max-width: 1200px;
}

.hx-fit-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.hx-fit-grid article {
	padding: 26px 24px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	background: #fff;
}

.hx-fit-grid h3 {
	margin-bottom: 10px;
	font-size: 17px;
	letter-spacing: -.015em;
}

.hx-fit-grid p {
	margin: 0;
	color: #5b6772;
	font-size: 14px;
	line-height: 1.65;
}

.hx-benefit-cards--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* --- Process band --------------------------------------------------------- */
.hx-process {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	padding: 0;
	margin: 0;
	list-style: none;
	counter-reset: hx-process;
}

.hx-process li {
	padding: 30px 26px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 8px;
	background: rgba(255, 255, 255, .06);
	counter-increment: hx-process;
}

.hx-process li::before {
	display: grid;
	width: 34px;
	height: 34px;
	margin-bottom: 18px;
	border-radius: 50%;
	color: var(--hx-partner-blue-deep);
	background: #fff;
	font-size: 14px;
	font-weight: 800;
	content: counter(hx-process);
	place-items: center;
}

.hx-process h3 {
	margin-bottom: 10px;
	color: #fff;
	font-size: 18px;
}

.hx-process p {
	margin: 0;
	color: rgba(255, 255, 255, .78);
	font-size: 14px;
	line-height: 1.6;
}

/* --- Closing call to action ----------------------------------------------- */
.hx-partner--wholesale .hx-button--primary {
	border-color: var(--hx-partner-blue);
	color: #fff;
	background: var(--hx-partner-blue);
}

.hx-partner--wholesale .hx-button--primary:hover,
.hx-partner--wholesale .hx-button--primary:focus-visible {
	border-color: var(--hx-partner-blue-deep);
	color: #fff;
	background: var(--hx-partner-blue-deep);
}

/* The FAQ zeroes its top padding to sit under the hero on other layouts; here
   it follows the dark process band and needs the breathing room back. */
.hx-partner--wholesale .hx-partner-faq {
	padding-top: clamp(56px, 6vw, 88px);
}

.hx-wholesale-cta {
	padding: clamp(48px, 6vw, 78px) 0;
	background: var(--hx-partner-cream);
	text-align: center;
}

.hx-wholesale-cta h2 {
	margin-bottom: 12px;
	font-size: clamp(26px, 2.85vw, 35px);
	letter-spacing: -.03em;
}

.hx-wholesale-cta p {
	max-width: 570px;
	margin: 0 auto 26px;
	color: #5b6772;
	font-size: 16px;
}

@media (max-width: 1024px) {
	.hx-fit-grid,
	.hx-margin-points,
	.hx-process,
	.hx-benefit-cards--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.hx-wsform__crumb small {
		display: none;
	}

	.hx-wsform__nav {
		margin-bottom: 22px;
	}

	.hx-wsform__actions {
		align-items: stretch;
		flex-direction: column-reverse;
	}

	.hx-partner-form--wholesale .hx-wsform__actions > button,
	.hx-wsform__actions .hx-wholesale-form__submit {
		width: 100%;
		flex-basis: auto;
	}

	.hx-partner-form--wholesale .hx-wsform__next {
		margin-left: 0;
	}
}

@media (max-width: 620px) {
	.hx-fit-grid,
	.hx-margin-points,
	.hx-process,
	.hx-benefit-cards--four {
		grid-template-columns: minmax(0, 1fr);
	}

	.hx-margin-table th,
	.hx-margin-table td {
		padding: 12px 10px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hx-wsform__track {
		transition-duration: .01ms !important;
	}
}

/* WooCommerce's show/hide password toggle ships at 22px, just under the 24px
   tap-target minimum, and sits on top of the input's right edge. Give it the
   extra 2px and pad the field so the two targets stop overlapping. */
.woocommerce .show-password-input,
.hx-login .show-password-input,
.hx-partner-form--ambassador .show-password-input {
	width: 24px;
	height: 24px;
	background-size: 16px 16px;
	background-position: center;
}

.woocommerce .password-input input,
.hx-login .password-input input,
.hx-partner-form--ambassador .password-input input {
	padding-right: 44px;
}

/* ==========================================================================
   Interac e-Transfer instructions (inc/etransfer.php + the two page templates)
   Ported from the Helixx Online build and re-tokenised onto the Foods palette.
   ========================================================================== */
.hx-emt-page { padding: clamp(36px, 5vw, 68px) 0 clamp(56px, 7vw, 96px); }
.hx-emt-page > .hx-container { max-width: 860px; }

.hx-emt-page__head { margin-bottom: clamp(26px, 3vw, 38px); }
.hx-emt-page__head h1 {
	margin: 10px 0 14px;
	font-size: clamp(28px, 3.51vw, 42px);
	letter-spacing: -.035em;
	line-height: 1.05;
}
.hx-emt-page__head p { margin: 0; color: #57626f; font-size: 17px; line-height: 1.6; }

.hx-emt {
	padding: clamp(24px, 3.4vw, 38px);
	border: 1px solid var(--hx-partner-line, #dce2e8);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(20, 33, 45, .07);
	background: #fff;
}
.hx-emt__title { margin: 0 0 22px; font-size: clamp(20px, 2.22vw, 24px); letter-spacing: -.02em; }

.hx-emt__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.hx-emt__key {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 16px;
	border: 1px solid #e4e9f0;
	border-radius: 10px;
	background: #f7f9fc;
}
.hx-emt__label {
	color: var(--hx-partner-blue, #1d4497);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.hx-emt__note { color: #55606d; font-size: 14px; line-height: 1.45; }

/* The copy buttons are the point of the card, so they read as values first. */
.hx-partner .hx-copy,
.hx-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	width: 100%;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	color: var(--hx-partner-ink, #14212d);
	text-align: left;
	cursor: pointer;
}
.hx-copy > span { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.hx-copy > small { color: #7a8695; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.hx-partner .hx-copy:hover,
.hx-partner .hx-copy:focus-visible,
.hx-copy:hover { background: none; }
.hx-copy:hover > span { color: var(--hx-partner-blue, #1d4497); }
.hx-copy.is-copied > small { color: #1f7a4d; }

/* base.css resets list-style globally, so the step numbers need asking for. */
.hx-emt__steps { padding: 0 0 0 22px; margin: 0 0 22px; list-style: decimal outside; }
.hx-emt__steps li { margin-bottom: 11px; color: #4b5764; font-size: 15px; line-height: 1.65; }
.hx-emt__steps li::marker { color: var(--hx-partner-blue, #1d4497); font-weight: 700; }

.hx-emt__warning {
	padding: 14px 16px;
	margin: 0;
	border-radius: 9px;
	background: #fff6e8;
	color: #6b4a12;
	font-size: 14px;
	line-height: 1.55;
}

.hx-emt-page__back { margin: 22px 0 0; }

.hx-emt-help { margin-top: clamp(30px, 4vw, 48px); padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid var(--hx-partner-line, #dce2e8); }
.hx-emt-help h2 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.02em; }
.hx-emt-help p { margin: 0; color: #57626f; font-size: 15px; line-height: 1.65; }

@media (max-width: 700px) {
	.hx-emt__keys { grid-template-columns: minmax(0, 1fr); }
}

/* e-Transfer wiring: thank-you CTA + account order notice (inc/etransfer.php). */
.hx-emt-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	margin: 24px 0;
	border: 1px solid var(--hx-partner-line, #dce2e8);
	border-radius: 12px;
	background: #f7f9fc;
}
.hx-emt-cta strong { display: block; margin-bottom: 3px; font-size: 16px; }
.hx-emt-cta span { color: #57626f; font-size: 14px; line-height: 1.5; }

.hx-emt-account { margin: 0 0 28px; }
.hx-emt-account > h2 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.02em; }
.hx-emt-account > p { margin: 0 0 18px; color: #57626f; font-size: 15px; line-height: 1.6; }
.hx-emt-account--paid {
	padding: 18px 20px;
	border-radius: 12px;
	background: #eef8f1;
}
.hx-emt-account--paid > h2 { color: #1f7a4d; }
.hx-emt-account--paid > p { margin: 0; }

@media (max-width: 600px) {
	.hx-emt-cta { flex-direction: column; align-items: stretch; }
	.hx-emt-cta .hx-button { width: 100%; text-align: center; }
}

/* ==========================================================================
   Contact page (page-contact-us.php)
   ========================================================================== */
/* .hx-partner-checks paints its tick from --hx-partner-blue, which is scoped to
   .hx-partner — without it the bullets render as invisible transparent rings. */
.hx-contact {
	--hx-partner-blue: #1d4497;
	--hx-partner-blue-deep: #112d6c;
	--hx-partner-ink: #14212d;
	--hx-partner-line: #dce2e8;
	--hx-contact-line: #e2e8f0;
	--hx-contact-blue: var(--hx-partner-blue);
}

.hx-contact-hero { padding: clamp(34px, 4.5vw, 60px) 0 clamp(26px, 3vw, 38px); }
.hx-contact-hero h1 {
	margin: 10px 0 14px;
	font-size: clamp(30px, 3.77vw, 44px);
	letter-spacing: -.035em;
	line-height: 1.03;
}
.hx-contact-hero__lede { max-width: 640px; margin: 0 0 18px; color: #55606d; font-size: 18px; line-height: 1.6; }
.hx-contact-hero__hours {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 15px;
	margin: 0;
	border-radius: 999px;
	background: #eef2fb;
	color: var(--hx-contact-blue);
	font-size: 13.5px;
	font-weight: 650;
}
.hx-contact-hero__hours svg { flex: 0 0 auto; }

.hx-contact-routes { padding-bottom: clamp(40px, 5vw, 66px); }
.hx-contact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.hx-contact-card {
	display: flex;
	flex-direction: column;
	padding: 26px 24px 22px;
	border: 1px solid var(--hx-contact-line);
	border-radius: 14px;
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hx-contact-card:hover {
	border-color: #c4d2ea;
	box-shadow: 0 16px 34px rgba(20, 33, 45, .09);
	transform: translateY(-2px);
}
.hx-contact-card__icon {
	display: grid;
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: 12px;
	background: #eef2fb;
	color: var(--hx-contact-blue);
	place-items: center;
}
.hx-contact-card__icon svg { width: 22px; height: 22px; }
.hx-contact-card h3 { margin: 0 0 9px; font-size: 17px; letter-spacing: -.015em; line-height: 1.25; }
.hx-contact-card p { margin: 0 0 18px; color: #5b6772; font-size: 14px; line-height: 1.6; }
.hx-contact-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	color: var(--hx-contact-blue);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}
.hx-contact-card__cta span { transition: transform .2s ease; }
.hx-contact-card:hover .hx-contact-card__cta span { transform: translateX(3px); }

/* --- Form ---------------------------------------------------------------- */

/* main.site-content is display:flex, so a bare <section> becomes a flex item and
   shrinks to its content — the tinted band stopped ~144px short of the viewport.
   width:100% makes it span again. */
.hx-contact > section {
	width: 100%;
}

.hx-contact-form-section {
	padding: clamp(46px, 6vw, 78px) 0;
	background: #f7f9fc;
	border-block: 1px solid #e8edf5;
}

/* Single centred column. The old two-up put a 290px intro beside a 702px card,
   leaving 412px of dead space in the left rail. */
.hx-contact-form-layout {
	max-width: 660px;
}

.hx-contact-form-intro {
	margin-bottom: 22px;
	text-align: center;
}
.hx-contact-form-intro h2 {
	margin: 10px 0 12px;
	font-size: clamp(26px, 2.89vw, 34px);
	letter-spacing: -.03em;
}
.hx-contact-form-intro > p {
	max-width: 46em;
	margin: 0 auto;
	color: #55606d;
	font-size: 16px;
	line-height: 1.6;
}

.hx-contact-form-card {
	padding: clamp(24px, 3vw, 34px);
	border: 1px solid var(--hx-contact-line);
	border-radius: 14px;
	box-shadow: 0 20px 48px rgba(20, 33, 45, .08);
	background: #fff;
}
.hx-contact-form-card .dlvr-form { max-width: none; }

/* The plugin emits each field as a <p>, whose default 1.1em margin made the
   form read loose and unfinished. Own the rhythm instead. */
.hx-contact-form-card .dlvr-field {
	margin: 0 0 16px;
}
.hx-contact-form-card label {
	display: block;
	margin-bottom: 6px;
	color: var(--hx-partner-ink);
	font-size: 13px;
	font-weight: 700;
}
.hx-contact-form-card .dlvr-req { color: #bd3b35; }

.hx-contact-form-card input[type="text"],
.hx-contact-form-card input[type="email"],
.hx-contact-form-card textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid #cfd7df;
	border-radius: 8px;
	background: #fff;
	color: var(--hx-partner-ink);
	font-size: 15px;
}
.hx-contact-form-card textarea { min-height: 132px; resize: vertical; }
.hx-contact-form-card input::placeholder,
.hx-contact-form-card textarea::placeholder { color: #97a2ae; }
.hx-contact-form-card input:focus,
.hx-contact-form-card textarea:focus {
	border-color: var(--hx-contact-blue);
	box-shadow: 0 0 0 3px rgba(29, 68, 151, .12);
	outline: 0;
}

/* Name and email pair up on a wide card — matched by input name rather than
   nth-child so reordering the form config cannot silently break the grid. */
@media (min-width: 620px) {
	.hx-contact-form-card .dlvr-form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 16px;
	}
	.hx-contact-form-card .dlvr-form > * { grid-column: 1 / -1; }
	.hx-contact-form-card .dlvr-field:has(input[name="name"]) { grid-column: 1 / 2; }
	.hx-contact-form-card .dlvr-field:has(input[name="email"]) { grid-column: 2 / 3; }
}

.hx-contact-form-card .dlvr-actions { margin: 4px 0 0; }
.hx-contact-form-card .dlvr-submit {
	width: 100%;
	min-height: 52px;
	border: 0;
	border-radius: 8px;
	background: var(--hx-contact-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .18s ease;
}
.hx-contact-form-card .dlvr-submit:hover,
.hx-contact-form-card .dlvr-submit:focus-visible { background: var(--hx-partner-blue-deep); }
.hx-contact-form-card .dlvr-fineprint {
	margin: 12px 0 0;
	color: #6f7a86;
	font-size: 12.5px;
	text-align: center;
}

/* The three hints, as a row under the card rather than a tall rail beside it. */
.hx-contact-form-hints {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	padding: 0;
	margin: 18px 0 0;
	list-style: none;
}
.hx-contact-form-hints li {
	position: relative;
	padding-left: 22px;
	color: #5b6772;
	font-size: 13px;
	line-height: 1.5;
}
.hx-contact-form-hints li::before {
	position: absolute;
	top: 1px;
	left: 0;
	color: var(--hx-contact-blue);
	font-weight: 800;
	content: "✓";
}

@media (max-width: 619px) {
	.hx-contact-form-hints { grid-template-columns: minmax(0, 1fr); gap: 7px; }
}

/* --- Elsewhere ----------------------------------------------------------- */
.hx-contact-elsewhere { padding: clamp(46px, 6vw, 74px) 0; }
.hx-contact-elsewhere .hx-section-heading { margin-bottom: 24px; }
.hx-contact-elsewhere .hx-section-heading h2 { font-size: clamp(22px, 2.65vw, 30px); }
.hx-contact-elsewhere__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hx-contact-elsewhere__item {
	display: block;
	padding: 20px;
	border: 1px solid var(--hx-contact-line);
	border-radius: 12px;
	background: #fff;
	transition: border-color .2s ease, background .2s ease;
}
.hx-contact-elsewhere__item:hover { border-color: #c4d2ea; background: #f7f9fc; }
.hx-contact-elsewhere__item strong { display: block; margin-bottom: 6px; color: var(--hx-partner-ink, #14212d); font-size: 15px; }
.hx-contact-elsewhere__item span { color: #5b6772; font-size: 13.5px; line-height: 1.55; }

@media (max-width: 1024px) {
	.hx-contact-grid,
	.hx-contact-elsewhere__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hx-contact-form-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.hx-contact-grid,
	.hx-contact-elsewhere__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Footer trademark notice — quieter than the copyright it sits under. */
.hx-footer__trademark {
	max-width: 34em;
	margin-top: 10px;
	font-size: 11.5px;
	line-height: 1.55;
	opacity: .72;
}

/* ========================================================================== 
   HOMEPAGE — compact, touch-first mobile pass
   Keeps the desktop composition intact while reducing scroll length, large
   paint areas and controls that compete with native swipe navigation.
   ========================================================================== */
@media (max-width: 767px) {
	.hx2-wrap { width: min(100% - 32px, 1320px); }

	.hx2 h1,
	.hx2 h2 {
		max-width: 100%;
		font-size: clamp(1.89rem, 7.88vw, 2.28rem);
		letter-spacing: -.035em;
		line-height: 1.06;
		text-wrap: balance;
		overflow-wrap: normal;
	}

	.hx2 .hx2-btn { min-height: 50px; }
	.hx2 .hx2-actions { width: 100%; gap: 10px; }
	.hx2 .hx2-actions .hx2-btn { flex: 1 1 100%; }

	/* The product remains the centrepiece, but the unused air around it goes. */
	.hx2-hero__panel {
		width: min(100% - 24px, 1380px);
		gap: 0;
		padding-block: 14px 44px;
	}
	.hx2-hero__slide {
		height: clamp(660px, calc(100svh - 24px), 720px);
		min-height: 0;
	}
	.hx2-hero__visual { min-height: 268px; }
	.hx2-hero__copy { width: 100%; max-width: 360px; }
	.hx2-hero__slide h1,
	.hx2-hero__slide h2 {
		max-width: 350px;
		margin: 7px auto 13px;
		font-size: clamp(1.97rem, 8.63vw, 2.34rem);
		line-height: 1.02;
		overflow-wrap: normal;
	}
	.hx2-hero__lede {
		max-width: 350px;
		margin-bottom: 18px;
		font-size: 15.5px;
		line-height: 1.52;
	}
	.hx2-hero__rating { margin-top: 13px; }
	.hx2-hero__nav { display: none !important; }
	.hx2-hero__dots { bottom: 10px; }

	.hx2-proof .hx2-wrap > div { min-height: 72px; gap: 9px; padding: 12px 10px; }
	.hx2-proof img { width: auto; max-width: 36px; height: 36px; padding: 0; }
	.hx2-proof span { font-size: 10px; line-height: 1.25; }

	.hx2-recipes,
	.hx2-intro,
	.hx2-flavours,
	.hx2-why,
	.hx2-reviews,
	.hx2-events { padding-block: 68px; }

	.hx2-section-head,
	.hx2-recipes__head { gap: 15px; margin-bottom: 30px; }
	.hx2-recipes__grid { gap: 14px; margin-bottom: 28px; }
	.hx2-recipe { min-height: 270px; }
	.hx2-recipe > span { right: 18px; bottom: 17px; left: 18px; }

	.hx2-intro__grid { gap: 34px; }
	.hx2-intro__media { padding: 12px; border-radius: 17px; box-shadow: 0 16px 36px rgba(30, 56, 105, .09); }
	.hx2-intro__media::before { inset: -7px auto auto -7px; width: 50px; height: 50px; border-width: 2px; }
	.hx2-intro__media figcaption { margin-top: 10px; }
	.hx2-intro__copy h2 { margin-bottom: 18px; }
	.hx2-intro__copy .hx2-lead { margin-bottom: 14px; font-size: 18px; line-height: 1.45; }
	.hx2-intro__copy > p:not(.hx2-lead):not(.hx2-intro__canada) { margin-bottom: 20px; line-height: 1.65; }
	.hx2-intro__facts { margin-bottom: 24px; }

	.hx2-products { gap: 34px; }
	.hx2-product__media { min-height: 320px; }
	.hx2-product__media img { height: 292px; }
	.hx2-product__info { gap: 16px; padding: 17px 2px 0; }
	.hx2-flavours__footer { flex-direction: column; gap: 13px; padding-top: 38px; text-align: center; }

	.hx2-routine { min-height: 0; }
	.hx2-routine__image { min-height: 310px; }
	.hx2-routine__copy { padding: 56px 16px; }
	.hx2-routine__copy h2 { margin-bottom: 20px; }
	.hx2-routine__copy > p:not(.hx2-eyebrow) { margin-bottom: 26px; line-height: 1.65; }
	.hx2-routine__methods nav { gap: 8px; }
	.hx2-routine__methods a { min-height: 50px; padding: 13px 14px; }
	.hx2-routine__inspiration { gap: 16px; padding: 18px; }

	.hx2-why__heading { gap: 14px; margin-bottom: 34px; }
	.hx2-why__grid article { padding: 22px 0 25px; }
	.hx2-why__grid article,
	.hx2-why__grid .hx2-why__icon { animation: none !important; }
	.hx2-why__grid article { opacity: 1 !important; }

	.hx2-reviews__intro { align-items: stretch; gap: 20px; margin-bottom: 30px; }
	.hx2-reviews__rating { align-self: flex-start; padding: 13px 16px; }
	.hx2-review-carousel { --hx-slides-xs: 1; }
	.hx2-review-card { min-height: 285px; padding: 24px; border-radius: 17px; }
	.hx2-review-card__stars { margin-bottom: 28px; }
	.hx2-review-card p { margin-bottom: 28px; font-size: 18px; }
	.hx2-review-controls { justify-content: flex-start; padding-top: 18px; }
	.hx2-review-controls > div:last-child { display: none; }

	.hx2-events__grid { gap: 28px; margin-bottom: 30px; }
	.hx2-close { padding-block: 74px; }
	.hx2-close > .hx2-wrap > p:not(.hx2-eyebrow) { margin-bottom: 28px; font-size: 16px; line-height: 1.6; }

	/* Let the browser skip layout/paint for the deep page until it approaches. */
	.hx2-intro,
	.hx2-flavours,
	.hx2-routine,
	.hx2-why,
	.hx2-events,
	.hx2-close {
		content-visibility: auto;
		contain-intrinsic-size: auto 700px;
	}
}

@media (max-width: 380px) {
	.hx2-wrap { width: min(100% - 24px, 1320px); }
	.hx2-hero__panel { width: min(100% - 16px, 1380px); }
	.hx2-hero__visual { min-height: 250px; }
}

@media (hover: none) and (pointer: coarse) {
	.hx2-product__media img,
	.hx2-recipe img,
	.hx2-recipe > i { transition: none; }
}

/* Hero product geometry — equal pouch scale, optical spacing, no fake shadow. */
.hx2-hero__panel { grid-template-columns: .72fr 1.28fr; }
.hx2-hero__copy { width: 100%; max-width: 500px; }

.hx2-hero__visual::before,
.hx2-hero__visual::after { display: none; }

.hx2-hero__visual img {
	max-height: min(580px, calc(100vh - 300px));
	filter: none;
}

/* JS still supplies smooth button/autoplay transitions. Keeping CSS scrolling
   immediate prevents deep links and restored sessions landing between slides. */
.hx2-hero__track { scroll-behavior: auto; }

@media (min-width: 901px) {
	.hx2-hero__nav {
		top: auto;
		bottom: 48px;
		width: 38px;
		height: 38px;
		transform: none;
	}
	.hx2-hero__nav:hover { transform: scale(1.06); }
	/* Clear of the six dots (6 x 24px). */
	.hx2-hero__nav--prev { right: calc(50% + 84px); left: auto; }
	.hx2-hero__nav--next { right: auto; left: calc(50% + 84px); }
}

@media (max-width: 900px) {
	.hx2-hero__panel { grid-template-columns: 1fr; }
}

/* ==========================================================================
   15-SERVING RANGE — hero lineup, flavour accents, five-card grid
   ========================================================================== */

/* Slide 1: the five bags as one group shot. The centre bag is largest and in
   front; the inner pair (85%) and outer pair (72%) sit raised and behind it, so
   the row reads with depth instead of as a flat strip. Each bag hides at most
   25% of its neighbour, which keeps every flavour name readable.

   Every bag is placed by percentage inside one fixed-ratio box, so the whole
   group scales as a single unit and cannot overflow at any width. Geometry
   (bag aspect 626:900): centre 29.2% wide, inner 24.8%, outer 21%, spanning
   1%-99% of the box; the centre bag is 42% of the box width tall, hence the
   100:42 ratio. The width cap keeps the group inside the viewport height. */
.hx2-hero__visual--lineup {
	position: relative;
	display: block;
	width: min(100%, calc((100vh - 330px) / .42));
	min-height: 0;
	aspect-ratio: 100 / 42;
	margin-inline: auto;
}
.hx2-hero__visual--lineup picture {
	position: absolute;
	display: block;
	margin: 0;
}
.hx2-hero__visual--lineup picture:nth-child(1) { left: 1%;    bottom: 10%; width: 21%;   z-index: 1; }
.hx2-hero__visual--lineup picture:nth-child(2) { left: 16.8%; bottom: 5%;  width: 24.8%; z-index: 2; }
.hx2-hero__visual--lineup picture:nth-child(3) { left: 35.4%; bottom: 0;   width: 29.2%; z-index: 3; }
.hx2-hero__visual--lineup picture:nth-child(4) { left: 58.4%; bottom: 5%;  width: 24.8%; z-index: 2; }
.hx2-hero__visual--lineup picture:nth-child(5) { left: 78%;   bottom: 10%; width: 21%;   z-index: 1; }
.hx2-hero__visual--lineup img {
	position: static;
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: none;
	/* Separates the overlapping light bags and grounds the group. */
	filter: drop-shadow(0 12px 18px rgba(16, 24, 32, .16));
}

/* Accents for the two new flavours, matching the bag colours. */
.hx2-hero__slide--apple { background-color: #e4ecd5; }
.hx2-hero__slide--maple { background-color: #f1e3d0; }

@media (max-width: 900px) {
	.hx2-hero__visual--lineup { width: min(100%, 560px); margin-bottom: 18px; }
}

/* Desktop: the arrows and dots sit centred along the bottom of the hero (arrows
   48-86px up), under the product column. The visual reserves 92px beneath the
   bags (plus the panel's 12-24px = 104px+ clear) so they never run into the
   controls; the copy column sits left of the arrows and needs no reserve, so
   the hero stays short enough for the benefits rail to clear the fold.
   Imagery is capped to the slide (100vh - 254px) less that 24 + 24 + 92px. */
@media (min-width: 901px) {
	.hx2-hero__panel { padding-block: clamp(12px, 2vh, 24px); }
	.hx2-hero__visual:not(.hx2-hero__visual--lineup) { padding-bottom: 92px; }
	/* The lineup's bags are absolutely placed, so padding would not lift them. */
	.hx2-hero__visual--lineup { margin-bottom: 92px; }
	/* The image caps size the visual now. The legacy 440px minimum made the
	   single-bag slides (and so the whole track) taller than the fold allows. */
	.hx2-hero__visual { min-height: 0; }
	.hx2-hero__visual--lineup { width: min(94%, calc((100vh - 400px) / .42)); }
	.hx2-hero__visual:not(.hx2-hero__visual--lineup) img { max-height: min(560px, calc(100vh - 400px)); }
}

/* "Find your flavour": five cards on one row. The bags are transparent, so
   no multiply blend; each sits on its flavour's tint. */
.hx2-products--range { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.hx2-products--range .hx2-product__media { min-height: 360px; }
.hx2-products--range .hx2-product__media img { width: 76%; height: 300px; mix-blend-mode: normal; }
.hx2-products--range .hx2-product__info { flex-direction: column; gap: 6px; padding-top: 16px; }
.hx2-products--range .hx2-product__info > strong { padding-top: 0; }
.hx2-product--apple .hx2-product__media { background: #e4ecd5; }
.hx2-product--maple .hx2-product__media { background: #f1e3d0; }

@media (max-width: 1080px) {
	.hx2-products--range { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hx2-products--range .hx2-product:last-child { grid-column: auto; width: auto; }
}
@media (max-width: 800px) {
	.hx2-products--range { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
	.hx2-products--range .hx2-product:last-child { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
	.hx2-products--range .hx2-product__media { min-height: 250px; }
	.hx2-products--range .hx2-product__media img { height: 220px; }
	.hx2-products--range .hx2-product__media > span { top: 10px; left: 10px; }
}

/* ==========================================================================
   HOMEPAGE — section rhythm
   The owner found the gaps between sections too large: each section carried
   125-140px of padding top AND bottom, so ~265px separated two blocks of
   content. One token now sets every section, ~35% tighter, and the larger
   inner gaps (heading -> content, content -> footer link) come down with it.
   Last in the file so it wins over the per-breakpoint values above.
   ========================================================================== */
.hx2 { --hx2-section-y: clamp(52px, 6vw, 88px); }
.hx2-intro,
.hx2-flavours,
.hx2-why,
.hx2-recipes,
.hx2-reviews,
.hx2-events,
.hx2-close { padding-block: var(--hx2-section-y); }

.hx2-section-head { margin-bottom: clamp(28px, 3.4vw, 46px); }
.hx2-why__heading { margin-bottom: clamp(28px, 3.4vw, 46px); }
.hx2-flavours__footer { padding-top: clamp(28px, 3vw, 42px); }
.hx2-recipes__grid { margin-bottom: 36px; }
.hx2-events__grid { margin-bottom: 36px; }
.hx2-routine { min-height: 640px; }
.hx2-routine__copy { padding-block: var(--hx2-section-y); }

@media (max-width: 767px) {
	.hx2-routine { min-height: 0; }
}

/* ==========================================================================
   CLIENT REVISIONS — October 2026
   1. Benefits: always all five (hx_core_benefits()), Made in Canada in the
      middle. Every row here is a fixed five-column grid — a wrapping row would
      push the middle item off-centre — and a single column on phones, where
      Made in Canada is still third of five.
   2. "Find your flavour": a 15 / 25-serving size toggle.
   ========================================================================== */

/* Benefit rail under the hero. */
.hx2-proof .hx2-wrap { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1200px; }
.hx2-proof .hx2-wrap > div { border-top: 0; border-left: 1px solid var(--hx2-line); }
.hx2-proof .hx2-wrap > div:first-child { border-left: 0; }
@media (max-width: 1024px) {
	.hx2-proof .hx2-wrap > div { flex-direction: column; justify-content: center; gap: 7px; padding: 14px 6px; text-align: center; }
	.hx2-proof img { max-width: 34px; height: 34px; }
	.hx2-proof strong { font-size: 10.5px; line-height: 1.25; }
}

/* Intro chips: five equal cells, icon over label. */
.hx2-intro__facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hx2-intro__facts span { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 4px; font-size: 9px; line-height: 1.25; text-align: center; }

/* "Why Helixx?" — five cards in one row from tablet up. */
.hx2-why__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hx2-why__grid article,
.hx2-why__grid article:nth-child(n) { min-height: 0; padding: 26px 22px 30px; border-top: 0; border-left: 1px solid var(--hx2-line); }
.hx2-why__grid article:first-child { border-left: 0; }
.hx2-why__grid h3 { font-size: 18px; }
@media (max-width: 1080px) {
	.hx2-why__grid article,
	.hx2-why__grid article:nth-child(n) { padding: 22px 14px 26px; }
	.hx2-why__grid h3 { font-size: 16px; }
	.hx2-why__grid p { font-size: 12.5px; line-height: 1.6; }
}
@media (max-width: 767px) {
	.hx2-why__grid { grid-template-columns: 1fr; }
	.hx2-why__grid article,
	.hx2-why__grid article:nth-child(n) { padding: 22px 0 25px; border-top: 1px solid var(--hx2-line); border-left: 0; }
	.hx2-why__grid article:first-child { border-top: 0; }
}

/* Spotlight, five phases. The lit window shrinks to fit a fifth of the cycle,
   and the delays now run 0, -4/5, -3/5 ... so the cards light left to right
   (the four-card version's -1/4, -1/2, -3/4 actually lit them 1, 4, 3, 2). */
.hx2-why__grid { --hx2-spot: 15s; }
.hx2-why__grid article:nth-child(1),
.hx2-why__grid article:nth-child(1) .hx2-why__icon { animation-delay: 0s; }
.hx2-why__grid article:nth-child(2),
.hx2-why__grid article:nth-child(2) .hx2-why__icon { animation-delay: calc(var(--hx2-spot) * -.8); }
.hx2-why__grid article:nth-child(3),
.hx2-why__grid article:nth-child(3) .hx2-why__icon { animation-delay: calc(var(--hx2-spot) * -.6); }
.hx2-why__grid article:nth-child(4),
.hx2-why__grid article:nth-child(4) .hx2-why__icon { animation-delay: calc(var(--hx2-spot) * -.4); }
.hx2-why__grid article:nth-child(5),
.hx2-why__grid article:nth-child(5) .hx2-why__icon { animation-delay: calc(var(--hx2-spot) * -.2); }
.hx2-why__grid article { animation-name: hx2-why-spot5; }
.hx2-why__grid .hx2-why__icon { animation-name: hx2-why-icon5; }
@keyframes hx2-why-spot5 {
	0%   { opacity: 1; background-color: rgba(29, 68, 151, .08); }
	16%  { opacity: 1; background-color: rgba(29, 68, 151, .08); }
	21%  { opacity: var(--hx2-spot-dim); background-color: transparent; }
	95%  { opacity: var(--hx2-spot-dim); background-color: transparent; }
	100% { opacity: 1; background-color: rgba(29, 68, 151, .08); }
}
@keyframes hx2-why-icon5 {
	0%   { border-color: #9fb6e2; background-color: #e7eefb; transform: translateY(-3px) scale(1.06); }
	16%  { border-color: #9fb6e2; background-color: #e7eefb; transform: translateY(-3px) scale(1.06); }
	21%  { border-color: #dbe4f4; background-color: #f4f7fc; transform: none; }
	95%  { border-color: #dbe4f4; background-color: #f4f7fc; transform: none; }
	100% { border-color: #9fb6e2; background-color: #e7eefb; transform: translateY(-3px) scale(1.06); }
}

/* Size toggle: a segmented control of two native radios. */
.hx2-size-toggle { display: flex; justify-content: center; margin: 0 0 clamp(22px, 2.6vw, 34px); }
.hx2-size-toggle__group { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #d6dce3; border-radius: 999px; background: #fff; }
.hx2-size-toggle__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hx2-size-toggle label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 22px;
	border-radius: 999px;
	color: #35414b;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.hx2-size-toggle label:hover { color: var(--hx2-blue); }
.hx2-size-toggle__radio:checked + label { background: var(--hx2-blue); color: #fff; }
.hx2-size-toggle__radio:focus-visible + label { outline: 2px solid var(--hx2-blue); outline-offset: 3px; }

.hx2-flavours .hx2-products--size-25 { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; }
.hx2-flavours:has(#hx2-size-25:checked) .hx2-products--size-15 { display: none; }
.hx2-flavours:has(#hx2-size-25:checked) .hx2-products--size-25 { display: grid; }
@media (max-width: 800px) {
	.hx2-flavours .hx2-products--size-25 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   HERO — Amazon A+ / Storefront artwork (November 2026)
   Slide 1 lays the real copy over the "Rice to the Occasion" art, whose right
   side was designed empty for text. The flavour slides show the cropped
   Storefront lifestyle shots in place of the old transparent bag cut-outs.
   ========================================================================== */

/* Slide 1: centred copy over the Storefront lineup of all five bags. The
   slide is the photo's own royal blue (sampled: deeper at the top, brighter at
   the floor), and the photo fades into it at its top and sides, so there is
   no visible edge. The photo takes whatever height the copy leaves, at its own
   proportions, centred; on a narrow screen `cover` trims its empty sides. */
.hx2-hero__slide--feature {
	flex-direction: column;
	align-items: stretch;
	background: linear-gradient(180deg, #0a3880 0%, #0d3a82 45%, #1b4a9a 100%);
}
/* Desktop carousel arrows and dots sit bottom centre: keep the bowls clear of them. */
@media (min-width: 901px) {
	.hx2-hero__slide--feature { padding-bottom: 92px; }
}
.hx2-hero__slide--feature .hx2-hero__panel {
	order: 0;
	flex: 0 0 auto;
	position: relative;
	z-index: 1;
	grid-template-columns: 1fr;
	justify-items: center;
	padding-block: clamp(22px, 4vh, 52px) 0;
	text-align: center;
}
.hx2-hero__slide--feature .hx2-hero__copy { max-width: 760px; padding: 0; }
.hx2-hero__slide--feature h1 { max-width: none; margin: 12px 0 14px; font-size: clamp(2.4rem, 3.6vw, 3.85rem); }
.hx2-hero__slide--feature .hx2-hero__lede { max-width: 560px; margin: 0 auto 24px; }
.hx2-hero__slide--feature .hx2-eyebrow,
.hx2-hero__slide--feature .hx2-actions { justify-content: center; }
.hx2-hero__slide--feature .hx2-hero__rating { display: none; }
.hx2-hero__lineup {
	order: 1;
	position: relative;
	display: block;
	flex: 1 1 0;
	min-height: clamp(260px, 42vh, 440px);
}
.hx2-hero__lineup img {
	position: absolute;
	bottom: 0;
	left: 50%;
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	max-height: none;
	object-fit: cover;
	object-position: center bottom;
	transform: translateX(-50%);
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 95%, transparent), linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 95%, transparent), linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-composite: intersect;
}

/* Light-on-dark copy: slide 1 and the four darker flavour photos
   (front-page.php sets `dark` per slide). */
.hx2-hero__slide--dark .hx2-eyebrow,
.hx2-hero__slide--dark h1,
.hx2-hero__slide--dark h2,
.hx2-hero__slide--dark .hx2-text-link { color: #fff; }
.hx2-hero__slide--dark .hx2-hero__lede { color: rgba(255, 255, 255, .88); }
.hx2-hero__slide--dark .hx2-hero__rating { color: rgba(255, 255, 255, .78); }
.hx2-hero__slide--dark .hx2-hero__rating span { color: #f2d38a; }
.hx2-hero__slide--dark .hx2-text-link { border-color: rgba(255, 255, 255, .6); }

/* Flavour slides: the photo fills the right of the slide and fades, left to
   right, into a flat colour sampled from the photo's own left edge, so the
   copy sits on a plain background with no seam. Each colour keeps white text
   at WCAG AA (Unflavoured is the light one, with dark text). Phones fade the
   photo downward instead, into its bottom-edge colour (--hx2-slide-bg-m). */
.hx2-hero__slide--apple { --hx2-slide-bg: #6c643c; --hx2-slide-bg-m: #7d5b41; }
.hx2-hero__slide--blue  { --hx2-slide-bg: #3f547e; --hx2-slide-bg-m: #4f5a72; }
.hx2-hero__slide--maple { --hx2-slide-bg: #93603f; --hx2-slide-bg-m: #8a5a3c; }
.hx2-hero__slide--cocoa { --hx2-slide-bg: #5d3c2c; --hx2-slide-bg-m: #835b48; }
/* Unflavoured's bag sits further left in its photo: a shorter fade keeps it clear. */
.hx2-hero__slide--oat   { --hx2-slide-bg: #b1997b; --hx2-slide-bg-m: #a89580; --hx2-photo-fade: 15%; }

.hx2-hero__slide--photo { background: var(--hx2-slide-bg); }
/* Full slide height at the photo's own proportions, anchored right, so the
   whole bag shows uncropped; capped so it never runs under the copy (past the
   cap, `cover` trims the photo's sides, not the bag). */
.hx2-hero__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: block;
	width: auto;
	max-width: 62%;
	aspect-ratio: 1400 / 903;
}
.hx2-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--hx2-photo-fade, 26%));
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--hx2-photo-fade, 26%));
}
.hx2-hero__slide--photo .hx2-hero__panel { position: relative; z-index: 1; grid-template-columns: 1fr; }
.hx2-hero__slide--photo .hx2-hero__copy { max-width: min(480px, 38%); }

/* Dark-on-light (Unflavoured): the default greys and the blue eyebrow fall
   under 4.5:1 on the tan, so they deepen here. */
.hx2-hero__slide--photo:not(.hx2-hero__slide--dark) .hx2-eyebrow,
.hx2-hero__slide--photo:not(.hx2-hero__slide--dark) .hx2-hero__lede { color: #14191d; }
.hx2-hero__slide--photo:not(.hx2-hero__slide--dark) .hx2-hero__rating { color: #24292d; }
.hx2-hero__slide--photo:not(.hx2-hero__slide--dark) .hx2-hero__rating span { color: #14306b; }

/* Phones and small tablets: slide 1 keeps its centred copy above a tighter
   three-bag crop; the flavour slides put the photo on top, fading down. */
@media (max-width: 900px) {
	.hx2-hero__slide--feature .hx2-hero__panel { padding-block: 30px 6px; }
	.hx2-hero__slide--feature .hx2-hero__copy { max-width: 560px; }
	.hx2-hero__slide--feature .hx2-actions { align-items: center; }
	.hx2-hero__lineup { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
	.hx2-hero__lineup img {
		position: static;
		width: 100%;
		height: auto;
		max-height: 46vh;
		transform: none;
	}

	.hx2-hero__slide--photo { flex-direction: column; align-items: stretch; background: var(--hx2-slide-bg-m); }
	.hx2-hero__photo { position: relative; inset: auto; flex: 1 1 auto; width: 100%; max-width: none; aspect-ratio: auto; min-height: 0; max-height: 52vh; overflow: hidden; }
	.hx2-hero__photo img {
		object-position: center 45%;
		-webkit-mask-image: linear-gradient(180deg, #000 58%, transparent);
		mask-image: linear-gradient(180deg, #000 58%, transparent);
	}
	.hx2-hero__slide--photo .hx2-hero__panel { flex: 0 0 auto; justify-items: center; padding-block: 4px 44px; }
	.hx2-hero__slide--photo .hx2-hero__copy { max-width: 640px; }
}

/* Coming soon: the homepage flavour card's price slot. */
.hx2-product__soon {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 999px;
	background: #c8102e;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Policy pages (shipping + returns): quick-fact icons on solid brand blue,
   each icon centred in its badge and the badge centred against its two lines
   of text (client polish, November 2026). Was a faint tint, top-aligned.
   The badge is a <span>, so the caption rule `.hx-ship-fact span` (display:
   block, grey, 3px offset) also hit it and out-ranked `.hx-ship-fact__icon`:
   that is what kept the icons off-centre. Two classes here to win. */
.hx-ship-fact { align-items: center; }
.hx-ship-fact .hx-ship-fact__icon {
	display: inline-flex;
	margin-top: 0;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--hx2-blue, #1d4497);
	color: #fff;
	box-shadow: 0 6px 14px rgba(29, 68, 151, .22);
}
.hx-ship-fact__icon svg { display: block; width: 24px; height: 24px; margin: auto; }

/* Homepage flavour cards: the product's A+ render (bag + its ingredients),
   the same image as the product page. Square, edge to edge; its white
   background multiplies into the card tint. */
.hx2-products .hx2-product__media--render { min-height: 0; aspect-ratio: 1; }
.hx2-products .hx2-product__media--render img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }