/* ==========================================================================
   HealthOn — header, footer and location gate
   Brand values are taken from the HealthOn guideline (Oct 2026).
   ========================================================================== */

:root {
	/* Brand */
	--ho-blue: #2476ad;
	--ho-red: #ea1f27;
	--ho-green: #33a249;
	--ho-amber: #f89a1c;
	--ho-crimson: #ca2026;

	/* Accessible variants. The brand green and red fail contrast as small
	   text on white, so these darker tones are used for text and badges
	   while the brand values stay on large shapes and accents. */
	--ho-blue-ink: #1a5a87;
	--ho-green-ink: #1e7a33;
	--ho-red-ink: #ca2026;
	--ho-amber-ink: #231f20;

	/* Neutrals */
	--ho-navy: #10354e;
	--ho-navy-deep: #0b2638;
	--ho-navy-line: #1c425c;
	--ho-ink: #2a3540;
	--ho-body: #4a5663;
	--ho-muted: #5a6672;
	--ho-line: #e2e8ee;
	--ho-line-soft: #eaf0f5;
	--ho-wash: #f4f8fb;
	--ho-wash-2: #f2f6f9;
	--ho-white: #fff;
	--ho-footer-link: #afc6d6;

	/* Type */
	/* Android has none of Helvetica Neue, Helvetica, Arial or Segoe UI, and
	   on several devices the browser fell all the way through to a serif
	   italic — which is why the phone looked nothing like the desktop.
	   Roboto and Noto Sans are always present on Android, so the stack now
	   leads with names each platform actually has. */
	--ho-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

	/* Shape */
	--ho-radius: 14px;
	--ho-radius-lg: 18px;
	--ho-shell: 1240px;
	--ho-gutter: 32px;
}

/* --------------------------------------------------------------------------
   Base typography

   Everything below used to be scoped to .ho-* classes, which left every
   element WooCommerce renders itself — the short description, the variation
   table, breadcrumbs, cart and checkout — falling back to the browser's
   default serif. That is the single biggest reason a page stops looking
   like the design.
   -------------------------------------------------------------------------- */

body {
	margin: 0;
	font-family: var(--ho-font);
	font-style: normal;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ho-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ho-font);
	font-style: normal;
	color: var(--ho-navy);
	letter-spacing: -.015em;
}

p, li, dd, dt, td, th, label, figcaption, blockquote {
	font-family: var(--ho-font);
	font-style: normal;
}

button, input, select, textarea, optgroup {
	font-family: inherit;
	font-size: inherit;
}

a { color: var(--ho-blue-ink); }
a:hover { color: var(--ho-crimson); }

strong, b { font-weight: 700; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.ho-shell {
	max-width: var(--ho-shell);
	margin-inline: auto;
	padding-inline: var(--ho-gutter);
}

.ho-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--ho-navy);
	color: #fff;
	padding: 14px 22px;
	border-radius: 0 0 10px 0;
	font: 700 15px/1 var(--ho-font);
}

.ho-skip:focus {
	left: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Buttons ------------------------------------------------------------------ */

.ho-btn {
	display: inline-block;
	border: 0;
	border-radius: 999px;
	font: 700 15px/1.2 var(--ho-font);
	padding: 14px 26px;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: background-color .15s ease, color .15s ease;
}

.ho-btn--primary {
	background: var(--ho-crimson);
	color: #fff;
}

.ho-btn--primary:hover,
.ho-btn--primary:focus {
	background: #ab1a1f;
	color: #fff;
}

.ho-btn--ghost {
	background: #fff;
	color: var(--ho-blue-ink);
	border: 1.5px solid var(--ho-blue);
	padding: 12.5px 24px;
}

/* The brand capsule: flat left edge, fully rounded right. */
.ho-tag {
	display: inline-block;
	border-radius: 0 999px 999px 0;
	background: var(--ho-navy);
	color: #fff;
	font: 700 11.5px/1 var(--ho-font);
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 7px 17px 7px 12px;
}

:where(.ho-header, .ho-callback, .ho-footer, .ho-gate) :focus-visible {
	outline: 3px solid var(--ho-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.ho-header {
	position: relative;
	z-index: 50;
	background: #fff;
	font-family: var(--ho-font);
}

/* Deck 1 · brand bar -------------------------------------------------------- */

.ho-bar {
	border-bottom: 1px solid var(--ho-line-soft);
}

.ho-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding-block: 10px;
}

.ho-bar__left {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	flex-shrink: 0;
}

/* The rail takes the slack between the brand block and the actions. */
.ho-bar__inner > .ho-nav {
	flex: 1 1 260px;
	min-width: 0;
	border-bottom: 0;
}

.ho-bar__right {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex-shrink: 0;
	margin-left: auto;
}

.ho-logo {
	display: inline-block;
	line-height: 0;
	flex-shrink: 0;
}

.ho-logo img,
.ho-logo .custom-logo {
	display: block;
	height: 56px;
	width: auto;
}

.ho-bar__phone-link,
.ho-bar__phone {
	font: 700 15px/1 var(--ho-font);
	color: var(--ho-navy);
	text-decoration: none;
	white-space: nowrap;
}

.ho-phone-todo {
	font: 700 13px/1 var(--ho-font);
	color: var(--ho-crimson);
	text-decoration: underline;
}

.ho-utility__list {
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ho-utility__list a {
	font: 500 14px/1 var(--ho-font);
	color: var(--ho-muted);
	text-decoration: none;
}

.ho-utility__list a:hover {
	color: var(--ho-crimson);
}

/* Centre switcher ----------------------------------------------------------- */

.ho-centre {
	position: relative;
	flex-shrink: 0;
}

/*
 * Fixed height and nowrap. Without both, a long centre name wrapped onto a
 * second line and the 999px radius turned the button into a circle.
 */
.ho-centre__btn {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 44px;
	box-sizing: border-box;
	background: #fff;
	border: 2px solid var(--ho-blue);
	border-radius: 999px;
	padding: 0 16px;
	cursor: pointer;
	font: 700 14.5px/1 var(--ho-font);
	color: var(--ho-navy);
	white-space: nowrap;
	max-width: 230px;
}

.ho-centre__btn:hover {
	background: #f4f9fc;
}

.ho-centre__pin {
	color: var(--ho-red);
	flex-shrink: 0;
}

.ho-centre__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.ho-centre__caret {
	color: var(--ho-navy);
	flex-shrink: 0;
	transition: transform .18s ease;
}

.ho-centre__btn[aria-expanded="true"] .ho-centre__caret {
	transform: rotate(180deg);
}

.ho-centre__panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 60;
	width: 330px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border: 1px solid #dfe7ee;
	border-radius: 16px;
	box-shadow: 0 22px 50px rgba(16, 53, 78, .28);
	padding: 18px;
}

.ho-centre__panel[hidden] {
	display: none;
}

.ho-centre__panel-title {
	margin: 0 0 4px;
	font: 700 17px/1.3 var(--ho-font);
	color: var(--ho-navy);
}

.ho-centre__panel-note {
	margin: 0 0 14px;
	font: 400 13.5px/1.45 var(--ho-font);
	color: var(--ho-muted);
}

.ho-centre__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ho-centre__option {
	display: block;
	border: 1.5px solid #d4dee7;
	border-radius: 12px;
	padding: 12px 15px;
	text-decoration: none;
}

.ho-centre__option:hover,
.ho-centre__option:focus {
	border-color: var(--ho-blue);
	background: #f7fbfd;
}

.ho-centre__option.is-current {
	border-color: var(--ho-blue);
	background: #f4f9fc;
}

.ho-centre__option-name {
	display: block;
	font: 700 15px/1.35 var(--ho-font);
	color: var(--ho-navy);
}

.ho-centre__option-meta {
	display: block;
	font: 400 13px/1.4 var(--ho-font);
	color: var(--ho-muted);
}

/* Cart ---------------------------------------------------------------------- */

.ho-cart {
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	color: var(--ho-ink);
	flex-shrink: 0;
}

.ho-cart:hover {
	color: var(--ho-crimson);
}

.ho-cart__badge.is-empty {
	display: none;
}

.ho-cart__badge {
	position: absolute;
	top: 0;
	right: -2px;
	min-width: 19px;
	height: 19px;
	padding-inline: 5px;
	border-radius: 999px;
	background: var(--ho-crimson);
	color: #fff;
	font: 700 11px/19px var(--ho-font);
	text-align: center;
}

.ho-bar__cta {
	flex-shrink: 0;
}

/* Deck 2 · category navigation — capsule rail -------------------------------- */

.ho-nav {
	background: #fff;
	border-bottom: 1px solid var(--ho-line);
}

/* Horizontal scroll container, so the rail never wraps or breaks its pill
   shape on a narrow screen. Scrollbar is hidden; the rail is still
   swipeable and keyboard-reachable. */
.ho-rail__scroll {
	padding-block: 2px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.ho-rail__scroll::-webkit-scrollbar {
	display: none;
}

.ho-rail {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 5px;
	list-style: none;
	background: var(--ho-wash-2);
	border-radius: 999px;
	min-width: min-content;
}

.ho-rail__item {
	margin: 0;
	flex: 0 0 auto;
}

.ho-rail__link {
	display: block;
	padding: 9px 18px;
	border-radius: 999px;
	font: 500 15px/1.3 var(--ho-font);
	color: var(--ho-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.ho-rail__link:hover,
.ho-rail__link:focus {
	color: var(--ho-navy);
	background: rgba(255, 255, 255, .6);
}

.ho-rail__item.is-active > .ho-rail__link {
	background: #fff;
	color: var(--ho-navy);
	font-weight: 700;
	box-shadow: 0 1px 3px rgba(16, 53, 78, .16);
}

/* Deck 3 · filter strip ------------------------------------------------------ */

.ho-filter {
	background: var(--ho-wash);
	border-bottom: 1px solid var(--ho-line);
}

.ho-filter__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
	padding-block: 12px;
}

.ho-filter__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
}

.ho-filter__legend {
	font: 700 11.5px/1 var(--ho-font);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ho-muted);
}

.ho-filter__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ho-pill {
	display: inline-block;
	border: 1.5px solid #d4dee7;
	background: #fff;
	color: var(--ho-ink);
	border-radius: 999px;
	padding: 8px 18px;
	font: 500 14.5px/1.2 var(--ho-font);
	text-decoration: none;
	white-space: nowrap;
}

.ho-pill:hover {
	border-color: var(--ho-blue);
	color: var(--ho-blue-ink);
}

.ho-pill.is-on {
	background: var(--ho-blue);
	border-color: var(--ho-blue);
	color: #fff;
	font-weight: 700;
}

.ho-pill--green {
	border-color: var(--ho-green);
	color: var(--ho-green-ink);
	font-weight: 700;
	letter-spacing: .08em;
}

.ho-pill--green.is-on {
	background: var(--ho-green-ink);
	border-color: var(--ho-green-ink);
	color: #fff;
}

.ho-pill--red {
	border-color: var(--ho-crimson);
	color: var(--ho-red-ink);
	font-weight: 700;
	letter-spacing: .08em;
}

.ho-pill--red.is-on {
	background: var(--ho-crimson);
	border-color: var(--ho-crimson);
	color: #fff;
}

.ho-filter__end {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 18px;
}

.ho-filter__clear {
	font: 700 13.5px/1 var(--ho-font);
	color: var(--ho-blue-ink);
	text-decoration: underline;
}

.ho-filter__count {
	font: 400 13.5px/1 var(--ho-font);
	color: var(--ho-muted);
	white-space: nowrap;
}

/* ==========================================================================
   LOCATION GATE  (Gate A — full-screen welcome)
   ========================================================================== */

.ho-gate {
	position: fixed;
	inset: 0;
	z-index: 900;
	display: grid;
	place-items: center;
	padding: 24px;
	background: var(--ho-navy);
	font-family: var(--ho-font);
	overflow-y: auto;
}

.ho-gate[hidden] {
	display: none;
}

.ho-gate__backdrop {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.ho-gate__wave {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ho-gate__card {
	position: relative;
	width: 100%;
	max-width: 460px;
	background: #fff;
	border-radius: 20px;
	padding: 34px;
	box-shadow: 0 24px 60px rgba(6, 26, 40, .45);
}

.ho-gate__logo {
	display: block;
	height: 74px;
	width: auto;
	margin-bottom: 22px;
}

.ho-gate__title {
	margin: 0 0 8px;
	font: 700 26px/1.2 var(--ho-font);
	letter-spacing: -.02em;
	color: var(--ho-navy);
}

.ho-gate__sub {
	margin: 0 0 22px;
	font: 400 15px/1.5 var(--ho-font);
	color: var(--ho-body);
}

.ho-gate__list {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ho-gate__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border: 1.5px solid #d4dee7;
	border-radius: var(--ho-radius);
	padding: 16px 18px;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.ho-gate__option:hover,
.ho-gate__option:focus {
	border-color: var(--ho-blue);
	background: #f4f9fc;
}

.ho-gate__option-name {
	display: block;
	font: 700 16px/1.3 var(--ho-font);
	color: var(--ho-navy);
}

.ho-gate__option-meta {
	display: block;
	font: 400 13.5px/1.4 var(--ho-font);
	color: var(--ho-muted);
}

.ho-gate__option-go {
	color: var(--ho-blue);
	flex-shrink: 0;
	line-height: 0;
}

.ho-gate__foot {
	margin: 0;
	font: 400 12.5px/1.5 var(--ho-font);
	color: var(--ho-muted);
	text-align: center;
}

body.ho-gate-open {
	overflow: hidden;
}

/* ==========================================================================
   CALLBACK BAND
   ========================================================================== */

.ho-callback {
	background: var(--ho-wash);
	border-top: 1px solid var(--ho-line);
	font-family: var(--ho-font);
}

.ho-callback__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: center;
	padding-block: 48px;
}

.ho-callback__copy {
	flex: 1 1 340px;
	min-width: 0;
}

.ho-callback__title {
	margin: 14px 0 10px;
	font: 700 30px/1.15 var(--ho-font);
	letter-spacing: -.02em;
	color: var(--ho-navy);
}

.ho-callback__lede {
	margin: 0;
	max-width: 440px;
	font: 400 16px/1.6 var(--ho-font);
	color: var(--ho-body);
}

.ho-callback__form {
	flex: 999 1 430px;
	min-width: 0;
	background: #fff;
	border: 1px solid #dfe7ee;
	border-radius: var(--ho-radius-lg);
	padding: 24px;
}

.ho-callback__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.ho-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ho-label {
	font: 700 11.5px/1 var(--ho-font);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ho-muted);
}

.ho-input {
	box-sizing: border-box;
	width: 100%;
	padding: 13px 15px;
	border: 1px solid #d4dee7;
	border-radius: 10px;
	font: 400 15px/1.3 var(--ho-font);
	color: var(--ho-ink);
	background: #fff;
}

.ho-input:focus {
	border-color: var(--ho-blue);
	outline: 2px solid rgba(36, 118, 173, .25);
	outline-offset: 0;
}

.ho-callback__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
}

.ho-callback__small {
	margin: 0;
	max-width: 240px;
	font: 400 12.5px/1.5 var(--ho-font);
	color: var(--ho-muted);
}

/* Honeypot: off-screen, never shown, never focusable by mouse. */
.ho-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ho-note {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 10px;
	font: 500 14.5px/1.5 var(--ho-font);
}

.ho-note--ok {
	background: #e6f4ea;
	color: #13532a;
}

.ho-note--warn {
	background: #fff4e2;
	color: #6b4405;
}

.ho-note--err {
	background: #fdeaea;
	color: #8d1a1f;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.ho-footer {
	background: var(--ho-navy-deep);
	color: var(--ho-footer-link);
	font-family: var(--ho-font);
	padding-block: 44px 24px;
}

.ho-footer a {
	color: var(--ho-footer-link);
	text-decoration: none;
	font-size: 14.5px;
}

.ho-footer a:hover,
.ho-footer a:focus {
	color: #fff;
	text-decoration: underline;
}

.ho-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	margin-bottom: 32px;
}

.ho-footer__brand {
	flex: 1 1 230px;
	min-width: 0;
}

.ho-footer__col {
	flex: 1 1 140px;
	min-width: 0;
}

.ho-footer__col--centres {
	flex: 1 1 230px;
}

.ho-footer__wordmark {
	margin: 0 0 10px;
	font: 700 26px/1 var(--ho-font);
	letter-spacing: -.02em;
}

/* Reversed lockup: the dark artwork cannot sit on a navy ground,
   so the wordmark is set in type, per the guideline's
   "on coloured background" rule. */
.ho-footer__wordmark-a {
	color: #7fb2d6;
}

.ho-footer__wordmark-b {
	color: var(--ho-red);
}

.ho-footer__blurb {
	margin: 0 0 14px;
	max-width: 250px;
	font: 400 14.5px/1.55 var(--ho-font);
}

.ho-footer__phone {
	margin: 0;
}

.ho-footer__phone-link {
	font: 700 17px/1 var(--ho-font) !important;
	color: #fff !important;
	font-size: 17px !important;
}

.ho-footer__head {
	margin: 0 0 14px;
	font: 700 12px/1.4 var(--ho-font);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
}

.ho-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

/* Centres column, one phone per centre ------------------------------------- */

.ho-footer__centres {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ho-footer__centre-name {
	display: block;
	font-weight: 700;
	color: #fff !important;
	margin-bottom: 3px;
}

.ho-footer__centre-row {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #8fb0c6;
}

.ho-footer__centre-phone {
	font-size: 14.5px;
	color: var(--ho-footer-link);
}

/* Legal bar ----------------------------------------------------------------- */

.ho-footer__legal {
	border-top: 1px solid var(--ho-navy-line);
	padding-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	align-items: center;
}

.ho-footer__copy {
	margin: 0;
	font: 400 13px/1.5 var(--ho-font);
}

.ho-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ho-footer__legal-list a {
	font-size: 13px;
}

/* WooCommerce: fixed quantity ------------------------------------------------ */

.ho-qty-fixed {
	display: inline-block;
	background: var(--ho-wash-2);
	border-radius: 999px;
	padding: 8px 15px;
	font: 400 13.5px/1 var(--ho-font);
	color: var(--ho-muted);
	white-space: nowrap;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
	.ho-bar__phone,
	.ho-utility {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
	}
}

/* ==========================================================================
   SHARED SECTION FURNITURE
   ========================================================================== */

.ho-anchor { display: block; height: 0; scroll-margin-top: 150px; }

.ho-page { padding-block: 40px 64px; }
.ho-woo { padding-block: 32px 64px; }

.ho-sec__head {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 32px;
}

.ho-sec__head h2 {
	margin: 0 0 10px;
	font: 700 36px/1.14 var(--ho-font);
	letter-spacing: -.02em;
	color: var(--ho-navy);
}

.ho-sec__head p {
	margin: 0;
	max-width: 620px;
	font: 400 17px/1.6 var(--ho-font);
	color: var(--ho-body);
}

.ho-prose { max-width: 760px; font: 400 17px/1.7 var(--ho-font); color: var(--ho-body); }
.ho-prose h2 { font: 700 28px/1.2 var(--ho-font); color: var(--ho-navy); margin: 36px 0 12px; }
.ho-prose h3 { font: 700 21px/1.3 var(--ho-font); color: var(--ho-navy); margin: 28px 0 10px; }
.ho-page__title { margin: 0 0 20px; font: 700 42px/1.1 var(--ho-font); letter-spacing: -.025em; color: var(--ho-navy); }

/* Icon button in the header */
.ho-iconbtn {
	background: var(--ho-wash-2);
	border: 1px solid var(--ho-line);
	border-radius: 999px;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	cursor: pointer;
	color: var(--ho-ink);
	flex-shrink: 0;
}

.ho-iconbtn:hover { color: var(--ho-crimson); }

/* Search row */
.ho-searchrow { background: var(--ho-wash); border-bottom: 1px solid var(--ho-line); padding-block: 14px; }
.ho-searchrow[hidden] { display: none; }

.ho-search {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1.5px solid #d4dee7;
	border-radius: 999px;
	padding: 4px 4px 4px 18px;
	background: #fff;
	color: var(--ho-muted);
}

.ho-search__input {
	flex-grow: 1;
	min-width: 0;
	border: 0;
	background: none;
	font: 400 15px/1.3 var(--ho-font);
	color: var(--ho-ink);
	padding: 11px 0;
}

.ho-search__input:focus { outline: none; }

.ho-search__submit {
	flex-shrink: 0;
	background: var(--ho-blue);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 11px 22px;
	font: 700 14.5px/1 var(--ho-font);
	cursor: pointer;
}

/* Breadcrumb */
.ho-crumb { font: 400 13.5px/1.5 var(--ho-font); color: var(--ho-muted); margin-bottom: 14px; }
.ho-crumb a { color: var(--ho-blue-ink); text-decoration: none; }
.ho-crumb a:hover { color: var(--ho-crimson); }
.ho-crumb__sep { margin-inline: 8px; color: #b4c2ce; }

/* Tier badge, the brand capsule */
.ho-badge {
	display: inline-block;
	border-radius: 0 999px 999px 0;
	font: 700 11px/1 var(--ho-font);
	letter-spacing: .12em;
	padding: 5px 15px 5px 10px;
	white-space: nowrap;
}

.ho-badge--green { background: var(--ho-green-ink); color: #fff; }
.ho-badge--amber { background: var(--ho-amber); color: var(--ho-amber-ink); }
.ho-badge--red { background: var(--ho-crimson); color: #fff; }

.ho-empty {
	text-align: center;
	padding: 64px 24px;
	background: var(--ho-wash);
	border-radius: var(--ho-radius-lg);
}

.ho-empty h1, .ho-empty h2 { margin: 0 0 10px; font: 700 28px/1.2 var(--ho-font); color: var(--ho-navy); }
.ho-empty p { margin: 0 0 22px; font: 400 16.5px/1.6 var(--ho-font); color: var(--ho-body); }
.ho-empty__centres { margin-top: 40px; }
.ho-empty__centres h2 { font-size: 19px; }
.ho-empty__centres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }

/* ==========================================================================
   LANDING SECTIONS
   ========================================================================== */

.ho-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fbfdfe 0%, #f4f8fb 100%); }
.ho-hero__wave { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .85; }
.ho-hero__inner { position: relative; padding-block: 64px 56px; }
.ho-hero__copy { max-width: 640px; }

.ho-hero__title {
	margin: 20px 0;
	font: 700 54px/1.07 var(--ho-font);
	letter-spacing: -.025em;
	color: var(--ho-navy);
}

.ho-hero__title em { font-style: normal; color: var(--ho-blue); }

.ho-hero__lede { margin: 0 0 30px; font: 400 19px/1.6 var(--ho-font); color: var(--ho-body); max-width: 560px; }
.ho-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 32px; }

.ho-hero__ticks {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 14.5px/1.4 var(--ho-font);
	color: var(--ho-body);
}

.ho-hero__ticks li::before { content: "✓"; color: var(--ho-green-ink); font-weight: 700; margin-right: 7px; }

.ho-trust { background: var(--ho-navy); color: #fff; }
.ho-trust__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-block: 32px; }
.ho-trust__grid strong { display: block; font: 700 28px/1.1 var(--ho-font); letter-spacing: -.02em; }
.ho-trust__grid span { display: block; font: 400 14px/1.5 var(--ho-font); color: #b7cedf; margin-top: 4px; }

.ho-tiers { padding-block: 72px; background: #fff; }
.ho-tiers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.ho-tiercard {
	display: block;
	background: #fff;
	border: 1px solid var(--ho-line);
	border-left: 5px solid var(--ho-blue);
	border-radius: var(--ho-radius-lg);
	padding: 28px;
	text-decoration: none;
}

.ho-tiercard:hover { box-shadow: 0 12px 30px rgba(16, 53, 78, .1); }
.ho-tiercard--green { border-left-color: var(--ho-green); }
.ho-tiercard--amber { border-left-color: var(--ho-amber); }
.ho-tiercard--red { border-left-color: var(--ho-crimson); }
.ho-tiercard__note { margin: 16px 0 18px; font: 400 15.5px/1.6 var(--ho-font); color: var(--ho-body); }
.ho-tiercard__go { font: 700 15px/1 var(--ho-font); color: var(--ho-blue-ink); }

.ho-stages { padding-block: 0 72px; background: #fff; }
.ho-stages__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.ho-stagecard {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--ho-wash);
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius);
	padding: 22px 24px;
	text-decoration: none;
}

.ho-stagecard:hover { border-color: var(--ho-blue); background: #f0f7fc; }
.ho-stagecard__age { font: 700 19px/1.2 var(--ho-font); color: var(--ho-navy); }
.ho-stagecard__go { color: var(--ho-blue); font-size: 19px; }

.ho-how { background: var(--ho-navy); color: #fff; padding-block: 72px; }
.ho-how h2 { margin: 0 0 12px; font: 700 36px/1.14 var(--ho-font); letter-spacing: -.02em; }
.ho-how__lede { margin: 0 0 44px; font: 400 17px/1.6 var(--ho-font); color: #b7cedf; max-width: 620px; }
.ho-how__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: 0; padding: 0; list-style: none; }
.ho-how__step { border-top: 3px solid var(--ho-blue); padding-top: 18px; }
.ho-how__step--1 { border-top-color: var(--ho-red); }
.ho-how__step--2 { border-top-color: var(--ho-amber); }
.ho-how__step--3 { border-top-color: var(--ho-green); }
.ho-how__num { display: block; font: 700 12.5px/1 var(--ho-font); letter-spacing: .14em; text-transform: uppercase; color: #7fb2d6; margin-bottom: 10px; }
.ho-how__step h3 { margin: 0 0 8px; font: 700 20px/1.3 var(--ho-font); }
.ho-how__step p { margin: 0; font: 400 15px/1.6 var(--ho-font); color: #c9dcea; }

.ho-centres { padding-block: 72px; background: #fff; }
.ho-centres__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.ho-centrecard {
	background: #fff;
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius-lg);
	padding: 24px;
}

.ho-centrecard h3 { margin: 0 0 8px; font: 700 19px/1.3 var(--ho-font); }
.ho-centrecard h3 a { color: var(--ho-navy); text-decoration: none; }
.ho-centrecard h3 a:hover { color: var(--ho-crimson); }
.ho-centrecard__addr { margin: 0 0 10px; font: 400 13.5px/1.55 var(--ho-font); color: var(--ho-muted); }
.ho-centrecard__phone { display: inline-block; margin-bottom: 12px; font: 700 14.5px/1 var(--ho-font); color: var(--ho-navy); text-decoration: none; }
.ho-centrecard__go { display: block; font: 700 14px/1 var(--ho-font); color: var(--ho-blue-ink); text-decoration: none; }

.ho-faq { background: var(--ho-wash); padding-block: 72px; }
.ho-faq__inner { display: flex; flex-wrap: wrap; gap: 44px; }
.ho-faq__aside { flex: 1 1 300px; min-width: 0; }
.ho-faq__aside h2 { margin: 0 0 12px; font: 700 34px/1.14 var(--ho-font); letter-spacing: -.02em; color: var(--ho-navy); }
.ho-faq__aside p { margin: 0; font: 400 16.5px/1.6 var(--ho-font); color: var(--ho-body); }
.ho-faq__list { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.ho-faq__item {
	background: #fff;
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius);
	padding: 18px 22px;
}

.ho-faq__item summary { font: 700 17px/1.4 var(--ho-font); color: var(--ho-navy); cursor: pointer; }
.ho-faq__item p { margin: 12px 0 0; font: 400 15.5px/1.65 var(--ho-font); color: var(--ho-body); }

.ho-seo { background: var(--ho-wash); padding-block: 56px; }
.ho-seo h2 { margin: 0 0 12px; font: 700 26px/1.25 var(--ho-font); color: var(--ho-navy); }
.ho-seo p { margin: 0 0 12px; max-width: 900px; font: 400 15.5px/1.7 var(--ho-font); color: var(--ho-body); }

/* ==========================================================================
   CATALOGUE
   ========================================================================== */

.ho-archive__head { background: var(--ho-wash); border-bottom: 1px solid var(--ho-line); padding-block: 26px 32px; }
.ho-archive--landing .ho-archive__head { background: #fff; border-bottom: 0; padding-block: 48px 8px; }
.ho-archive__headrow { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; }
.ho-archive__intro { max-width: 680px; }
.ho-archive__title { margin: 0 0 10px; font: 700 40px/1.1 var(--ho-font); letter-spacing: -.025em; color: var(--ho-navy); }
.ho-archive--landing .ho-archive__title { font-size: 32px; }
.ho-archive__lede { margin: 0; font: 400 17px/1.6 var(--ho-font); color: var(--ho-body); }

.ho-archive__centrecard {
	background: #fff;
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius);
	padding: 18px 20px;
	max-width: 300px;
}

.ho-archive__centrecard-label { margin: 0 0 4px; font: 700 11px/1 var(--ho-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ho-muted); }
.ho-archive__centrecard-name { margin: 0 0 6px; font: 700 16px/1.3 var(--ho-font); color: var(--ho-navy); }
.ho-archive__centrecard-addr { margin: 0 0 8px; font: 400 13px/1.5 var(--ho-font); color: var(--ho-muted); }
.ho-archive__centrecard-phone { font: 700 14.5px/1 var(--ho-font); color: var(--ho-navy); text-decoration: none; }

.ho-archive__body { padding-block: 32px 64px; }
.ho-archive__toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 24px; }

.woocommerce-result-count { margin: 0; font: 400 15px/1.4 var(--ho-font); color: var(--ho-muted); }
.woocommerce-ordering select { padding: 10px 14px; border: 1px solid #d4dee7; border-radius: 10px; font: 400 15px/1.2 var(--ho-font); background: #fff; color: var(--ho-ink); }

/* Product grid */
ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.products::before, ul.products::after { content: none; }

li.product.ho-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius-lg);
	overflow: hidden;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

li.product.ho-card.is-comparing { outline: 2px solid var(--ho-blue); outline-offset: -2px; }

.ho-card__media { position: relative; background: #eef4f9; }
.ho-card__imglink { display: block; }
.ho-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: 0; }
.ho-badge-wrap { position: absolute; top: 12px; left: 0; z-index: 2; }

.ho-card__body { display: flex; flex-direction: column; gap: 9px; padding: 18px; flex-grow: 1; }
.ho-card__spacer { flex-grow: 1; }
.ho-card__eyebrow { margin: 0; font: 700 11.5px/1.3 var(--ho-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ho-muted); }
.ho-card__body h2.woocommerce-loop-product__title { margin: 0 !important; padding: 0 !important; font: 700 17px/1.3 var(--ho-font) !important; color: var(--ho-navy); }
.ho-card__body .woocommerce-loop-product__link { text-decoration: none; color: inherit; }
.ho-card__desc { margin: 0; font: 400 14px/1.55 var(--ho-font); color: var(--ho-muted); }
.ho-card__one { margin: 0; font: 400 13px/1.4 var(--ho-font); color: var(--ho-muted); }
.ho-card__body .price { margin: 0 !important; font: 700 21px/1.2 var(--ho-font) !important; color: var(--ho-navy) !important; }
.ho-card__body .price del { color: var(--ho-muted); font-weight: 400; font-size: 15px; }
.ho-card__body .price ins { text-decoration: none; }

.ho-card__body .button,
.woocommerce a.button.add_to_cart_button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: var(--ho-crimson);
	color: #fff;
	border-radius: 999px;
	padding: 13px 20px;
	font: 700 15px/1.2 var(--ho-font);
	text-decoration: none;
}

.ho-card__body .button:hover { background: #ab1a1f; color: #fff; }
.ho-card__body .added_to_cart { display: block; text-align: center; margin-top: 8px; font: 700 13.5px/1 var(--ho-font); color: var(--ho-blue-ink); }

/* Compare tick */
.ho-compare-tick {
	display: flex;
	align-items: center;
	gap: 9px;
	font: 700 13.5px/1 var(--ho-font);
	color: var(--ho-blue-ink);
	cursor: pointer;
	padding-top: 4px;
}

.ho-compare-tick input { width: 17px; height: 17px; accent-color: var(--ho-blue); }

/* Pagination */
.woocommerce-pagination ul.page-numbers {
	display: flex;
	gap: 8px;
	justify-content: center;
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	border: 0;
}

.woocommerce-pagination .page-numbers li { border: 0; }

.woocommerce-pagination .page-numbers li .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 14px;
	border: 1px solid #d4dee7;
	border-radius: 999px;
	font: 500 15px/1 var(--ho-font);
	color: var(--ho-ink);
	text-decoration: none;
}

.woocommerce-pagination .page-numbers li .page-numbers.current {
	background: var(--ho-blue);
	border-color: var(--ho-blue);
	color: #fff;
	font-weight: 700;
}

/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */

.ho-single__badge { margin: 0 0 10px; }
.woocommerce div.product .product_title { font: 700 40px/1.1 var(--ho-font); letter-spacing: -.025em; color: var(--ho-navy); margin: 0 0 14px; }
.woocommerce div.product p.price { font: 700 34px/1.2 var(--ho-font); color: var(--ho-navy); margin: 0 0 18px; }
.woocommerce div.product p.price del { font-size: 20px; color: var(--ho-muted); font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; }

.ho-centre-note { margin: 0 0 16px; font: 400 15px/1.5 var(--ho-font); color: var(--ho-body); }
.ho-centre-note strong { color: var(--ho-navy); }

.ho-onenote {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var(--ho-wash);
	border: 1px solid #dee8f0;
	border-radius: 12px;
	padding: 15px 18px;
	margin: 20px 0;
	color: var(--ho-blue-ink);
}

.ho-onenote p { margin: 0; font: 400 14.5px/1.6 var(--ho-font); color: var(--ho-body); }
.ho-onenote strong { color: var(--ho-navy); }
.ho-onenote svg { flex-shrink: 0; margin-top: 2px; }

.woocommerce div.product form.cart .button {
	background: var(--ho-crimson);
	color: #fff;
	border-radius: 999px;
	padding: 16px 34px;
	font: 700 16px/1.2 var(--ho-font);
}

.woocommerce div.product form.cart .button:hover { background: #ab1a1f; }
.woocommerce div.product form.cart div.quantity { display: none; }

.ho-single__compare { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin: 18px 0; }
.ho-single__compare-link { font: 700 14.5px/1 var(--ho-font); color: var(--ho-blue-ink); text-decoration: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 24px; border: 0; border-bottom: 1px solid var(--ho-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; margin: 0 24px 0 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 14px 0; font: 500 16px/1.2 var(--ho-font); color: var(--ho-ink); border-bottom: 2px solid transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ho-crimson); font-weight: 700; border-bottom-color: var(--ho-crimson); }

.woocommerce table.shop_attributes { border: 1px solid var(--ho-line); border-radius: var(--ho-radius); overflow: hidden; border-collapse: collapse; }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td { border-bottom: 1px solid var(--ho-line-soft); padding: 13px 18px; font: 400 15px/1.5 var(--ho-font); }
.woocommerce table.shop_attributes th { background: var(--ho-wash); color: var(--ho-navy); font-weight: 700; text-align: left; }

/* Sticky add to cart */
.ho-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	
	background: #fff;
	border-top: 1px solid #dfe7ee;
	box-shadow: 0 -8px 28px rgba(16, 53, 78, .14);
}
.ho-shell .ho-trust2{display:none;}
.ho-sticky[hidden] { display: none; }
.ho-sticky__inner { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding-block: 12px; }
.ho-sticky__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ho-sticky__thumb img { display: block; width: 50px; height: 50px; border-radius: 12px; object-fit: cover; }
.ho-sticky__title { display: flex; align-items: center; gap: 10px; font: 700 17px/1.3 var(--ho-font); color: var(--ho-navy); }
.ho-sticky__meta { display: block; font: 400 13.5px/1.4 var(--ho-font); color: var(--ho-muted); }
.ho-sticky__right { display: flex; align-items: center; gap: 18px; }
.ho-sticky__price { text-align: right; }
.ho-sticky__price-label { display: block; font: 700 11px/1 var(--ho-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ho-muted); }
.ho-sticky__price-value { display: block; font: 700 22px/1.2 var(--ho-font); color: var(--ho-navy); }
.ho-sticky__price-value del { display: none; }

/* ==========================================================================
   COMPARE
   ========================================================================== */

.ho-tray {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 85;
	background: var(--ho-navy);
	color: #fff;
	box-shadow: 0 -8px 28px rgba(16, 53, 78, .26);
}

.ho-tray[hidden] { display: none; }
.ho-tray__inner { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding-block: 14px; }
.ho-tray__left { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ho-tray__label { font: 700 12.5px/1 var(--ho-font); letter-spacing: .1em; text-transform: uppercase; color: #9fc3db; }
.ho-tray__items { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

.ho-tray__chip {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #1b4a69;
	border-radius: 12px;
	padding: 9px 10px 9px 14px;
	font: 700 14px/1.2 var(--ho-font);
}

.ho-tray__chip button { background: none; border: 0; color: #c9dcea; cursor: pointer; line-height: 0; padding: 2px; font-size: 16px; }
.ho-tray__chip button:hover { color: #fff; }
.ho-tray__right { display: flex; gap: 12px; align-items: center; }
.ho-tray__clear { background: none; border: 0; color: #c9dcea; font: 700 14.5px/1 var(--ho-font); cursor: pointer; }
.ho-tray__go { background: #fff; color: var(--ho-navy); border-radius: 999px; padding: 13px 26px; font: 700 15px/1 var(--ho-font); text-decoration: none; }
.ho-tray__hint { font: 400 14.5px/1.4 var(--ho-font); color: #c9dcea; }

.ho-compare__head { background: var(--ho-wash); border-bottom: 1px solid var(--ho-line); padding-block: 26px 30px; }
.ho-compare__headrow { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-end; justify-content: space-between; }
.ho-compare__headrow h1 { margin: 0 0 8px; font: 700 38px/1.1 var(--ho-font); letter-spacing: -.025em; color: var(--ho-navy); }
.ho-compare__headrow p { margin: 0; font: 400 16.5px/1.6 var(--ho-font); color: var(--ho-body); }
.ho-compare__body { padding-block: 32px 64px; }
.ho-compare__scroll { overflow-x: auto; }
.ho-compare__note { margin: 16px 0 0; font: 400 13.5px/1.6 var(--ho-font); color: var(--ho-muted); }

.ho-difftoggle {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1.5px solid var(--ho-blue);
	border-radius: 999px;
	padding: 11px 20px;
	font: 700 15px/1 var(--ho-font);
	color: var(--ho-blue-ink);
	cursor: pointer;
}

.ho-difftoggle input { width: 17px; height: 17px; accent-color: var(--ho-blue); }

.ho-cmp { width: 100%; border-collapse: collapse; min-width: 720px; background: #fff; border: 1px solid var(--ho-line); border-radius: var(--ho-radius-lg); overflow: hidden; }
.ho-cmp__corner { width: 30%; text-align: left; padding: 18px; font: 700 12px/1 var(--ho-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ho-muted); border-bottom: 2px solid var(--ho-line); }
.ho-cmp__colhead { padding: 18px; text-align: left; vertical-align: top; border-left: 1px solid var(--ho-line-soft); border-bottom: 2px solid var(--ho-line); }
.ho-cmp__name { display: block; margin: 10px 0 6px; font: 700 18px/1.25 var(--ho-font); color: var(--ho-navy); text-decoration: none; }
.ho-cmp__price { display: block; margin-bottom: 14px; font: 700 22px/1.2 var(--ho-font); color: var(--ho-navy); }
.ho-cmp__buy { display: block; text-align: center; }
.ho-cmp__remove { display: block; width: 100%; margin-top: 10px; background: none; border: 0; color: var(--ho-muted); font: 500 13.5px/1 var(--ho-font); cursor: pointer; text-decoration: underline; }
.ho-cmp__group td { background: var(--ho-navy); color: #fff; font: 700 12.5px/1 var(--ho-font); letter-spacing: .1em; text-transform: uppercase; padding: 11px 18px; }
.ho-cmp__rowhead { text-align: left; font: 500 15px/1.5 var(--ho-font); color: var(--ho-ink); padding: 13px 18px; border-bottom: 1px solid var(--ho-line-soft); }
.ho-cmp__cell { text-align: center; font: 400 15px/1.5 var(--ho-font); padding: 13px 18px; border-left: 1px solid var(--ho-line-soft); border-bottom: 1px solid var(--ho-line-soft); }
.ho-cmp__no { color: #8a96a2; }
.ho-cmp.is-diff-only .ho-cmp__row.is-same { display: none; }

/* ==========================================================================
   CART, CHECKOUT, PATIENT FIELDS
   ========================================================================== */

.ho-cartnote {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
	background: #e8f1f8;
	border: 1px solid #cfe0ee;
	border-radius: var(--ho-radius);
	padding: 20px 24px;
	margin-bottom: 24px;
}

.ho-cartnote h2 { margin: 0 0 4px; font: 700 17px/1.3 var(--ho-font); color: var(--ho-navy); }
.ho-cartnote p { margin: 0; font: 400 14.5px/1.55 var(--ho-font); color: var(--ho-body); max-width: 620px; }

.woocommerce table.shop_table { border: 1px solid var(--ho-line); border-radius: var(--ho-radius-lg); border-collapse: separate; border-spacing: 0; }
.woocommerce table.shop_table th { background: var(--ho-wash); font: 700 13px/1.2 var(--ho-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ho-navy); padding: 14px 18px; }
.woocommerce table.shop_table td { padding: 18px; font: 400 15px/1.5 var(--ho-font); border-top: 1px solid var(--ho-line-soft); }

.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce #respond input#submit,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--ho-crimson);
	color: #fff;
	border-radius: 999px;
	padding: 14px 26px;
	font: 700 15px/1.2 var(--ho-font);
}

.woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce .cart .button:hover { background: #ab1a1f; color: #fff; }

.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout h3 { font: 700 20px/1.3 var(--ho-font); color: var(--ho-navy); }

.woocommerce #payment #place_order,
.woocommerce-checkout #payment div.payment_box { font-family: var(--ho-font); }

.ho-patients { margin-top: 36px; }
.ho-patients__title { margin: 0 0 6px; font: 700 22px/1.3 var(--ho-font); color: var(--ho-navy); }
.ho-patients__lede { margin: 0 0 20px; font: 400 15px/1.6 var(--ho-font); color: var(--ho-body); }

.ho-patients__block {
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius);
	padding: 20px 24px 10px;
	margin: 0 0 16px;
}

.ho-patients__block legend { font: 700 16px/1.3 var(--ho-font); color: var(--ho-navy); padding-inline: 8px; }
.ho-patients__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ho-field--wide { grid-column: span 3; }
.ho-patients__grid .ho-field { margin-bottom: 10px; }

.ho-thanks { background: var(--ho-navy); color: #fff; border-radius: var(--ho-radius-lg); padding: 28px 32px; margin-top: 32px; }
.ho-thanks h2 { margin: 0 0 16px; font: 700 20px/1.3 var(--ho-font); }
.ho-thanks ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font: 400 15px/1.6 var(--ho-font); color: #d3e4f0; }
.ho-thanks__help { margin: 20px 0 0; font: 700 15px/1.4 var(--ho-font); }
.ho-thanks__phone { color: #fff; text-decoration: underline; }

/* ==========================================================================
   RESPONSIVE — phase 2 sections
   ========================================================================== */

@media (max-width: 1000px) {
	.ho-trust__grid, .ho-how__grid, .ho-centres__grid, .ho-stages__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ho-tiers__grid { grid-template-columns: 1fr; }
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ho-hero__title { font-size: 42px; }
	.ho-sec__head h2, .ho-how h2 { font-size: 30px; }
}

@media (max-width: 700px) {
	.ho-trust__grid, .ho-how__grid, .ho-centres__grid, .ho-stages__grid { grid-template-columns: 1fr; }
	ul.products { grid-template-columns: 1fr; }
	.ho-hero__title { font-size: 34px; }
	.ho-hero__inner { padding-block: 40px 36px; }
	.ho-archive__title { font-size: 30px; }
	.ho-page__title { font-size: 32px; }
	.woocommerce div.product .product_title { font-size: 30px; }
	.ho-patients__grid { grid-template-columns: 1fr; }
	.ho-field--wide { grid-column: span 1; }
	.ho-sticky__meta, .ho-sticky__thumb { display: none; }
	.ho-sticky__inner { gap: 12px; }
	.ho-tray__label { display: none; }
	.ho-compare__headrow h1 { font-size: 30px; }
}

/* ==========================================================================
   HEADER — one row on wide screens, rail drops below when space runs out
   ========================================================================== */

/* ≥1240px — everything on one row.
   At the default pill size the eight capsules needed 754px but only ~633px
   of slack exists beside the brand block and the actions, so "Cancer" was
   clipped behind the search button. Tightening the capsules to 9px/14px and
   the bar gap to 12px brings the rail to 572px, which fits at 1280px with
   about 50px to spare at the 1280px breakpoint — enough headroom for the longest centre name. */
@media (min-width: 1280px) {
	.ho-bar__inner { gap: 12px; }

	.ho-bar__inner > .ho-nav {
		order: 0;
		flex: 1 1 auto;
		min-width: 0;
		border-top: 0;
		margin-top: 0;
		padding-top: 0;
	}

	/* With "Book a check" gone from the bar the rail has 784px to work in
	   at 1280px, so the capsules keep their 15px text and need only 2px
	   less padding a side than the original design. Measured 722px, which
	   leaves about 62px spare for the longest centre name. */
	.ho-rail { padding: 5px; gap: 2px; }
	.ho-rail__link { padding: 9px 16px; font-size: 15px; }
}

/* ≤1239px — not enough room beside the brand block, so the rail takes its
   own full-width line rather than letting flex-wrap interleave the items. */
@media (max-width: 1279px) {
	.ho-bar__inner > .ho-nav {
		order: 3;
		flex: 1 0 100%;
		min-width: 0;
		border-top: 1px solid var(--ho-line-soft);
		margin-top: 4px;
		padding-top: 6px;
	}

	.ho-bar__inner > .ho-bar__right { margin-left: auto; }
}

/* Safety net: if a menu item or centre name is ever renamed longer than the
   measurements above allow, the rail scrolls horizontally instead of
   disappearing behind the search button. */
.ho-rail__scroll { min-width: 0; }


/* ==========================================================================
   MOBILE
   Rewritten: the single-row header is a desktop layout. On a phone the
   header reflows into three stacked rows and the CTA moves into a drawer.
   ========================================================================== */

/* Nothing may push the page wider than the viewport. */
html { overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
table { max-width: 100%; }

/* Burger ------------------------------------------------------------------- */

.ho-burger {
	display: none;
	background: var(--ho-wash-2);
	border: 1px solid var(--ho-line);
	border-radius: 999px;
	width: 42px;
	height: 42px;
	place-items: center;
	cursor: pointer;
	flex-shrink: 0;
}

.ho-burger__box { display: block; width: 18px; }
.ho-burger__box span { display: block; height: 2px; background: var(--ho-ink); border-radius: 2px; }
.ho-burger__box span + span { margin-top: 4px; }

/* Drawer ------------------------------------------------------------------- */

.ho-drawer { background: var(--ho-wash); border-bottom: 1px solid var(--ho-line); padding-block: 18px; }
.ho-drawer[hidden] { display: none; }
.ho-drawer__inner { display: flex; flex-direction: column; gap: 16px; }
.ho-drawer__cta { text-align: center; }
.ho-drawer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ho-drawer__list li { border-bottom: 1px solid var(--ho-line); }
.ho-drawer__list a { display: block; padding: 13px 0; font: 500 16px/1.3 var(--ho-font); color: var(--ho-ink); text-decoration: none; }
.ho-drawer__phone { margin: 0; font: 400 14.5px/1.4 var(--ho-font); color: var(--ho-muted); }
.ho-drawer__phone-link { display: block; margin-top: 4px; font: 700 20px/1.2 var(--ho-font); color: var(--ho-navy); text-decoration: none; }

/* ≤1240px — rail drops to its own line (set earlier), nothing else changes. */

/* ≤980px — the CTA and utility links move into the drawer. */
@media (max-width: 980px) {
	.ho-burger { display: grid; }
	.ho-bar__cta,
	.ho-utility,
	.ho-bar__phone { display: none; }
}

/* ≤760px — the header becomes three stacked rows. */
@media (max-width: 760px) {
	.ho-bar__inner {
		gap: 8px;
		padding-block: 6px;
	}

	/* Row 1: logo, then the icons. Row 2: centre. Row 3: rail. */
	.ho-logo { order: 1; }
	.ho-bar__right { order: 2; margin-left: auto; gap: 8px; }
	.ho-centre { order: 3; flex: 1 0 100%; }
	.ho-bar__inner > .ho-nav { order: 4; margin-top: 0; padding-top: 4px; }

	/* .ho-bar__left only wraps the logo and centre, so let them separate. */
	.ho-bar__left {
		display: contents;
	}

	.ho-logo img,
	.ho-logo .custom-logo { height: 46px; }

	/* Full-width centre chip — centre choice is the first decision here. */
	.ho-centre__btn {
		width: 100%;
		max-width: none;
		height: 42px;
		justify-content: flex-start;
	}

	.ho-centre__name { flex-grow: 1; }
	.ho-centre__caret { margin-left: auto; }
	.ho-centre__panel { width: 100%; left: 0; right: 0; }

	/* 44px minimum touch target, without the wasted vertical space that
	   pushed the phone header to 340px. */
	.ho-iconbtn, .ho-cart, .ho-burger { width: 44px; height: 44px; }
	.ho-rail__scroll { padding-block: 0; }
	.ho-rail { padding: 4px; }
	.ho-rail__link { padding: 12px 15px; font-size: 14.5px; }
	.ho-pill { padding: 11px 16px; }
	.ho-centre__btn { height: 44px; }
}

/* ≤980px — the whole filter becomes ONE horizontally scrolling row.
   Stacked, it was 141px tall on a 390px screen: more than a third of the
   viewport spent on controls before any content appeared. */
@media (max-width: 980px) {
	.ho-filter__inner {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 14px;
		padding-block: 7px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.ho-filter__inner::-webkit-scrollbar { display: none; }

	.ho-filter__group {
		flex: 0 0 auto;
		flex-wrap: nowrap;
		gap: 8px;
		align-items: center;
	}

	.ho-filter__legend { flex-shrink: 0; }
	.ho-filter__pills { flex-wrap: nowrap; gap: 7px; }
	.ho-pill { flex-shrink: 0; }

	.ho-filter__end { flex: 0 0 auto; margin-left: 0; gap: 12px; }

	/* The match count repeats WooCommerce's own result count above the
	   grid, so it is dropped here rather than stealing scroll width. */
	.ho-filter__count { display: none; }
}

/* Fixed bottom bars ---------------------------------------------------------
   The compare tray and the sticky add-to-cart bar are both fixed to the
   bottom. On a product page with items in the tray they would overlap, so
   the tray is lifted by the measured height of the sticky bar. */

.ho-tray { bottom: var(--ho-sticky-h, 0px); transition: bottom .15s ease; }

@media (max-width: 760px) {
	.ho-sticky__inner,
	.ho-tray__inner { padding-block: 10px; }

	.ho-sticky__right { gap: 12px; margin-left: auto; }
	.ho-sticky__title { font-size: 15px; }
	.ho-sticky__price-value { font-size: 19px; }
	.ho-sticky .ho-btn { padding: 13px 20px; font-size: 14.5px; }

	.ho-tray__inner { gap: 10px; }
	.ho-tray__left { flex: 1 1 100%; }
	.ho-tray__items { gap: 6px; }
	.ho-tray__chip { font-size: 13px; padding: 7px 8px 7px 11px; }
	.ho-tray__right { flex: 1 1 100%; justify-content: space-between; }
	.ho-tray__go { flex-grow: 1; text-align: center; }
}

/* Gate ---------------------------------------------------------------------- */

@media (max-width: 760px) {
	.ho-gate { padding: 16px; align-items: start; }
	.ho-gate__card { padding: 22px; margin-block: auto; }
	.ho-gate__logo { height: 52px; margin-bottom: 16px; }
	.ho-gate__title { font-size: 21px; }
	.ho-gate__sub { font-size: 14.5px; margin-bottom: 18px; }
	.ho-gate__option { padding: 14px 16px; }
	.ho-gate__option-name { font-size: 15px; }
}

/* Cart and checkout ---------------------------------------------------------
   WooCommerce's stacked-row mobile table needs the labels back. */

@media (max-width: 760px) {
	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		align-items: center;
		text-align: right;
		padding: 12px 16px;
	}

	.woocommerce table.shop_table_responsive tr td::before,
	.woocommerce-page table.shop_table_responsive tr td::before {
		font: 700 12px/1.3 var(--ho-font);
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--ho-muted);
		text-align: left;
	}

	.woocommerce table.shop_table_responsive tr td.product-remove::before { content: ""; }

	.woocommerce .cart-collaterals .cart_totals,
	.woocommerce-page .cart-collaterals .cart_totals { width: 100%; float: none; }

	.woocommerce-checkout #customer_details .col-1,
	.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }

	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last { width: 100%; float: none; margin-right: 0; }

	.ho-cartnote { flex-direction: column; align-items: flex-start; }
	.ho-patients__block { padding: 16px 16px 6px; }
	.ho-thanks { padding: 22px 20px; }
}

/* Compare ------------------------------------------------------------------- */

@media (max-width: 760px) {
    .ho-burger{display:none;}
	.ho-cmp { min-width: 560px; }
	.ho-cmp__corner { width: 36%; }
	.ho-cmp__colhead, .ho-cmp__cell, .ho-cmp__rowhead { padding: 12px; }
	.ho-cmp__name { font-size: 16px; }
	.ho-cmp__price { font-size: 19px; }
	.ho-difftoggle { width: 100%; justify-content: center; }
}

/* Small phones ------------------------------------------------------------- */

@media (max-width: 420px) {
	.ho-logo img, .ho-logo .custom-logo { height: 48px; }
	
	.ho-hero__title { font-size: 29px; }
	.ho-hero__ticks { gap: 8px 20px; }
	.ho-sec__head h2, .ho-how h2, .ho-faq__aside h2 { font-size: 26px; }
	.ho-archive__title { font-size: 26px; }
	.woocommerce div.product .product_title { font-size: 26px; }
	.woocommerce div.product p.price { font-size: 28px; }
	.ho-empty { padding: 40px 18px; }
}

/* Drawer heading, for the always-present centre list. */
.ho-drawer__heading {
	margin: 0 0 4px;
	font: 700 11.5px/1 var(--ho-font);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ho-muted);
}

.ho-drawer__list a[aria-current="true"] {
	color: var(--ho-crimson);
	font-weight: 700;
}

/* ==========================================================================
   TOUCH TARGETS
   Width is the wrong proxy for "is this a finger or a mouse". A 1024px
   tablet still needs 44px targets, so size by input type, not viewport.
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
	.ho-pill { padding: 13px 17px; }
	.ho-rail__link { padding: 13px 16px; }
	.ho-iconbtn, .ho-cart { width: 44px; height: 44px; }
	.ho-centre__btn { height: 46px; }
	.ho-compare-tick { padding-block: 10px; }
	.ho-compare-tick input,
	.ho-filter__pills input,
	.chk input { width: 20px; height: 20px; }
	.ho-drawer__list a { padding-block: 4px; }
}

/* ==========================================================================
   CATALOGUE GRID FIX
   WooCommerce's own stylesheet adds ::before/::after clearfix pseudos to
   ul.products. In a CSS grid those become grid ITEMS, which is what left an
   empty first cell. The earlier rule lost on specificity (.woocommerce
   ul.products::before beats ul.products::before), hence the full selector.
   ========================================================================== */

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none !important;
	display: none !important;
}

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce sets percentage widths and floats per column count. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}

/* ==========================================================================
   ARCHIVE LAYOUT — sidebar + grid
   ========================================================================== */

.ho-archive__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
	align-items: flex-start;
}

.ho-side {
	flex: 1 1 250px;
	min-width: 0;
	position: sticky;
	top: 16px;
}

.ho-archive__main {
	flex: 999 1 640px;
	min-width: 0;
}

.ho-side__panel {
	background: #fff;
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius-lg);
	padding: 22px 24px;
}

.ho-side__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.ho-side__title {
	margin: 0;
	font: 700 18px/1.3 var(--ho-font);
	color: var(--ho-navy);
}

.ho-side__clear {
	font: 700 14px/1 var(--ho-font);
	color: var(--ho-blue-ink);
	text-decoration: none;
}

.ho-side__clear:hover { text-decoration: underline; }

.ho-side__group {
	border: 0;
	border-top: 1px solid var(--ho-line);
	margin: 0;
	padding: 18px 0 2px;
}

.ho-side__group:first-of-type { border-top: 0; padding-top: 0; }

.ho-side__group legend {
	padding: 0 0 10px;
	font: 700 12px/1 var(--ho-font);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ho-muted);
}

.ho-check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font: 400 15px/1.4 var(--ho-font);
	color: var(--ho-ink);
	cursor: pointer;
}

.ho-check input {
	width: 17px;
	height: 17px;
	accent-color: var(--ho-blue);
	flex-shrink: 0;
}

.ho-check__label { flex-grow: 1; }

.ho-check__count {
	font-size: 13px;
	color: var(--ho-muted);
	font-variant-numeric: tabular-nums;
}

.ho-side__pricelabel {
	display: block;
	margin-bottom: 10px;
	font: 400 14px/1.4 var(--ho-font);
	color: var(--ho-body);
}

.ho-side__pricelabel .amount { font-weight: 700; color: var(--ho-navy); }

.ho-side__group--price input[type="range"] {
	width: 100%;
	accent-color: var(--ho-blue);
}

.ho-side__submit { margin: 18px 0 0; }
.ho-side__submit .ho-btn { width: 100%; }

.ho-side__help {
	background: #e8f1f8;
	border: 1px solid #cfe0ee;
	border-radius: var(--ho-radius-lg);
	padding: 20px 22px;
	margin-top: 18px;
}

.ho-side__help h2 {
	margin: 0 0 8px;
	font: 700 17px/1.3 var(--ho-font);
	color: var(--ho-navy);
}

.ho-side__help p {
	margin: 0 0 14px;
	font: 400 14.5px/1.55 var(--ho-font);
	color: var(--ho-body);
}

/* Mobile filter toggle */
.ho-side__toggle {
	display: none;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1.5px solid var(--ho-blue);
	border-radius: 999px;
	padding: 11px 20px;
	font: 700 15px/1 var(--ho-font);
	color: var(--ho-blue-ink);
	cursor: pointer;
	margin-bottom: 18px;
}

.ho-side__toggle-count {
	background: var(--ho-crimson);
	color: #fff;
	border-radius: 999px;
	min-width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	font-size: 12px;
	padding-inline: 5px;
}

/* Active filter chips */
.ho-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 22px;
}

.ho-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 0 999px 999px 0;
	background: var(--ho-navy);
	color: #fff;
	font: 700 12.5px/1 var(--ho-font);
	padding: 8px 16px 8px 12px;
	text-decoration: none;
}

.ho-chip:hover { background: var(--ho-crimson); color: #fff; }

.ho-chips__clear {
	font: 700 13.5px/1 var(--ho-font);
	color: var(--ho-blue-ink);
	text-decoration: underline;
	margin-left: 4px;
}

/* Toolbar: Filters button, result count and sorting share one row. */
.ho-archive__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-bottom: 20px;
}

.ho-archive__toolbar .woocommerce-result-count {
	margin: 0;
	font: 400 15px/1.4 var(--ho-font);
	color: var(--ho-muted);
}

.ho-archive__toolbar .woocommerce-ordering {
	margin: 0 0 0 auto;
}

/* Drawer chrome — only shown once the sidebar becomes an overlay. */
.ho-side__bar { display: none; }
.ho-side__scrim { display: none; }

/* ==========================================================================
   ARCHIVE — responsive
   ========================================================================== */

@media (max-width: 980px) {
	.ho-archive__cols { gap: 0; }

	.ho-archive__main { flex: 1 0 100%; }

	.ho-side__toggle { display: inline-flex; }

	/* The sidebar becomes a left off-canvas drawer. It stays in the DOM and
	   is translated off screen, so focus order and no-JS use still work. */
	.ho-side {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 120;
		width: min(340px, 86vw);
		background: #fff;
		box-shadow: 0 0 40px rgba(6, 26, 40, .3);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(-102%);
		transition: transform .22s ease;
		flex: none;
		padding: 0;
	}

	.ho-side.is-open { transform: translateX(0); }

	.ho-side__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: sticky;
		top: 0;
		z-index: 2;
		background: var(--ho-navy);
		color: #fff;
		padding: 14px 18px;
		font: 700 16px/1 var(--ho-font);
	}

	.ho-side__close {
		background: none;
		border: 0;
		color: #fff;
		cursor: pointer;
		width: 40px;
		height: 40px;
		display: grid;
		place-items: center;
	}

	.ho-side__panel {
		border: 0;
		border-radius: 0;
		padding: 18px;
	}

	.ho-side__help {
		margin: 0 18px 24px;
	}

	/* With JavaScript the form auto-submits, so the button stays hidden;
	   in the drawer it is useful as an explicit "done" action. */
	.ho-side__submit { display: block !important; }

	.ho-side__scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 110;
		background: rgba(11, 38, 56, .55);
		border: 0;
	}

	.ho-side__scrim[hidden] { display: none; }

	body.ho-side-open { overflow: hidden; }

	/* Two products at a time on a phone, as asked. */
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

@media (max-width: 760px) {
	.ho-archive__toolbar {
		gap: 10px; justify-content: start;
	}
	.ho-loc__cta{font-size:14px !important;}
	.woocommerce-product-gallery__wrapper{display:none;}
	.ho-tiercardopt .ho-choose__body{display:block !important;}
	.ho-choose__note{padding-left:10px;}
	.ho-params__tabs{justify-content: center;padding: 10px !important;max-width: 89% !important;}

	.ho-archive__toolbar .woocommerce-result-count {
		font-size: 13.5px;
		order: 2;
	}

	.ho-archive__toolbar .woocommerce-ordering {
		order: 3;
		flex: 1 0 100%;
		margin-left: 0;
	}

	.ho-archive__toolbar .woocommerce-ordering select { width: 100%; }

	.ho-side__toggle {
		order: 1;
		margin-bottom: 0;
		padding: 10px 16px;
		font-size: 14px;
	}

	/* Compact cards, so two still fit comfortably at 360px. */
	.ho-card__body { padding: 13px; gap: 7px; }
	.ho-card__eyebrow { font-size: 10.5px; letter-spacing: .06em; }
	.ho-card__body h2.woocommerce-loop-product__title { font-size: 15px !important; }
	.ho-card__desc { display: none; }
	.ho-card__one { font-size: 11.5px; }
	.ho-card__chosen { font-size: 11.5px; }
	.ho-card__body .price { font-size: 17px !important; }
	.ho-card__body .button,
	.woocommerce a.button.add_to_cart_button { padding: 11px 12px; font-size: 13.5px; }
	.ho-compare-tick { font-size: 12.5px; gap: 7px; }
	.ho-badge { font-size: 10px; padding: 4px 12px 4px 8px; }
	.ho-card__media img { aspect-ratio: 4 / 3; }
}

@media (max-width: 400px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { gap: 10px; }
	.ho-card__body { padding: 11px; }
	.ho-card__body h2.woocommerce-loop-product__title { font-size: 14px !important; }
	.ho-card__body .price { font-size: 16px !important; }
}

/* The exact variation a filtered card resolves to. */
.ho-card__chosen {
	margin: 0;
	font: 700 12.5px/1.4 var(--ho-font);
	color: var(--ho-blue-ink);
}

/* ==========================================================================
   GUIDELINES FOR THIS TEST
   Sits above the tier table on a product page.
   ========================================================================== */

.ho-guide {
	background: var(--ho-wash);
	border-top: 1px solid var(--ho-line);
	border-bottom: 1px solid var(--ho-line);
	padding-block: 56px;
}

.ho-guide__head { max-width: 680px; margin-bottom: 30px; }

.ho-guide__title {
	margin: 0 0 10px;
	font: 700 34px/1.14 var(--ho-font);
	letter-spacing: -.02em;
	color: var(--ho-navy);
}

.ho-guide__lede {
	margin: 0;
	font: 400 17px/1.6 var(--ho-font);
	color: var(--ho-body);
}

.ho-guide__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.ho-guide__card {
	background: #fff;
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius-lg);
	padding: 26px;
}

.ho-guide__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #e8f1f8;
	color: var(--ho-blue);
	margin-bottom: 16px;
}

.ho-guide__cardtitle {
	margin: 0 0 12px;
	font: 700 19px/1.3 var(--ho-font);
	color: var(--ho-navy);
}

.ho-guide__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.ho-guide__list li {
	position: relative;
	padding-left: 24px;
	font: 400 15px/1.6 var(--ho-font);
	color: var(--ho-body);
}

.ho-guide__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 9px;
	height: 9px;
	border-radius: 999px;
	border: 2.5px solid var(--ho-green);
}

.ho-guide__foot {
	margin: 26px 0 0;
	font: 400 15px/1.6 var(--ho-font);
	color: var(--ho-body);
}

.ho-guide__phone {
	font-weight: 700;
	color: var(--ho-navy);
	text-decoration: underline;
}

/* Sticky bar: the "choose a depth" state before a variation is picked. */
.ho-sticky .ho-btn.is-waiting {
	background: #fff;
	color: var(--ho-blue-ink);
	border: 1.5px solid var(--ho-blue);
}

.ho-sticky .ho-btn.is-waiting:hover {
	background: #f4f9fc;
	color: var(--ho-blue-ink);
}

.ho-sticky__meta [data-ho-sticky-variation] { font-weight: 700; color: var(--ho-navy); }
.ho-sticky__price-value .price { font-size: inherit; color: inherit; }
.ho-sticky__price-value del { display: none; }

@media (max-width: 1000px) {
	.ho-guide__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.ho-guide { padding-block: 40px; }
	.ho-guide__grid { grid-template-columns: 1fr; gap: 14px; }
	.ho-guide__title { font-size: 27px; }
	.ho-guide__card { padding: 20px; }
	.ho-guide__icon { width: 38px; height: 38px; margin-bottom: 12px; }
	.ho-guide__cardtitle { font-size: 17px; }
}

/* ==========================================================================
   WHAT'S INCLUDED, TIER BY TIER
   ========================================================================== */

.ho-params { background: #fff; padding-block: 56px; }
.ho-params__head { max-width: 680px; margin-bottom: 26px; }

.ho-params__title {
	margin: 0 0 10px;
	font: 700 34px/1.14 var(--ho-font);
	letter-spacing: -.02em;
	color: var(--ho-navy);
}

.ho-params__lede { margin: 0; font: 400 17px/1.6 var(--ho-font); color: var(--ho-body); }

.ho-params__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	background: var(--ho-wash-2);
	border-radius: 999px;
	padding: 5px;
	margin-bottom: 22px;
	width: fit-content;
	max-width: 100%;
}

.ho-params__tab {
	border: 0;
	background: none;
	border-radius: 999px;
	padding: 10px 20px;
	font: 500 15px/1.2 var(--ho-font);
	color: var(--ho-ink);
	cursor: pointer;
	white-space: nowrap;
}

.ho-params__tab:hover { background: rgba(255,255,255,.65); }

.ho-params__tab.is-on {
	background: #fff;
	color: var(--ho-navy);
	font-weight: 700;
	box-shadow: 0 1px 3px rgba(16,53,78,.16);
}

.ho-params__panel.is-hidden { display: none; }

.ho-params__scroll {
	overflow-x: auto;
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius-lg);
}

.ho-ptable { width: 100%; border-collapse: collapse; min-width: 560px; background: #fff; }

.ho-ptable caption {
	caption-side: top;
	text-align: left;
	padding: 16px 18px;
	font: 900 14px/1.4 var(--ho-font);
	color: var(--ho-muted);
}

.ho-ptable thead th {
	background: var(--ho-navy);
	color: #fff;
	font: 700 12.5px/1.2 var(--ho-font);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	padding: 13px 16px;
}

.ho-ptable thead th.ho-ptable__rowhead { text-align: left; width: 46%; }

.ho-ptable__group td {
	background: var(--ho-wash);
	font: 700 12px/1.2 var(--ho-font);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ho-navy);
	padding: 11px 18px;
}

.ho-ptable__rowhead {
	text-align: left;
	font: 400 15px/1.5 var(--ho-font);
	color: var(--ho-ink);
	padding: 12px 18px;
	border-bottom: 1px solid var(--ho-line-soft);
}

.ho-ptable__cell {
	text-align: center;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ho-line-soft);
	border-left: 1px solid var(--ho-line-soft);
}

.ho-ptable__yes {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var(--ho-blue);
	color: #fff;
}

.ho-ptable__no { color: #9aa6b2; }

.ho-params__note { margin: 16px 0 0; font: 400 13.5px/1.6 var(--ho-font); color: var(--ho-muted); }

/* ==========================================================================
   WHO THIS IS FOR  +  FAQ
   ========================================================================== */

.ho-who { background: var(--ho-wash); border-top: 1px solid var(--ho-line); padding-block: 56px; }
.ho-who__inner { display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start; }
.ho-who__col { flex: 1 1 320px; min-width: 0; }
.ho-who__faq { flex: 999 1 460px; min-width: 0; }

.ho-who__title {
	margin: 0 0 20px;
	font: 700 28px/1.2 var(--ho-font);
	letter-spacing: -.02em;
	color: var(--ho-navy);
}

.ho-who__list { display: flex; flex-direction: column; gap: 14px; }

.ho-who__card {
	background: #fff;
	border: 1px solid var(--ho-line);
	border-left: 4px solid var(--ho-blue);
	border-radius: var(--ho-radius);
	padding: 18px 22px;
}

.ho-who__card h3 { margin: 0; font: 700 16.5px/1.35 var(--ho-font); color: var(--ho-navy); }
.ho-who__card p { margin: 6px 0 0; font: 400 15px/1.55 var(--ho-font); color: var(--ho-body); }

.ho-who__faqlist { display: flex; flex-direction: column; gap: 12px; }

.ho-who__item {
	background: #fff;
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius);
	padding: 18px 22px;
}

.ho-who__item summary {
	font: 700 16.5px/1.4 var(--ho-font);
	color: var(--ho-navy);
	cursor: pointer;
	list-style: none;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	justify-content: space-between;
}

.ho-who__item summary::-webkit-details-marker { display: none; }

.ho-who__item summary::after {
	content: "+";
	flex-shrink: 0;
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
	color: var(--ho-blue);
}

.ho-who__item[open] summary::after { content: "–"; }
.ho-who__item p { margin: 12px 0 0; font: 400 15.5px/1.65 var(--ho-font); color: var(--ho-body); }

@media (max-width: 760px) {
	.ho-params, .ho-who { padding-block: 40px; }
	.ho-params__title { font-size: 27px; }
	.ho-who__title { font-size: 24px; }
	.ho-who__inner { gap: 32px; }
	.ho-params__tab { padding: 10px 15px; font-size: 14px; }
	.ho-ptable { min-width: 293px; }
	.ho-ptable__rowhead { font-size: 14px; padding: 11px 14px; }
	.ho-ptable__cell { padding: 11px 10px; }
	.ho-ptable thead th{padding:8px 9px !important;}
	
}

/* =========================================================================
   PRODUCT BUY BOX
   ========================================================================== */

.woocommerce div.product .woocommerce-product-details__short-description {
	font: 400 17px/1.6 var(--ho-font);
	color: var(--ho-body);
	margin: 0 0 18px;
}

.woocommerce div.product .woocommerce-product-details__short-description p { margin: 0 0 10px; }

.ho-price-sub {
	margin: -12px 0 20px;
	font: 400 15px/1.5 var(--ho-font);
	color: var(--ho-muted);
}

.ho-buy__centre { margin: 0 0 20px; max-width: 420px; }

.ho-assure {
	margin: 22px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--ho-line);
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.ho-assure li {
	position: relative;
	padding-left: 26px;
	font: 400 15px/1.5 var(--ho-font);
	color: var(--ho-body);
}

.ho-assure li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--ho-green-ink);
	font-weight: 700;
}

.woocommerce div.product form.cart { margin-bottom: 18px; }

.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart .single_add_to_cart_button {
	flex-grow: 1;
}

.ho-buy__advisor { margin-left: 12px; }

.woocommerce div.product form.cart::after { content: none; }

/* Keep Add to cart and the advisor button on one row. */
.woocommerce div.product form.cart.ho-has-cards,
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.woocommerce div.product form.cart .ho-choose,
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-variation,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	flex: 1 0 100%;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* The native dropdowns are replaced once the cards are built. */
.ho-has-cards table.variations { display: none; }

.ho-choose { margin: 0 0 20px; }
.ho-choose__group { border: 0; padding: 0; margin: 0 0 20px; }

.ho-choose__legend {
	padding: 0 0 10px;
	font: 700 12px/1 var(--ho-font);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ho-muted);
}

.ho-choose__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/* Depth cards */
.ho-choose__group--cards .ho-choose__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ho-tiercardopt {
	display: block;
	border: 1.5px solid #d4dee7;
	border-radius: var(--ho-radius);
	padding: 15px 18px;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.ho-tiercardopt:hover { border-color: var(--ho-blue); background: #f7fbfd; }

.ho-tiercardopt.is-on {
	border-color: var(--ho-blue);
	background: #f4f9fc;
	box-shadow: 0 0 0 3px rgba(36, 118, 173, .14);
}

.ho-tiercardopt.is-off { opacity: .45; cursor: not-allowed; }

.ho-choose__input:focus-visible + .ho-choose__body {
	outline: 3px solid var(--ho-blue);
	outline-offset: 3px;
	border-radius: 6px;
}

.ho-tiercardopt .ho-choose__body {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
}

.ho-choose__note {
	flex-grow: 1;
	font: 400 15px/1.4 var(--ho-font);
	color: var(--ho-body);
}

.ho-choose__price {
	font: 700 19px/1.2 var(--ho-font);
	color: var(--ho-navy);
	white-space: nowrap;
}

/* Age-band pills */
.ho-choose__group--pills .ho-choose__list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.ho-pillopt {
	display: inline-block;
	border: 1.5px solid #d4dee7;
	border-radius: 999px;
	padding: 10px 18px;
	cursor: pointer;
	font: 500 15px/1.2 var(--ho-font);
	color: var(--ho-ink);
}

.ho-pillopt:hover { border-color: var(--ho-blue); color: var(--ho-blue-ink); }

.ho-pillopt.is-on {
	background: var(--ho-blue);
	border-color: var(--ho-blue);
	color: #fff;
	font-weight: 700;
}

.ho-pillopt.is-off { opacity: .4; cursor: not-allowed; }

.woocommerce div.product .woocommerce-variation-price .price {
	font: 700 30px/1.2 var(--ho-font);
	color: var(--ho-navy);
}

.woocommerce div.product .reset_variations {
	font: 500 14px/1 var(--ho-font);
	color: var(--ho-muted);
}

@media (max-width: 640px) {
	.ho-buy__advisor { margin-left: 0; width: 100%; text-align: center; }
	.woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; }
	.ho-tiercardopt .ho-choose__body { gap: 8px; }
	.ho-choose__note { flex: 1 0 100%; order: 3; font-size: 14px; }
}

/* WooCommerce's own button reset leaves a native border on the cart button. */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.button {
	border: 0;
	border-radius: 999px;
	background: var(--ho-crimson);
	color: #fff;
	font: 700 16px/1.2 var(--ho-font);
	padding: 16px 32px;
	cursor: pointer;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: #ab1a1f;
	color: #fff;
}

.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
	background: #c9d4de;
	color: #6b7885;
	cursor: not-allowed;
}

/* ==========================================================================
   SINGLE PRODUCT — long-form sections sit outside div.product
   --------------------------------------------------------------------------
   Guidelines, "What's included", "Who this is for" and related packages are
   hooked to woocommerce_after_main_content, so they render after the shell
   closes and run the full width of the page. These rules clean up the seam.
   ========================================================================== */

/* Defensive: if a plugin ever puts them back inside div.product, they still
   drop below the floated gallery/summary instead of into the gutter. */
.ho-guide,
.ho-params,
.ho-who,
.ho-trust2{ clear: both; }

/* The product block no longer needs deep bottom padding — the next band
   supplies its own. */
.single-product .ho-woo { padding-bottom: 36px; }

/* One price, not two. The headline price in the summary is updated by
   healthon.js when a depth is chosen, so WooCommerce's own copy above the
   Add to cart button is redundant. */
.ho-has-variation .woocommerce-variation-price { display: none; }

/* Related packages band. */
.ho-related { padding-block: 56px; }
.ho-related .related > h2 {
	font: 700 26px/1.2 var(--ho-font);
	color: var(--ho-navy);
	letter-spacing: -.015em;
	margin: 0 0 22px;
}

/* ==========================================================================
   MOBILE / PRODUCT PAGE CORRECTIONS
   ========================================================================== */

/* The tier badge above the product title is written by healthon.js when a
   depth is chosen. Until then a product with no tier tag of its own has an
   empty container, which must not leave a gap above the title. */
.ho-single__badge.is-empty { display: none; }

/* The sticky buy bar is fixed to the bottom of the viewport, so without
   this the last part of the page sits underneath it and cannot be read or
   tapped. healthon.js measures the bar into --ho-sticky-h. */
body.single-product { padding-bottom: var(--ho-sticky-h, 0px); }

/* The capsule rail scrolls sideways on a phone. Without an edge fade there
   is nothing to show that more items exist past "Heart". */
@media (max-width: 979px) {
	.ho-bar__inner > .ho-nav {
		position: relative;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
	}
}

/* ==========================================================================
   HOME PAGE — centre strip and featured grid
   ========================================================================== */

.ho-centrestrip { padding-block: 56px; background: var(--ho-wash); border-top: 1px solid var(--ho-line); }

.ho-centrestrip__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.ho-centretile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ho-centretile:hover,
.ho-centretile:focus-visible {
	border-color: var(--ho-blue);
	box-shadow: 0 6px 18px rgba(16, 53, 78, .09);
	transform: translateY(-2px);
}

.ho-centretile.is-current { border-color: var(--ho-blue); box-shadow: inset 0 0 0 1px var(--ho-blue); }
.ho-centretile__pin { color: var(--ho-red); display: inline-flex; }
.ho-centretile__name { font: 700 17px/1.3 var(--ho-font); color: var(--ho-navy); }
.ho-centretile__meta { margin-top: auto; padding-top: 4px; font: 400 14px/1.4 var(--ho-font); color: var(--ho-muted); }

.ho-homegrid { padding-block: 60px; }
.ho-homecopy { padding-block: 10px 50px; }

/* ==========================================================================
   CART
   ========================================================================== */

.ho-page--shop { padding-block: 36px 64px; }
.ho-page--shop > article { max-width: none; }

.ho-bag__head { margin-bottom: 26px; }
.ho-bag__title { margin: 0 0 6px; font: 700 34px/1.15 var(--ho-font); }
.ho-bag__lede { margin: 0; color: var(--ho-body); }

.ho-bag__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 370px;
	gap: 32px;
	align-items: start;
}

.ho-lines { list-style: none; margin: 0 0 20px; padding: 0; }

.ho-line {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	gap: 18px;
	padding: 18px 0;
	border-bottom: 1px solid var(--ho-line);
	align-items: start;
}

.ho-line:first-child { border-top: 1px solid var(--ho-line); }
.ho-line__thumb img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 12px; }
.ho-line__name { margin: 0 0 6px; font: 700 18px/1.3 var(--ho-font); color: var(--ho-navy); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ho-line__name a { color: inherit; text-decoration: none; }
.ho-line__name a:hover { text-decoration: underline; }

.ho-line .variation,
.ho-line dl.variation { margin: 0 0 6px; font-size: 14.5px; color: var(--ho-muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ho-line dl.variation dt { font-weight: 600; margin: 0; }
.ho-line dl.variation dd { margin: 0; }
.ho-line dl.variation dd p { margin: 0; }

.ho-line__who { margin: 6px 0 0; display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ho-muted); }
.ho-line__side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ho-line__price { margin: 0; font: 700 19px/1.2 var(--ho-font); color: var(--ho-navy); }
.ho-line__price .amount { color: inherit; }

.ho-line__remove {
	font: 500 14px/1 var(--ho-font);
	color: var(--ho-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	border: 0;
	cursor: pointer;
}

.ho-line__remove:hover { color: var(--ho-red-ink); }

.ho-bag__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ho-coupon { display: flex; gap: 8px; flex: 1 1 280px; min-width: 0; }
.ho-coupon .ho-input { flex: 1 1 auto; min-width: 0; }
.ho-bag__update { background: none; border: 0; font: 500 15px/1 var(--ho-font); color: var(--ho-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ho-bag__update:hover { color: var(--ho-navy); }

.ho-bag__aside .cart_totals,
.ho-checkout__aside .ho-panel {
	background: var(--ho-wash);
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius-lg);
	padding: 22px;
}

.ho-bag__aside .cart_totals h2 { margin: 0 0 14px; font: 700 19px/1.2 var(--ho-font); }
.ho-bag__aside table { width: 100%; border-collapse: collapse; }
.ho-bag__aside table th,
.ho-bag__aside table td { padding: 10px 0; text-align: left; border-bottom: 1px solid var(--ho-line); font-size: 15px; }
.ho-bag__aside table td { text-align: right; }
.ho-bag__aside .order-total th,
.ho-bag__aside .order-total td { border-bottom: 0; font-weight: 700; font-size: 18px; color: var(--ho-navy); }
.ho-bag__aside .wc-proceed-to-checkout { margin-top: 16px; }
.ho-bag__aside .checkout-button { display: block; width: 100%; text-align: center; }

.ho-assure--cart { margin-top: 18px; }
.ho-empty--cart { text-align: center; padding-block: 60px; }
.ho-empty__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }

/* ==========================================================================
   CHECKOUT
   ========================================================================== */

.ho-checkout__head { margin-bottom: 26px; }
.ho-checkout__title { margin: 0 0 6px; font: 700 34px/1.15 var(--ho-font); }
.ho-checkout__lede { margin: 0; color: var(--ho-body); max-width: 640px; }

.ho-checkout__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 32px;
	align-items: start;
}

.ho-panel {
	background: #fff;
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius-lg);
	padding: 24px;
	margin-bottom: 22px;
}

.ho-panel__title { margin: 0 0 4px; font: 700 21px/1.25 var(--ho-font); }
.ho-panel__note { margin: 0 0 18px; font-size: 14.5px; color: var(--ho-muted); }
.ho-panel--sticky { position: sticky; top: 20px; }

/* WooCommerce's own field markup, restyled. */
.ho-checkout .form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.ho-checkout .form-row label { font: 600 14px/1.3 var(--ho-font); color: var(--ho-navy); }
.ho-checkout .form-row .required { color: var(--ho-red-ink); text-decoration: none; }

.ho-checkout .input-text,
.ho-checkout select,
.ho-checkout textarea {
	width: 100%;
	padding: 12px 14px;
	font: 400 15.5px/1.4 var(--ho-font);
	color: var(--ho-ink);
	background: #fff;
	border: 1px solid var(--ho-line);
	border-radius: 10px;
}

.ho-checkout .input-text:focus,
.ho-checkout select:focus,
.ho-checkout textarea:focus {
	outline: 0;
	border-color: var(--ho-blue);
	box-shadow: 0 0 0 3px rgba(36, 118, 173, .16);
}

.ho-checkout textarea { min-height: 92px; resize: vertical; }

.ho-checkout .woocommerce-billing-fields__field-wrapper,
.ho-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

.ho-checkout .form-row-wide,
.ho-checkout .notes { grid-column: 1 / -1; }

.ho-checkout #order_review table { width: 100%; border-collapse: collapse; }
.ho-checkout #order_review th,
.ho-checkout #order_review td { padding: 11px 0; text-align: left; border-bottom: 1px solid var(--ho-line); font-size: 15px; }
.ho-checkout #order_review td { text-align: right; }
.ho-checkout #order_review .order-total th,
.ho-checkout #order_review .order-total td { border-bottom: 0; font-weight: 700; font-size: 18px; color: var(--ho-navy); }
.ho-checkout #payment { margin-top: 16px; }
.ho-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ho-checkout #payment ul.payment_methods li { background: #fff; border: 1px solid var(--ho-line); border-radius: 10px; padding: 12px 14px; }
.ho-checkout #payment .place-order { margin: 0; }
.ho-checkout #payment #place_order { width: 100%; }

/* ==========================================================================
   THANK YOU
   ========================================================================== */

.ho-orderdone { padding-block: 56px 72px; }
.ho-orderdone__inner { max-width: 780px; }

.ho-orderdone__mark {
	display: inline-grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 999px;
	background: rgba(51, 162, 73, .14);
	color: var(--ho-green-ink);
	margin-bottom: 16px;
}

.ho-orderdone__title { margin: 0 0 8px; font: 700 34px/1.15 var(--ho-font); }
.ho-orderdone__lede { margin: 0 0 26px; color: var(--ho-body); font-size: 17px; }

.ho-orderdone__meta {
	list-style: none;
	margin: 0 0 30px;
	padding: 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	background: var(--ho-wash);
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius-lg);
}

.ho-orderdone__meta li { display: flex; flex-direction: column; gap: 3px; }
.ho-orderdone__meta span { font: 700 11px/1 var(--ho-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ho-muted); }
.ho-orderdone__meta strong { font: 700 17px/1.25 var(--ho-font); color: var(--ho-navy); }

.ho-orderdone__block { margin-bottom: 30px; }
.ho-orderdone__block h2 { margin: 0 0 12px; font: 700 21px/1.25 var(--ho-font); }
.ho-orderdone__people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ho-orderdone__people li { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--ho-line); border-radius: var(--ho-radius); }
.ho-orderdone__people strong { color: var(--ho-navy); }
.ho-orderdone__people span { font-size: 14.5px; color: var(--ho-muted); }
.ho-orderdone__steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--ho-body); }
.ho-orderdone__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* ==========================================================================
   SHOP PAGES — narrow screens
   ========================================================================== */

@media (max-width: 1023px) {
	.ho-bag__layout,
	.ho-checkout__layout { grid-template-columns: minmax(0, 1fr); }
	.ho-panel--sticky { position: static; }
	.ho-centrestrip__grid { grid-template-columns: repeat(2, 1fr); }
	.ho-orderdone__meta { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 719px) {
	.ho-bag__title,
	.ho-checkout__title,
	.ho-orderdone__title { font-size: 27px; }

	.ho-line { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
	.ho-line__thumb img { width: 72px; height: 72px; }
	.ho-line__side { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; justify-content: space-between; width: 100%; }
	.ho-line__name { font-size: 16.5px; }

	.ho-bag__actions { flex-direction: column; align-items: stretch; }
	.ho-coupon { flex: 1 1 auto; }

	.ho-checkout .woocommerce-billing-fields__field-wrapper,
	.ho-checkout .woocommerce-additional-fields__field-wrapper,
	.ho-patients__grid { grid-template-columns: 1fr; }

	.ho-panel { padding: 18px; }
	.ho-orderdone__meta { grid-template-columns: 1fr; padding: 16px; }
	.ho-orderdone__actions .ho-btn { width: 100%; text-align: center; }
}

@media (max-width: 479px) {
	.ho-centrestrip__grid { grid-template-columns: 1fr; }
}

/* The theme does not set a global border-box, so anything given width:100%
   alongside padding must opt in or it overflows its container. */
.ho-bag__aside .checkout-button,
.ho-bag__aside .cart_totals,
.ho-checkout #place_order,
.ho-checkout .input-text,
.ho-checkout select,
.ho-checkout textarea,
.ho-coupon .ho-input { box-sizing: border-box; }

/* ==========================================================================
   WOOCOMMERCE DEFAULTS — cart and checkout
   --------------------------------------------------------------------------
   WooCommerce ships its own stylesheet, and several of its rules fight the
   theme's layout: .cart_totals is floated at 48% width, its buttons are
   left unstyled (so they fall back to the WordPress purple), and the remove
   link sets colour with !important.
   ========================================================================== */

/* Totals panel: full width of the aside, not floated. */
.ho-bag__aside .cart-collaterals,
.ho-page--shop .ho-bag__aside .cart-collaterals { width: 100%; float: none; }

.ho-bag__aside .cart_totals,
.ho-page--shop .ho-bag__aside .cart_totals,
.ho-page--shop .ho-bag__aside .cart_totals {
	width: 100%;
	float: none;
	box-sizing: border-box;
}

.ho-bag__aside .cart_totals table,
.ho-bag__aside .shop_table { width: 100%; table-layout: auto; margin: 0; border: 0; }
.ho-bag__aside .cart_totals table th,
.ho-bag__aside .cart_totals table td { background: transparent; border-left: 0; border-right: 0; }

/* Brand buttons for everything WooCommerce renders itself. */
.ho-page--shop .button,
.ho-page--shop a.button,
.ho-page--shop button.button,
.ho-page--shop input.button,
.ho-page--shop a.button.alt,
.ho-page--shop button.button.alt,
.ho-page--shop input.button.alt,
.ho-page--shop .checkout-button,
.ho-page--shop a.checkout-button.button.alt,
.ho-page--shop #place_order,
.ho-page--shop #place_order {
	display: inline-block;
	background: var(--ho-crimson);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font: 700 15px/1.2 var(--ho-font);
	padding: 14px 26px;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	box-sizing: border-box;
	cursor: pointer;
}

.ho-page--shop .button:hover,
.ho-page--shop a.button:hover,
.ho-page--shop button.button:hover,
.ho-page--shop a.button.alt:hover,
.ho-page--shop button.button.alt:hover,
.ho-page--shop a.checkout-button.button.alt:hover,
.ho-page--shop #place_order:hover {
	background: #ab1a1f;
	color: #fff;
}

/* The two full-width calls to action. */
.ho-page--shop .checkout-button,
.ho-page--shop a.checkout-button.button.alt,
.ho-page--shop #place_order,
.ho-page--shop #place_order { display: block; width: 100%; }

/* Ghost treatment for the secondary buttons the theme renders. */
.ho-page--shop .ho-btn--ghost {
	background: #fff;
	color: var(--ho-blue-ink);
	border: 1.5px solid var(--ho-blue);
	padding: 12.5px 24px;
}

.ho-page--shop .ho-btn--ghost:hover { background: var(--ho-wash); color: var(--ho-blue-ink); }

/* Remove link: WooCommerce sets colour with !important, so this must too. */
.woocommerce .ho-line__remove,
.woocommerce a.ho-line__remove.remove,
.ho-line__remove.remove {
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	font: 500 14px/1 var(--ho-font) !important;
	color: var(--ho-muted) !important;
	background: none !important;
	border-radius: 0 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce a.ho-line__remove.remove:hover,
.ho-line__remove.remove:hover { color: var(--ho-red-ink) !important; background: none !important; }

/* Notices, so they read as part of the page rather than a plugin default. */
.ho-page--shop .woocommerce-message,
.ho-page--shop .woocommerce-info,
.ho-page--shop .woocommerce-error {
	border: 1px solid var(--ho-line);
	border-left: 4px solid var(--ho-blue);
	border-radius: var(--ho-radius);
	background: var(--ho-wash);
	color: var(--ho-ink);
	padding: 14px 18px;
	margin: 0 0 22px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

.ho-page--shop .woocommerce-message { border-left-color: var(--ho-green-ink); }
.ho-page--shop .woocommerce-error { border-left-color: var(--ho-red-ink); }
.ho-page--shop .woocommerce-message::before,
.ho-page--shop .woocommerce-info::before,
.ho-page--shop .woocommerce-error::before { display: none; }
.ho-page--shop .woocommerce-message .button { margin-left: auto; padding: 9px 18px; font-size: 14px; }

/* Centre appointment block on the checkout. */
.ho-appt { margin-top: 22px; }
.ho-appt__title { margin: 0 0 4px; font: 700 19px/1.25 var(--ho-font); color: var(--ho-navy); }
.ho-appt__lede { margin: 0 0 16px; font-size: 14.5px; color: var(--ho-muted); }
.ho-appt__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ho-appt .ho-input { box-sizing: border-box; width: 100%; }
.ho-patients .ho-input { box-sizing: border-box; width: 100%; }

@media (max-width: 719px) {
	.ho-appt__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CHECKOUT FORM — WooCommerce's own headings and tables
   ========================================================================== */

/* The panel already carries "Billing contact", and the patient blocks carry
   their own heading, so WooCommerce's "Billing details" and "Additional
   information" headings are duplicates. */
.ho-page--shop .woocommerce-billing-fields > h3,
.ho-page--shop .woocommerce-shipping-fields > h3,
.ho-page--shop .woocommerce-additional-fields > h3 { display: none; }

/* The required marker is an <abbr>, which browsers underline. */
.ho-page--shop abbr.required,
.ho-page--shop abbr[title] {
	border: 0;
	text-decoration: none;
	color: var(--ho-red-ink);
	cursor: default;
}

/* Order summary table. The product column carries the variation meta, which
   needs room to breathe rather than wrapping a word at a time. */
.ho-page--shop .woocommerce-checkout-review-order-table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	table-layout: auto;
	margin: 0;
}

.ho-page--shop .woocommerce-checkout-review-order-table thead { display: none; }

.ho-page--shop .woocommerce-checkout-review-order-table th,
.ho-page--shop .woocommerce-checkout-review-order-table td {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ho-line);
	padding: 12px 0;
	font: 400 15px/1.5 var(--ho-font);
	text-transform: none;
	letter-spacing: 0;
	vertical-align: top;
}

/* Only the money column may refuse to wrap. The product column carries a
   long centre name, and nowrap there forced the table 100px wider than the
   panel on a phone. */
.ho-page--shop .woocommerce-checkout-review-order-table { table-layout: fixed; }
.ho-page--shop .woocommerce-checkout-review-order-table td { text-align: right; }
.ho-page--shop .woocommerce-checkout-review-order-table .product-total,
.ho-page--shop .woocommerce-checkout-review-order-table tfoot td { white-space: nowrap; width: 38%; }

.ho-page--shop .woocommerce-checkout-review-order-table .product-name,
.ho-page--shop .woocommerce-checkout-review-order-table tfoot th {
	text-align: left;
	font-weight: 700;
	color: var(--ho-navy);
	padding-right: 14px;
	overflow-wrap: anywhere;
}
.ho-page--shop .woocommerce-checkout-review-order-table .product-quantity { font-weight: 400; color: var(--ho-muted); }

/* Variation meta under the product name. */
.ho-page--shop .wc-item-meta,
.ho-page--shop .variation {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 2px 10px;
	overflow-wrap: anywhere;
	font: 400 13.5px/1.45 var(--ho-font);
	color: var(--ho-muted);
}

.ho-page--shop .wc-item-meta li { display: contents; }
.ho-page--shop .wc-item-meta strong,
.ho-page--shop .variation dt { font-weight: 600; white-space: nowrap; }
.ho-page--shop .wc-item-meta p,
.ho-page--shop .variation dd,
.ho-page--shop .variation dd p { margin: 0; }

.ho-page--shop .woocommerce-checkout-review-order-table tfoot th,
.ho-page--shop .woocommerce-checkout-review-order-table tfoot td { font-weight: 700; }
.ho-page--shop .woocommerce-checkout-review-order-table tfoot .order-total th,
.ho-page--shop .woocommerce-checkout-review-order-table tfoot .order-total td {
	border-bottom: 0;
	font-size: 18px;
	color: var(--ho-navy);
	padding-top: 14px;
}

/* Payment box: WooCommerce gives it a grey slab and a rounded top. */
.ho-page--shop #payment,
.ho-page--shop .woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	margin-top: 18px;
}

.ho-page--shop #payment div.form-row { padding: 0; margin: 14px 0 0; }
.ho-page--shop #payment div.payment_box {
	background: var(--ho-wash);
	color: var(--ho-body);
	font-size: 14px;
	border-radius: 10px;
	margin: 10px 0 0;
	padding: 12px 14px;
}
.ho-page--shop #payment div.payment_box::before { display: none; }

.ho-page--shop .woocommerce-privacy-policy-text {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ho-muted);
	margin: 0 0 14px;
}
.ho-page--shop .woocommerce-privacy-policy-text p { margin: 0; }

/* Coupon prompt above the form. */
.ho-page--shop .woocommerce-form-coupon-toggle { margin-bottom: 18px; }
.ho-page--shop .checkout_coupon { border: 1px solid var(--ho-line); border-radius: var(--ho-radius); padding: 18px; margin: 0 0 22px; }
.ho-page--shop .checkout_coupon .form-row { margin-bottom: 0; }

/* ==========================================================================
   HOME PAGE
   ========================================================================== */

.ho-eyebrow { margin: 0 0 12px; font: 700 12px/1 var(--ho-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ho-blue-ink); }
.ho-sec__title { margin: 0 0 10px; font: 700 32px/1.2 var(--ho-font); letter-spacing: -.015em; color: var(--ho-navy); }
.ho-sec__lede { margin: 0 0 30px; font-size: 17px; line-height: 1.6; color: var(--ho-body); max-width: 720px; }

/* Hero ---------------------------------------------------------------------- */

.ho-hero2 {
	background: linear-gradient(180deg, var(--ho-wash) 0%, #fff 86%);
	border-bottom: 1px solid var(--ho-line-soft);
	padding: 15px 0 60px;
}

.ho-hero2__intro { max-width: 100%; margin-bottom: 5px; }
.ho-hero2__title { margin: 0 0 1px; font: 700 40px/1.14 var(--ho-font); letter-spacing: -.02em; color: var(--ho-navy); }
.ho-hero2__lede { margin: 0; font-size: 17.5px; line-height: 1.2; color: var(--ho-body);margin-bottom:5px; }

/* Life-stage cards ---------------------------------------------------------- */

.ho-life { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0 0 52px; }

.ho-lifecard {
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--ho-line);
	background: #fff;
}

.ho-lifecard--him { border-color: #d5e4f0; background: linear-gradient(180deg, #eff6fb 0%, #f8fbfd 100%); --ho-card: #1a5a87; --ho-card-solid: #10354e; --ho-card-soft: #e6f0f8; }
.ho-lifecard--her { border-color: #efd6e1; background: linear-gradient(180deg, #fcf0f5 0%, #fef9fb 100%); --ho-card: #9b1b52; --ho-card-solid: #9b1b52; --ho-card-soft: #faebf1; }

.ho-lifecard__head { display: flex; gap: 18px; align-items: flex-start; padding: 5px 26px 0; }
.ho-lifecard__copy { flex: 1 1 auto; min-width: 0; }
.ho-lifecard__kicker { margin: 0 0 2px; font-size: 16px; line-height: 1.2; color: var(--ho-body); }
.ho-lifecard__who { margin: 0; font: 700 38px/1.05 var(--ho-font); letter-spacing: -.02em; color: var(--ho-card); }
.ho-lifecard__blurb { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ho-body); }

.ho-lifecard__thumb {
	flex: 0 0 104px;
	width: 104px;
	height: 104px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--ho-card-soft);
	color: var(--ho-card);
}

.ho-lifecard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Selectable tiles ---------------------------------------------------------- */

.ho-pickset { border: 0; margin: 0; padding: 0px 26px 0; }
.ho-pickset legend { padding: 5px 0 10px; font: 700 11px/1 var(--ho-font); letter-spacing: .09em; text-transform: uppercase; color: var(--ho-muted); }
.ho-pickset--chips { padding: 0 0 14px; }
.ho-pickset__grid { display: grid; gap: 10px; }
.ho-pickset__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ho-pickset__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ho-pick {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 1px 10px;
	text-align: center;
	background: #fff;
	border: 2px solid var(--ho-line);
	border-radius: 12px;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ho-pick--depth { text-align: left; padding: 5px 14px; }
.ho-pick:hover { border-color: #c6d4e2; }

.ho-pick.is-on {
	border-color: var(--ho-card, var(--ho-blue));
	box-shadow: 0 2px 8px rgba(16, 53, 78, .12);
}

.ho-pick__icon {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	margin: 0 auto 7px;
	background: var(--ho-card-soft, var(--ho-wash));
	color: var(--ho-card, var(--ho-blue));
}

.ho-pick__name { display: block; font: 700 15px/1.2 var(--ho-font); color: var(--ho-navy); }
.ho-pick__name--core { color: var(--ho-green-ink); }
.ho-pick__name--prime { color: var(--ho-card, var(--ho-red-ink)); }
.ho-pick__note { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--ho-muted); }

.ho-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.ho-chip2 {
	min-height: 40px;
	padding: 9px 15px;
	border: 1.5px solid var(--ho-line);
	border-radius: 999px;
	background: #fff;
	font: 700 12.5px/1.2 var(--ho-font);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ho-ink);
	cursor: pointer;
}

.ho-chip2.is-on { background: var(--ho-navy); border-color: var(--ho-navy); color: #fff; }

/* Card footer and buttons --------------------------------------------------- */

.ho-lifecard__foot { padding: 1px 26px 26px; margin-top: auto; }
.ho-cardstatus { margin: 0 0 12px; min-height: 20px; font-size: 13.5px; line-height: 1.5; color: var(--ho-muted); }
.ho-cardbtns { display: flex; flex-wrap: wrap; gap: 10px; }

.ho-cardbtns__add,
.ho-cardbtns__view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	flex: 1 1 180px;
	min-height: 20px;
	border-radius: 12px;
	text-decoration: none;
}

.ho-cardbtns__add { background: var(--ho-card-solid, var(--ho-crimson)); color: #fff; }
.ho-cardbtns__add:hover { background: var(--ho-navy-deep); color: #fff; }

.ho-cardbtns__add.is-disabled {
	background: #e9eef4;
	color: #7c8894;
	cursor: not-allowed;
	pointer-events: auto;
}

.ho-cardbtns__view {
	background: #fff;
	border: 1.5px solid var(--ho-card, var(--ho-blue));
	color: var(--ho-card, var(--ho-blue-ink));
}

.ho-cardbtns__view:hover { background: var(--ho-wash); color: var(--ho-card, var(--ho-blue-ink)); }

/* Focus slider -------------------------------------------------------------- */

.ho-sec__head--slider { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }
.ho-slider__nav { display: flex; gap: 8px; flex-shrink: 0; margin-bottom: 30px; }

.ho-slider__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--ho-line);
	border-radius: 999px;
	background: #fff;
	color: var(--ho-navy);
	cursor: pointer;
}

.ho-slider__btn:hover:not(:disabled) { border-color: var(--ho-blue); color: var(--ho-blue-ink); }
.ho-slider__btn:disabled { opacity: .4; cursor: default; }

.ho-slider { position: relative; }

.ho-slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * 22px) / 3);
	gap: 22px;
	margin: 0;
	padding: 4px 0 10px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ho-slider__track::-webkit-scrollbar { display: none; }
.ho-slider__slide { scroll-snap-align: start; min-width: 0; }

.ho-focuscard {
	display: flex;
	flex-direction: column;
	height: 85%;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--ho-line);
	border-radius: 18px;
}

.ho-focuscard__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.ho-focuscard__icon {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: var(--ho-wash);
	color: var(--ho-blue);
	flex-shrink: 0;
}

.ho-focuscard__title { margin: 0; font: 700 18.5px/1.25 var(--ho-font); color: var(--ho-navy); }
.ho-focuscard__blurb { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--ho-body); }
.ho-focuscard .ho-cardstatus { margin-top: auto; }

/* Trust strip --------------------------------------------------------------- */

.ho-trust2 { background: var(--ho-navy); }
.ho-trust2__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-block: 30px; }
.ho-trust2__big { margin: 0 0 4px; font: 700 28px/1.1 var(--ho-font); color: #fff; }
.ho-trust2__head { margin: 0 0 4px; font: 700 16.5px/1.25 var(--ho-font); color: #fff; }
.ho-trust2__note { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ho-footer-link); }

/* Why ----------------------------------------------------------------------- */

.ho-why { padding: 66px 0; }
.ho-why__grid { display: flex; flex-wrap: wrap; gap: 56px; }
.ho-why__main { flex: 1 1 520px; min-width: 0; }
.ho-why__main p { font-size: 16px; line-height: 1.65; color: var(--ho-body); margin: 0 0 14px; }
.ho-why__standfirst { font-size: 18px !important; line-height: 1.55 !important; color: var(--ho-navy) !important; font-weight: 500; margin-bottom: 20px !important; }
.ho-why__aside { flex: 1 1 440px; min-width: 0; }

.ho-why__quote { background: var(--ho-wash); border: 1px solid var(--ho-line); border-radius: 18px; padding: 28px; margin-bottom: 20px; }
.ho-why__quote p { margin: 0 0 14px; font-size: 17px; line-height: 1.55; color: var(--ho-navy); font-weight: 500; }
.ho-why__quote p:last-child { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ho-body); font-weight: 400; }
.ho-why__quote em { font-style: normal; font-weight: 700; color: var(--ho-crimson); }

.ho-progcard { border: 1px solid var(--ho-line); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; }
.ho-progcard--blue { border-left: 4px solid var(--ho-blue); }
.ho-progcard--red { border-left: 4px solid var(--ho-crimson); }
.ho-progcard__title { margin: 0 0 4px; font: 700 16.5px/1.3 var(--ho-font); color: var(--ho-navy); }
.ho-progcard p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ho-body); }

/* Centres ------------------------------------------------------------------- */

.ho-centres2 { padding: 66px 0; }
.ho-centres2__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }

.ho-centretile2 { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--ho-line); border-radius: 18px; overflow: hidden; }
.ho-centretile2.is-current { border-color: var(--ho-blue); box-shadow: inset 0 0 0 1px var(--ho-blue); }

.ho-centretile2__media {
	height: 150px;
	display: grid;
	place-items: center;
	background: #e3eaf1;
	border-bottom: 1px solid var(--ho-line);
	font: 700 11px/1 var(--ho-font);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ho-muted);
}

.ho-centretile2__body { padding: 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.ho-centretile2__body h3 { margin: 0 0 2px; font: 700 18px/1.25 var(--ho-font); color: var(--ho-navy); }
.ho-centretile2__sub { margin: 0 0 16px; font-size: 14px; color: var(--ho-muted); }
.ho-centretile2__go { display: inline-block; margin-bottom: 12px; font: 700 15px/1.2 var(--ho-font); color: var(--ho-blue-ink); text-decoration: none; }
.ho-centretile2__go:hover { text-decoration: underline; }
.ho-centretile2__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

.ho-minibtn {
	flex: 1 1 auto;
	text-align: center;
	padding: 9px 12px;
	border: 1px solid var(--ho-line);
	border-radius: 999px;
	font: 600 13.5px/1.2 var(--ho-font);
	color: var(--ho-ink);
	text-decoration: none;
}

.ho-minibtn:hover { border-color: var(--ho-blue); color: var(--ho-blue-ink); }

/* Tests --------------------------------------------------------------------- */

.ho-tests { background: var(--ho-wash); border-top: 1px solid var(--ho-line); padding: 66px 0; }
.ho-tests__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.ho-testcard { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--ho-line); border-radius: 18px; padding: 26px; }
.ho-testcard__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ho-wash); color: var(--ho-blue); flex-shrink: 0; }
.ho-testcard h3 { margin: 0 0 6px; font: 700 18px/1.3 var(--ho-font); color: var(--ho-navy); }
.ho-testcard p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ho-body); }

/* FAQs ---------------------------------------------------------------------- */

.ho-faq2 { padding: 30px 0; }
.ho-faq2__inner { max-width: 100%; }
.ho-faq2__list { display: flex; flex-direction: column; gap: 12px; }

.ho-faq2__item { background: #fff; border: 1px solid var(--ho-line); border-radius: 14px; padding: 18px 22px; }
.ho-faq2__item summary { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; font: 700 16.5px/1.45 var(--ho-font); color: var(--ho-navy); cursor: pointer; list-style: none; }
.ho-faq2__item summary::-webkit-details-marker { display: none; }
.ho-faq2__plus { flex-shrink: 0; margin-top: 2px; color: var(--ho-blue); transition: transform .15s ease; }
.ho-faq2__item[open] .ho-faq2__plus { transform: rotate(45deg); }
.ho-faq2__item p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ho-body); }

/* ==========================================================================
   STICKY CALLBACK BAR
   ========================================================================== */

.ho-stickybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	background: #fff;
	border-top: 1px solid var(--ho-line);
	box-shadow: 0 -6px 22px rgba(16, 53, 78, .09);
}

.ho-stickybar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-block: 12px; }
.ho-stickybar__form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; margin: 0; }
.ho-stickybar__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ho-stickybar__copy { display: flex; flex-direction: column; min-width: 0; }
.ho-stickybar__copy strong { font: 700 15.5px/1.3 var(--ho-font); color: var(--ho-navy); }
.ho-stickybar__copy span { font-size: 13.5px; line-height: 1.4; color: var(--ho-muted); }

.ho-stickybar__fields { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.ho-stickybar__name { width: 160px; }
.ho-stickybar__phone { width: 180px; }

.ho-stickybar__name,
.ho-stickybar__phone {
	box-sizing: border-box;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--ho-line);
	border-radius: 10px;
	font: 400 15.5px/1.4 var(--ho-font);
	color: var(--ho-ink);
	background: #fff;
}

.ho-stickybar__name:focus,
.ho-stickybar__phone:focus { outline: 0; border-color: var(--ho-blue); box-shadow: 0 0 0 3px rgba(36, 118, 173, .16); }

.ho-stickybar__send { min-height: 46px; padding: 12px 22px; white-space: nowrap; }

.ho-stickybar__calls { position: relative; flex-shrink: 0; }

.ho-stickybar__callbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 11px 18px;
	border: 1.5px solid var(--ho-blue);
	border-radius: 999px;
	background: #fff;
	font: 700 14.5px/1.2 var(--ho-font);
	color: var(--ho-blue-ink);
	cursor: pointer;
	white-space: nowrap;
}

.ho-stickybar__callbtn:hover { background: var(--ho-wash); }

.ho-stickybar__numbers {
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	z-index: 2;
	min-width: 260px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--ho-line);
	border-radius: 14px;
	box-shadow: 0 12px 34px rgba(16, 53, 78, .18);
}

.ho-stickybar__numbers[hidden] { display: none; }
.ho-stickybar__numbers li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 10px; }
.ho-stickybar__numbers li + li { border-top: 1px solid var(--ho-line-soft); }
.ho-stickybar__city { font: 600 14.5px/1.2 var(--ho-font); color: var(--ho-navy); }
.ho-stickybar__tel { font: 700 15px/1.2 var(--ho-font); color: var(--ho-blue-ink); text-decoration: none; white-space: nowrap; }
.ho-stickybar__tel.is-empty { font-weight: 400; font-size: 13.5px; color: var(--ho-muted); }

/* Keep the bar off the end of the page. */
body.home,
body.front-page { padding-bottom: var(--ho-stickybar-h, 0px); }

/* The compare tray and the sticky buy bar sit above it. */
.ho-tray { bottom: calc(var(--ho-sticky-h, 0px) + var(--ho-stickybar-h, 0px)); }

/* ==========================================================================
   CALLBACK POPUP
   ========================================================================== */

.ho-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; }
.ho-modal[hidden] { display: none; }
.ho-modal__scrim { position: absolute; inset: 0; background: rgba(16, 53, 78, .58); border: 0; }
html.ho-modal-open { overflow: hidden; }

.ho-modal__panel {
	position: relative;
	width: 91%;
	max-width: 620px;
	max-height: 92vh;
	overflow: auto;
	padding: 26px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(16, 53, 78, .3);
}

.ho-modal__close {
	position: absolute;
	top: 18px;
	right: 18px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ho-line);
	border-radius: 999px;
	background: #fff;
	color: var(--ho-ink);
	cursor: pointer;
}

.ho-modal__close:hover { background: var(--ho-wash); }

.ho-modal__eyebrow {
	display: inline-block;
	margin: 0 0 12px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--ho-navy);
	font: 700 11px/1 var(--ho-font);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #fff;
}

.ho-modal__title { margin: 0 0 8px; font: 700 26px/1.2 var(--ho-font); letter-spacing: -.015em; color: var(--ho-navy); padding-right: 52px; }
.ho-modal__lede { margin: 0 0 22px; font-size: 15.5px; line-height: 1.6; color: var(--ho-body); }
.ho-modal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 16px; }
.ho-modal .ho-field--wide { grid-column: 1 / -1; }
.ho-modal .ho-input { box-sizing: border-box; width: 100%; }
.ho-field__hint { font-size: 12.5px; color: var(--ho-muted); }

.ho-modal__consent { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; }
.ho-modal__consent input { margin: 3px 0 0; width: 17px; height: 17px; flex-shrink: 0; }
.ho-modal__consent label { font-size: 13.5px; line-height: 1.5; color: var(--ho-body); }
.ho-modal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ho-modal__note { font-size: 13px; color: var(--ho-muted); }

/* ==========================================================================
   HOME PAGE — narrow screens
   ========================================================================== */

@media (max-width: 1023px) {
	.ho-life { grid-template-columns: minmax(0, 1fr); }
	.ho-trust2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ho-centres2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ho-tests__grid { grid-template-columns: minmax(0, 1fr); }

	/* Two across, so a third card still peeks in. */
	.ho-slider__track { grid-auto-columns: calc((100% - 18px) / 2); gap: 18px; }

	/* The pitch costs a second row on the bar here, and the field says
	   enough on its own. */
	.ho-stickybar__copy { display: none; }

	/* The form must be allowed to shrink, or it fills the row on its own
	   and pushes "Call a centre" onto a second line. */
	.ho-stickybar__form { flex: 1 1 320px; min-width: 0; }
	.ho-stickybar__fields { margin-left: 0; flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; }
	.ho-stickybar__name { flex: 0 1 140px; min-width: 0; }
	.ho-stickybar__phone { flex: 1 1 auto; width: auto; min-width: 0; max-width: 220px; }
}

@media (max-width: 719px) {
	.ho-hero2 { padding: 28px 0 44px; }
	.ho-hero2__title { font-size: 28px; }
	.ho-hero2__lede { font-size: 16px; }
	.ho-sec__title { font-size: 25px; }

	.ho-lifecard__head { padding: 20px 18px 0; }
	.ho-lifecard__who { font-size: 30px; }
	.ho-lifecard__thumb { flex-basis: 76px; width: 76px; height: 76px; }
	.ho-pickset { padding: 18px 18px 0; }
	.ho-pickset__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ho-pickset__grid--2 { grid-template-columns: minmax(0, 1fr); }
	.ho-pick { text-align: left; }
	.ho-pick__icon { margin-left: 0; }
	.ho-lifecard__foot { padding: 16px 18px 20px; }
	.ho-cardbtns { flex-direction: column; }
	.ho-cardbtns__add, .ho-cardbtns__view { flex: 1 1 auto; width: 100%; }

	/* One and a half cards, so it reads as a slider at a glance. */
	.ho-slider__track { grid-auto-columns: 68%; gap: 14px; }
	.ho-slider__nav { margin-bottom: -10px;margin-left: 225px; }

	.ho-trust2__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.ho-why { padding: 40px 0; }
	.ho-why__grid { gap: 32px; }
	.ho-centres2, .ho-tests, .ho-faq2 { padding: 40px 0; }
	.ho-centres2__grid { grid-template-columns: minmax(0, 1fr); }
	.ho-modal__grid { grid-template-columns: minmax(0, 1fr); }
	.ho-modal__panel { padding: 20px; }
	.ho-modal__title { font-size: 22px; }

	/* Sticky bar: the pitch is implied by the field, so drop the copy. */
	.ho-stickybar__inner { padding-block: 10px; gap: 10px; }
	.ho-stickybar__copy { display: none; }
	.ho-stickybar__form { gap: 8px; }
	.ho-stickybar__fields { width: 100%; margin-left: 0; flex-wrap: nowrap; }
	.ho-stickybar__name { display: none; }
	.ho-stickybar__phone { flex: 1 1 auto; width: auto; min-width: 0; }
	.ho-stickybar__send { flex-shrink: 0; padding: 12px 16px; font-size: 14px; }
	.ho-stickybar__calls { width: 100%; }
	.ho-stickybar__callbtn { width: 100%; justify-content: center; }
	.ho-stickybar__numbers { left: 0; right: 0; min-width: 0; }
}

/* ==========================================================================
   LOCATION PAGE — copy sections below the grid
   ========================================================================== */

.ho-loc { padding: 56px 0; border-top: 1px solid var(--ho-line); }
.ho-loc--choose { background: #fff; }
.ho-loc--visit { background: var(--ho-wash); }
.ho-loc--faq { background: #fff; }
.ho-loc__inner { max-width: 100%; }
.ho-loc__title { margin: 0 0 16px; font: 700 28px/1.22 var(--ho-font); letter-spacing: -.015em; color: var(--ho-navy); }
.ho-loc__inner > p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.65; color: var(--ho-body); }

.ho-loc__list { margin: 0 0 18px; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.ho-loc__list li { font-size: 16.5px; line-height: 1.6; color: var(--ho-body); }
.ho-loc__list strong { color: var(--ho-navy); }

.ho-loc__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 22px 0 0 !important;
	padding: 16px 20px;
	background: var(--ho-wash);
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius);
	font-size: 16px !important;
}

.ho-loc__cta-icon { display: inline-flex; color: var(--ho-crimson); }
.ho-loc__cta a { font-weight: 700; }

.ho-visit { background: #fff; border: 1px solid var(--ho-line); border-radius: var(--ho-radius-lg); padding: 24px; }
.ho-visit__name { margin: 0 0 14px; font: 700 18px/1.3 var(--ho-font); color: var(--ho-navy); }
.ho-visit__row { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--ho-body); }
.ho-visit__row:last-child { margin-bottom: 0; }
.ho-visit__icon { flex-shrink: 0; margin-top: 3px; color: var(--ho-crimson); display: inline-flex; }
.ho-visit__row strong { color: var(--ho-navy); }
.ho-visit__tel { font-weight: 700; }
.ho-visit__map { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 719px) {
	.ho-loc { padding: 40px 0; }
	.ho-loc__title { font-size: 23px; }
	.ho-loc__inner > p, .ho-loc__list li { font-size: 15.5px; }
	.ho-visit { padding: 18px; }
}





/* ==========================================================================
   STICKY BARS ON EVERY PAGE  — append to the END of assets/css/healthon.css
   ========================================================================== */

/* Every page needs the clearance, not just the home page. */
body { padding-bottom: var(--ho-stickybar-h, 0px); }

/* A product page carries the buy bar as well. */
body.single-product {
	padding-bottom: calc(var(--ho-sticky-h, 0px) + var(--ho-stickybar-h, 0px));
}

/* The buy bar rides above the callback bar. */
.ho-sticky { bottom: var(--ho-stickybar-h, 0px); }

/* The compare tray sits above both. */
.ho-tray { bottom: calc(var(--ho-sticky-h, 0px) + var(--ho-stickybar-h, 0px)); }

/* Two stacked bars eat a lot of a phone screen. On a product page the buy
   bar is the one that matters, so the callback bar steps aside there. */
@media (max-width: 719px) {
	body.single-product .ho-stickybar { display: none; }
	body.single-product { padding-bottom: var(--ho-sticky-h, 0px); }
	body.single-product .ho-sticky { bottom: 0; }
}

/* The trust strip above the product guidelines. */
.ho-trust2--product { border-top: 1px solid var(--ho-navy-line); }


.ho-stickybar__tel { display: inline-block; padding: 6px 2px; }
.ho-stickybar__tel[href]:active { opacity: .7; }

/* A centre photograph fills its tile without distorting. */
.ho-centretile2__media { position: relative; overflow: hidden; padding: 0; }
.ho-centretile2__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}


/* ==========================================================================
   MOBILE SCROLLERS  +  SINGLE-COLUMN "WHY WOCKHARDT"
   ========================================================================== */

/* "Why Wockhardt" is one column now.
   Held to a readable measure — body text that spans 1240px is hard to read. */
.ho-why__col { max-width: 940px; }
.ho-why__col .ho-sec__title { margin-bottom: 14px; }
.ho-why__col > p { font-size: 16px; line-height: 1.65; color: var(--ho-body); margin: 0 0 14px; }
.ho-why__col .ho-why__quote { margin: 26px 0 20px; }

/* The two programme cards sit side by side instead of stacking. */
.ho-progcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ho-progcards .ho-progcard { margin-bottom: 0;  }

/* --------------------------------------------------------------------------
   .ho-mscroll — a grid on desktop, a swipeable row on a phone.

   Below 720px the element keeps its children in one row and lets the finger
   move them. --ho-peek sets how much of a card is visible, so the next one
   is always part-shown: that cut edge is what tells a visitor to swipe.

   The row breaks out of the shell's gutter so cards can run to the screen
   edge, and scroll-padding puts them back on the gutter when they snap.
   -------------------------------------------------------------------------- */
@media (max-width: 719px) {
	.ho-mscroll {
		display: grid !important;
		grid-auto-flow: column;
		grid-auto-columns: var(--ho-peek, 86%);
		grid-template-columns: none !important;
		gap: 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;

		/*
		 * Bleed to the screen edge, then sit back on the gutter when
		 * snapped — but only as far as the container's own padding.
		 *
		 * --ho-bleed defaults to 0 and is set per row below. A row inside
		 * a card must not bleed: the card pads 18px, so a 32px bleed
		 * pushes the row past the card, widens the page and leaves a
		 * white strip down the right of every screen.
		 */
		margin-inline: calc(var(--ho-bleed, 0px) * -1);
		padding-inline: var(--ho-bleed, 0px);
		scroll-padding-inline: var(--ho-bleed, 0px);

		/* Room for a card's shadow and a comfortable thumb. */
		padding-block: 2px 12px;
	}

	.ho-mscroll::-webkit-scrollbar { display: none; }

	.ho-mscroll > * {
		scroll-snap-align: start;
		min-width: 0;
		height: auto;
	}

	/* Rows that sit directly in the shell run to the screen edge. */
	.ho-mscroll--cards,
	.ho-mscroll--wide { --ho-bleed: var(--ho-gutter); }

	/* Hospital cards: one and a half, as asked. */
	.ho-mscroll--cards { --ho-peek: 66%; }

	/* Test cards and programme cards: one at a time, the next one peeking. */
	.ho-mscroll--wide { --ho-peek: 86%; }

	/* The pick rows live inside a card, so they stay within its padding. */
	.ho-mscroll--pick4,
	.ho-mscroll--pick2 { --ho-bleed: 0px; }

	/* The four age buttons: two and a bit. */
	.ho-mscroll--pick4 { --ho-peek: 44%; gap: 10px; }

	/* The two package buttons: both nearly in view. */
	.ho-mscroll--pick2 { --ho-peek: 62%; gap: 10px; }

	/* A card in a scroller must not stretch to the tallest one. */
	.ho-mscroll .ho-centretile2,
	.ho-mscroll .ho-testcard { height: 100%; }

	/* A test card's icon and text stack badly at this width. */
	.ho-mscroll .ho-testcard { padding: 20px; gap: 14px; height: 90%;}

	/* The pick buttons keep their own look, just narrower. */
	.ho-mscroll .ho-pick,
	.ho-mscroll .ho-chip2 { width: 100%; }

	/* One column for the prose; the cards handle themselves. */
	.ho-progcards { grid-template-columns: none; }
}

/* ==========================================================================
   COLLAPSIBLE PARAMETER GROUPS  +  RELATED PACKAGES CAROUSEL
   ========================================================================== */

/* --------------------------------------------------------------------------
   The group heading is a button now, so it has to fill the cell it sits in
   and still read as a heading.
   -------------------------------------------------------------------------- */
.ho-ptable__group td { padding: 0; }

.ho-ptable__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 12px 18px;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.ho-ptable__toggle:hover { background: rgba(0, 0, 0, .035); }

.ho-ptable__toggle:focus-visible {
	outline: 2px solid var(--ho-blue);
	outline-offset: -2px;
}

/* Name and chevron travel together on the left: on a 1200px-wide table a
   chevron pinned to the far edge is too far from the heading to read as
   its control. The count sits out on the right. */
.ho-ptable__groupname { flex: 0 1 auto; min-width: 0; }

.ho-ptable__groupcount {
	flex: 0 0 auto;
	margin-left: auto;
	font: 400 11.5px/1 var(--ho-font);
	letter-spacing: .02em;
	text-transform: none;
	color: var(--ho-muted);
}

.ho-ptable__chev {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	color: var(--ho-blue);
	transition: transform .18s ease;
}

/* Closed is the resting state; open turns the chevron up. */
.ho-ptable__body--fold.is-open .ho-ptable__chev { transform: rotate(180deg); }

/* A folded group hides its tests but keeps its heading row.
   Only ever applied once the script has run — see setUpParamGroups(). */
.ho-ptable__body--fold .ho-ptable__row { display: none; }
.ho-ptable__body--fold.is-open .ho-ptable__row { display: table-row; }

/* --------------------------------------------------------------------------
   Related packages: a carousel at every width, not a 3-up grid.
   -------------------------------------------------------------------------- */
.ho-related .related > h2 { display: none; }
.ho-related .ho-sec__title { margin: 0; }

.woocommerce .ho-related__track,
.woocommerce-page .ho-related__track,
.ho-related__track {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * 22px) / 3);
	grid-template-columns: none !important;
	gap: 22px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding: 4px 0 10px;
}

.ho-related__track::-webkit-scrollbar { display: none; }
.ho-related__track > li.product { scroll-snap-align: start; min-width: 0; }

/* The selectors below carry the .woocommerce prefix too: without it they
   lose to the unprefixed rule above on specificity, media query or not. */
@media (max-width: 1023px) {
	/* Two across, so a third card still peeks in. */
	.woocommerce .ho-related__track,
	.woocommerce-page .ho-related__track,
	.ho-related__track { grid-auto-columns: calc((100% - 18px) / 2); gap: 18px; }
}

@media (max-width: 719px) {
	/* One and a half, matching the rest of the site's mobile rowsp. */
	.woocommerce .ho-related__track,
	.woocommerce-page .ho-related__track,
	.ho-related__track {
		grid-auto-columns: 66%;
		gap: 14px;
		margin-inline: calc(var(--ho-gutter) * -1);
		padding-inline: var(--ho-gutter);
		scroll-padding-inline: var(--ho-gutter);
	}

	/* The arrows are for a mouse; a thumb swipes. */
	.ho-related .ho-slider__nav { display: none; }
}

.woocommerce-product-gallery__trigger{display:none;}



/* ==========================================================================
   FOOTER — social icons, Quick Links, Get In Touch
   ========================================================================== */

/* --------------------------------------------------------------------------
   Social icons, under the wordmark and blurb.
   -------------------------------------------------------------------------- */
.ho-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

/* 36 + a 1px border each side = 38 across. Five of those plus four 8px
   gaps is 222px, which fits the brand column — this theme has no global
   border-box, so the border is extra width, not inside it. */
.ho-social__link {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #fff;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .18);
	transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.ho-social__link:hover,
.ho-social__link:focus-visible {
	background: rgba(255, 255, 255, .20);
	border-color: rgba(255, 255, 255, .42);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.ho-social__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Editors only: a prompt where the icons will be. */
.ho-social__todo {
	margin: 16px 0 0;
	font: 400 13.5px/1.4 var(--ho-font);
}

/* --------------------------------------------------------------------------
   Get In Touch: each inbox with the line that says what it is for.
   Wider than a plain link column, because the notes need the room.
   -------------------------------------------------------------------------- */
/* Wide enough that the longest address sits on one line rather than
   breaking mid-word: consultants@wockhardthospitals.com is 34 characters. */
.ho-footer__col--touch { flex: 1 1 300px; }

.ho-footer__touch {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ho-footer__touch li + li { margin-top: 16px; }

.ho-footer__touch-note {
	display: block;
	margin-bottom: 3px;
	font: 400 13px/1.5 var(--ho-font);
	color: rgba(255, 255, 255, .72);
}

.ho-footer__touch-mail {
	display: inline-block;
	font: 600 14px/1.45 var(--ho-font);
	overflow-wrap: break-word;
}

@media (max-width: 719px) {
	
	.ho-footer__touch li + li { margin-top: 14px; }
}

/* A locked field states a value rather than inviting a change. */
.ho-input--locked {
	background: var(--ho-wash);
	color: var(--ho-body);
	cursor: default;
}

.ho-input--locked:focus { outline: 2px solid var(--ho-blue); outline-offset: -2px; }

.ho-field__note {
	display: block;
	margin-top: 5px;
	font: 400 12.5px/1.4 var(--ho-font);
	color: var(--ho-muted);
}

/* ==========================================================================
   SHORT CALLBACK FORM  (.ho-mini)
   --------------------------------------------------------------------------
   Used in the "This centre" card. Same form, same handler as the footer —
   it just asks for less, because the centre is already known here.
   ========================================================================== */

.ho-mini {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--ho-line-soft);
}

/* This theme sets no global border-box, so width:100% plus padding would
   push these past the 300px card. Stated here rather than assumed. */
.ho-mini__phone,
.ho-mini__send {
	box-sizing: border-box;
	display: block;
	width: 100%;
}

.ho-mini__phone { margin-bottom: 8px; }

.ho-mini__send {
	justify-content: center;
	text-align: center;
}

.ho-mini .ho-note {
	margin: 0 0 10px;
	font-size: 13px;
}

/* The honeypot: present for a bot, never for a person. */
.ho-mini__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   STICKY BAR — keep it on one line
   --------------------------------------------------------------------------
   The bar reads: pitch, then the number and the button, then "Call a centre".
   On a centre page the centre is already known, so the select is not printed
   and the centre travels in a hidden field — nothing to choose.

   On pages where the select IS printed (no centre chosen yet), the auto
   margin on the fields made them claim a whole line, dropping the select
   above them and making the bar two rows tall. nowrap keeps it to one.
   ========================================================================== */
@media (min-width: 1024px) {
	.ho-stickybar__form { flex-wrap: nowrap; }
	.ho-stickybar__fields { flex-wrap: nowrap; }
}

/* ==========================================================================
   PRODUCT CARD IMAGE — close the gap under it
   --------------------------------------------------------------------------
   WooCommerce ships this:

       .woocommerce ul.products li.product a img { margin: 0 0 1em; }

   Three classes and two elements, which outranks the theme's
   `.ho-card__media img { margin: 0 }`. The result was a 16px strip of the
   media panel's pale background showing under every card image.

   Matched here at the same weight or higher, with the sizing restated so a
   WooCommerce or plugin rule cannot take the ratio back either.
   ========================================================================== */

.woocommerce ul.products li.product .ho-card__media img,
.woocommerce-page ul.products li.product .ho-card__media img,
.woocommerce ul.products li.product a.ho-card__imglink img,
.ho-card__media img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	box-shadow: none;
}

/* The link is the image's only content: no stray line-height under it. */
.ho-card__imglink {
	display: block;
	font-size: 0;
	line-height: 0;
}

@media (max-width: 760px) {
	.woocommerce ul.products li.product .ho-card__media img,
	.woocommerce-page ul.products li.product .ho-card__media img,
	.ho-card__media img { aspect-ratio: 4 / 3; }
	
	.ho-ptable thead .ho-ptable__prices > td,
.ho-ptable thead .ho-ptable__prices > th {
	font-size:12px;
	
}
}

/* ==========================================================================
   MOBILE CORRECTIONS
   ========================================================================== */
@media (max-width: 719px) {
	/* The callback form: one field per row. Name and Mobile side by side
	   leaves each about 140px wide, too narrow to read what you typed. */
	.ho-callback__grid { grid-template-columns: minmax(0, 1fr); }

	/*
	 * A full-width button must include its own padding in that width.
	 * This theme sets no global border-box, so width:100% plus 18px of
	 * padding each side makes the button 36px wider than the card — and
	 * .ho-lifecard clips its overflow, so "Add to cart" lost its right
	 * edge rather than wrapping.
	 */
	.ho-cardbtns__add,
	.ho-cardbtns__view,
	.ho-cardbtns .ho-btn {
		box-sizing: border-box;
		max-width: 100%;
	}

	/* Nothing on a phone may be wider than the phone. A single overflowing
	   element adds a scrollbar to the whole page and shows as a white strip
	   down the right of every screen, so the page is clipped as a backstop
	   while the element that caused it is fixed properly above. */
	html,
	body { overflow-x: hidden; }
	
	.ho-cardbtns__add.is-disabled {margin-bottom: 10px;}
}


input[type="number"].ho-input::-webkit-outer-spin-button,
input[type="number"].ho-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

input[type="number"].ho-input {
	-moz-appearance: textfield; /* Firefox */
	appearance: textfield;
}



/* The price row above the parameter table's column headings.
   It sits above the navy header band, not inside it, so the prices read
   as a caption on the columns rather than as another heading row. */
/* .ho-ptable thead th already paints the navy band and outranks a plain
   class selector, so these carry the same ancestors to beat it. */
.ho-ptable thead .ho-ptable__prices > td,
.ho-ptable thead .ho-ptable__prices > th {
	background: transparent;
	border: 0;
	vertical-align: bottom;
	
}

.ho-ptable thead .ho-ptable__pricelabel {
	text-align: left;
	padding: 0 18px 8px;
	font: 700 12px/1.2 var(--ho-font);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ho-muted);
}

.ho-ptable thead .ho-ptable__price {
	padding: 0 16px 8px;
	text-align: center;
	font: 700 17px/1.2 var(--ho-font);
	color: var(--ho-navy);
	white-space: nowrap;
}

.ho-ptable__price del { display: none; }
.ho-ptable__price ins { text-decoration: none; }

.ho-bag__update{display:none;}

/* The "Nearest to you" tag on the location gate. */
.ho-gate__near {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--ho-blue);
	color: #fff;
	font: 700 10.5px/1.4 var(--ho-font);
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: 2px;
}

.ho-gate__option.is-near { border-color: var(--ho-blue); }

@media (max-width: 480px) {
	.ho-gate__near { margin-left: 8px; padding: 2px 7px; font-size: 10px; }
}

/* "Use my exact location" on the gate. A quiet offer, not a demand. */
.ho-gate__locate {
	display: block;
	margin: 14px auto 0;
	padding: 8px 14px;
	background: none;
	border: 1px solid var(--ho-line);
	border-radius: 999px;
	font: 600 13px/1.2 var(--ho-font);
	color: var(--ho-blue);
	cursor: pointer;
}

.ho-gate__locate:hover:not(:disabled) { border-color: var(--ho-blue); }
.ho-gate__locate:disabled { opacity: .5; cursor: default; }


.ho-card__body h2.woocommerce-loop-product__title a { color: inherit; font: inherit; text-decoration: none; }
.ho-card__body h2.woocommerce-loop-product__title a:hover { color: var(--ho-red); text-decoration: underline; text-underline-offset: 2px; }
.ho-card__body h2.woocommerce-loop-product__title a:focus-visible { color: var(--ho-red); outline: 2px solid var(--ho-red); outline-offset: 2px; border-radius: 3px; }
.payment_box{display:none !important;}

.f-hologo img{height: 136px;}

@media (max-width: 780px) {
    
    .f-hologo img{height: 100px;}
}