/* ========================================================
 * THC Hub Manager v2 — frontend styles
 *
 * PALETTE — THERMOCON brand only.
 *   #7A7A7A   brand grey
 *   #009DBF   brand cyan
 *   #DBF4FA   light background
 *   #DBF4FA42 light background, 26% wash
 *
 * TYPOGRAPHY is inherited (font-family:inherit everywhere),
 * so the hub always matches the Elementor kit on the page.
 *
 * To retheme, override the tokens below in
 * Elementor > Site Settings > Custom CSS rather than editing
 * this file. The token list is documented in README.txt.
 * ====================================================== */

.thcm-hub.thcm-v2 {
	/* ---------- BRAND ---------- */
	--thc-primary: #7A7A7A;
	/* brand grey  */
	--thc-accent: #009DBF;
	/* brand cyan  */
	--thc-accent-strong: #007D99;
	/* derived: hover + white-text fills */
	--thc-on-accent: #fff;

	/* ---------- LIGHT BACKGROUNDS ---------- */
	--thc-bg-light: #DBF4FA;
	/* tints, active soft states */
	--thc-bg-wash: rgba(219, 244, 250, .26);
	/* #DBF4FA42 — hover, notices */

	/* ---------- TEXT RAMP ---------- */
	--thc-text: #6B6B6B;
	/* body + table cells */
	--thc-muted: #767676;
	/* small sub-labels   */
	--thc-faint: #A3A3A3;
	/* decorative only    */

	/* ---------- SURFACES + LINES ---------- */
	--thc-surface: #fff;
	--thc-table-head: #F1F6F8;
	/* table header — unchanged */
	/* --thc-line: #E4EAEE; */
	--thc-line: #E3E9ED;
	;
	--thc-line-strong: #CFD9DE;

	/* ---------- SHAPE ---------- */
	--thc-r: 14px;
	--thc-border: 1px;
	--thc-shadow: 0px 4px 4px 0px rgba(0, 0, 0, .0784313725490196);
	--thc-shadow-lift: 0px 4px 4px 0px rgba(151, 151, 151, .3411764705882353);
	--thc-ring: 0 0 0 3px rgba(0, 157, 191, .20);
	--thc-gap: 26px;

	/* ---------- SELECTION GROUP BANDS ----------
	   Kept inside the two brand hues: cyan and grey at two
	   lightness steps each, so multi-select stays on-brand. */
	--thc-g0: #009DBF;
	--thc-g1: #7A7A7A;
	--thc-g2: #5FCADD;
	--thc-g3: #A8A8A8;
	--thc-g0-soft: #DBF4FA;
	--thc-g1-soft: #F2F2F2;
	--thc-g2-soft: #EAF9FC;
	--thc-g3-soft: #F7F7F7;

	/* ---------- ALIASES ----------
	   Legacy names the rules below still reference. Edit the
	   brand tokens above; these follow automatically. */
	--thc-accent-dark: var(--thc-accent-strong);
	--thc-accent-soft: var(--thc-bg-light);
	--thc-accent-tint: var(--thc-bg-wash);
	--thc-surface-2: var(--thc-bg-wash);
	--thc-surface-3: var(--thc-table-head);
	--thc-r-sm: var(--thc-r);

	font-family: inherit;
	color: var(--thc-text);
	display: grid;
	grid-template-columns: 292px minmax(0, 1fr);
	gap: var(--thc-gap);
	align-items: start;
	-webkit-font-smoothing: antialiased;
}

.thcm-hub.thcm-v2 *,
.thcm-hub.thcm-v2 *::before,
.thcm-hub.thcm-v2 *::after {
	box-sizing: border-box;
}

/* Zero-specificity reset. :where() contributes 0 to specificity, so
   this can never out-rank the component rules further down. Written
   as a normal descendant selector it scored 0,2,1 and silently beat
   .thcm-pill2.is-active (0,2,0) — pills lost their fill and filter
   chips lost their padding. */
:where(.thcm-hub.thcm-v2) :where(button) {
	font: inherit;
	cursor: pointer;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	color: inherit;
	text-align: inherit;
}

.thcm-hub.thcm-v2 :focus-visible {
	outline: 2px solid var(--thc-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

.thcm-hub.thcm-v2 .thcm-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ========================================================
 * Sidebar
 * ====================================================== */
.thcm-hub.thcm-v2 .thcm-side {
	position: sticky;
	top: 24px;
	background: var(--thc-surface);
	border: 1px solid var(--thc-line);
	border-radius: var(--thc-r);
	padding: 24px 22px;
	box-shadow: var(--thc-shadow);
}

.thcm-hub.thcm-v2 .thcm-side-eyebrow {
	margin: 0 0 18px;
	font-family: "Inter", Sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	text-transform: uppercase;
}

.thcm-hub.thcm-v2 .thcm-stepper {
	list-style: none;
	margin: 0;
	padding: 0;
}

.thcm-hub.thcm-v2 .thcm-step {
	position: relative;
	padding: 0 0 24px 40px;
}

.thcm-hub.thcm-v2 .thcm-step:last-child {
	padding-bottom: 0;
}

.thcm-hub.thcm-v2 .thcm-step::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 32px;
	bottom: 2px;
	width: 2px;
	background: var(--thc-line);
	border-radius: 2px;
}

.thcm-hub.thcm-v2 .thcm-step:last-child::before {
	display: none;
}

.thcm-hub.thcm-v2 .thcm-step-dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--thc-surface-3);
	color: var(--thc-muted);
	border: 1px solid var(--thc-line);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.thcm-hub.thcm-v2 .thcm-step-title {
	margin: 4px 0 3px;
	font-size: 15px;
	font-weight: 600;
	color: var(--thc-primary);
	line-height: 1.35;
}

.thcm-hub.thcm-v2 .thcm-step-sub {
	margin: 0;
	font-size: 13px;
	color: var(--thc-muted);
	line-height: 1.45;
}

.thcm-hub.thcm-v2 .thcm-step.is-active .thcm-step-dot {
	background: var(--thc-accent);
	border-color: var(--thc-accent);
	color: var(--thc-on-accent);
	box-shadow: 0 0 0 4px var(--thc-accent-soft);
}

.thcm-hub.thcm-v2 .thcm-step.is-active .thcm-step-title {
	color: var(--thc-accent-dark);
}

.thcm-hub.thcm-v2 .thcm-step.is-done .thcm-step-dot {
	background: var(--thc-accent-soft);
	border-color: var(--thc-accent);
	color: var(--thc-accent-dark);
}

.thcm-hub.thcm-v2 .thcm-step.is-done .thcm-step-dot span {
	display: none;
}

.thcm-hub.thcm-v2 .thcm-step.is-done .thcm-step-dot::after {
	content: "\2713";
	font-size: 14px;
	font-weight: 700;
}

.thcm-hub.thcm-v2 .thcm-step.is-done::before {
	background: var(--thc-accent-soft);
}

.thcm-hub.thcm-v2 .thcm-help {
	margin-top: 24px;
	padding: 18px;
	border-radius: var(--thc-r-sm);
	background: var(--thc-accent-tint);
	border: 1px solid var(--thc-accent-soft);
}

.thcm-hub.thcm-v2 .thcm-help-icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 26px;
	border-radius: 50%;
	background: var(--thc-accent);
	color: var(--thc-on-accent);
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 11px;
}

.thcm-hub.thcm-v2 .thcm-help b {
	display: block;
	font-size: 15px;
	color: var(--thc-primary);
	margin-bottom: 6px;
	line-height: 1.35;
}

.thcm-hub.thcm-v2 .thcm-help p {
	margin: 0 0 13px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--thc-text);
}

.thcm-hub.thcm-v2 .thcm-help-btn {
	display: inline-block;
	text-decoration: none;
	background-color: #DBF4FA42;
	font-family: "Inter", Sans-serif;
	font-size: 13px;
	font-weight: 600;
	fill: #009dbf;
	color: #009dbf;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-color: #009dbf;
	border-radius: 15px;
	padding: 5px 10px;
}

.thcm-hub.thcm-v2 .thcm-help-btn:hover {
	background-color: #009DBF;
	fill: #FFFFFF;
	color: #FFFFFF;
}

/* ========================================================
 * Main column
 * ====================================================== */
.thcm-hub.thcm-v2 .thcm-main {
	min-width: 0;
}

.thcm-hub.thcm-v2 .thcm-h1 {
	margin: 0 0 11px;
	color: var(--thc-primary);
	letter-spacing: -.01em;
	font-family: "Inter", Sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 44px;
}



.thcm-hub.thcm-v2 .thcm-intro {
	color: var(--thc-text);
	max-width: 70ch;
	text-align: start;
	font-family: "Inter", Sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 22px;
}

.thcm-hub.thcm-v2 .thcm-sec-label {
	position: relative;
	font-family: "Inter", Sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3em;
	padding-left: 13px;
	text-transform: capitalize;
	color: var(--thc-accent);
}

.thcm-hub.thcm-v2 .thcm-sec-label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 14px;
	border-radius: 2px;
	background: var(--thc-accent);
}

/* ========================================================
 * Step 1 — temperature pills
 * Icon tile + text. Active = solid cyan-dark (AA-safe with
 * white text) plus a check badge, so the choice is obvious.
 * ====================================================== */
.thcm-hub.thcm-v2 .thcm-pills2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 14px;
	margin: 0 0 20px;
}

.thcm-hub.thcm-v2 .thcm-pill2 {
	position: relative;
	overflow: hidden;
	text-align: left;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 14px;
	/* padding: 18px 46px 18px 18px; */
	padding: 18px;
	background: var(--thc-surface);
	border: 1px solid #009dbf;
	border-radius: var(--thc-r);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.thcm-hub.thcm-v2 .thcm-pill2::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: var(--thc-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s ease;
}

.thcm-hub.thcm-v2 .thcm-pill2:hover {
	border-color: var(--thc-accent);
	box-shadow: var(--thc-shadow-lift);
	transform: translateY(-2px);
}

.thcm-hub.thcm-v2 .thcm-pill2:hover::after {
	transform: scaleX(1);
}

.thcm-hub.thcm-v2 .thcm-pill2-ic {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: var(--thc-accent-soft);
	color: var(--thc-accent-dark);
	transition: background .18s ease, color .18s ease;
}

.thcm-hub.thcm-v2 .thcm-pill2-ic svg {
	width: 25px;
	height: 25px;
	display: block;
}

.thcm-hub.thcm-v2 .thcm-pill2 b {
	grid-column: 2;
	align-self: end;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--thc-primary);
	line-height: 1.25;
}

.thcm-hub.thcm-v2 .thcm-pill2 small {
	grid-column: 2;
	align-self: start;
	margin-top: 3px;
	font-size: 13px;
	font-weight: 400;
	color: var(--thc-muted);
	line-height: 1.4;
}

.thcm-hub.thcm-v2 .thcm-pill2-tick {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	background: var(--thc-on-accent);
	color: var(--thc-accent-dark);
	opacity: 0;
	transform: scale(.6);
	transition: opacity .18s ease, transform .18s ease;
}

.thcm-hub.thcm-v2 .thcm-pill2.is-active {
	background: var(--thc-accent);
	border-color: var(--thc-accent);
	box-shadow: var(--thc-shadow-lift);
	transform: translateY(-2px);
}

/* .thcm-hub.thcm-v2 .thcm-pill2.is-active::after {
	transform: scaleX(1);
	background: var(--thc-on-accent);
} */

.thcm-hub.thcm-v2 .thcm-pill2.is-active .thcm-pill2-ic {
	background: rgba(255, 255, 255, .18);
	color: var(--thc-on-accent);
}

.thcm-hub.thcm-v2 .thcm-pill2.is-active b {
	color: var(--thc-on-accent);
}

.thcm-hub.thcm-v2 .thcm-pill2.is-active small {
	color: var(--thc-bg-light);
}

.thcm-hub.thcm-v2 .thcm-pill2.is-active .thcm-pill2-tick {
	opacity: 1;
	transform: scale(1);
}

/* ========================================================
 * Hint
 * ====================================================== */
.thcm-hub.thcm-v2 .thcm-hint {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	margin: 0 0 30px;
	background: var(--thc-accent-tint);
	border: 1px solid var(--thc-accent-soft);
	border-left: 4px solid var(--thc-accent);
	border-radius: var(--thc-r-sm);
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--thc-text);
}

.thcm-hub.thcm-v2 .thcm-hint svg {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	color: var(--thc-accent);
	margin-top: 1px;
}

/* ========================================================
 * Step 2 — product cards + side filters
 * Cards lead with the product photo on a soft cyan wash.
 * Selected = cyan ring + tint + order badge.
 * ====================================================== */
.thcm-hub.thcm-v2 .thcm-step2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 252px;
	gap: 22px;
	margin: 0 0 34px;
	align-items: start;
}

.thcm-hub.thcm-v2 .thcm-cards2 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
	gap: 14px;
}

.thcm-hub.thcm-v2 .thcm-sol2 {
	position: relative;
	overflow: hidden;
	text-align: left;
	display: flex;
	flex-direction: column;
	padding: 0 0 14px;
	background: var(--thc-surface);
	border: 1px solid var(--thc-line);
	border-radius: var(--thc-r);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.thcm-hub.thcm-v2 .thcm-sol2:hover {
	border-color: var(--thc-accent);
	box-shadow: var(--thc-shadow-lift);
	transform: translateY(-3px);
}

.thcm-hub.thcm-v2 .thcm-sol2 img,
.thcm-hub.thcm-v2 .thcm-sol2-noimg {
	display: block;
	width: 100%;
	height: 108px;
	object-fit: contain;
	padding: 12px;
	margin: 0 0 11px;
	background: linear-gradient(160deg, var(--thc-accent-tint) 0%, var(--thc-surface-3) 100%);
	transition: transform .3s ease;
	border-bottom: 1px solid var(--thc-line);
}

.thcm-hub.thcm-v2 .thcm-sol2:hover img {
	transform: scale(1.05);
}

.thcm-hub.thcm-v2 .thcm-sol2-noimg {
	display: grid;
	place-items: center;
}

.thcm-hub.thcm-v2 .thcm-sol2-noimg::after {
	content: "";
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: 2px dashed var(--thc-faint);
}

.thcm-hub.thcm-v2 .thcm-sol2-title {
	padding: 0 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--thc-primary);
	line-height: 1.3;
}

.thcm-hub.thcm-v2 .thcm-sol2-line {
	margin-top: 5px;
	padding: 0 14px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--thc-accent-dark);
}

.thcm-hub.thcm-v2 .thcm-sol2-check {
	position: absolute;
	top: 11px;
	right: 11px;
	z-index: 2;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--thc-surface);
	border: 1px solid var(--thc-line-strong);
	box-shadow: var(--thc-shadow);
	transition: background .18s ease, border-color .18s ease;
}

.thcm-hub.thcm-v2 .thcm-sol2-order {
	position: absolute;
	top: 11px;
	left: 11px;
	z-index: 2;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	color: var(--thc-on-accent);
	background: var(--thc-accent-dark);
	box-shadow: var(--thc-shadow-lift);
	opacity: 0;
	transform: scale(.6);
	transition: opacity .18s ease, transform .18s ease;
}

.thcm-hub.thcm-v2 .thcm-sol2.is-selected {
	border-color: var(--thc-accent);
	/* box-shadow: var(--thc-ring), var(--thc-shadow-lift); */
	box-shadow: 0px 4px 15px 0px rgba(151, 151, 151, 0.16862745098039217);
}

.thcm-hub.thcm-v2 .thcm-sol2.is-selected img,
.thcm-hub.thcm-v2 .thcm-sol2.is-selected .thcm-sol2-noimg {
	background: linear-gradient(160deg, var(--thc-bg-light) 0%, var(--thc-bg-light) 100%);
}

.thcm-hub.thcm-v2 .thcm-sol2.is-selected .thcm-sol2-check {
	background: var(--thc-accent);
	border-color: var(--thc-accent);
}

.thcm-hub.thcm-v2 .thcm-sol2.is-selected .thcm-sol2-check::after {
	content: "\2713";
	display: block;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	line-height: 21px;
	color: var(--thc-on-accent);
}

.thcm-hub.thcm-v2 .thcm-sol2.is-selected .thcm-sol2-order:not(:empty) {
	opacity: 1;
	transform: scale(1);
}

/* side filters */
.thcm-hub.thcm-v2 .thcm-sidefilters {
	background: var(--thc-surface);
	border: 1px solid var(--thc-line);
	border-radius: var(--thc-r);
	padding: 20px;
	box-shadow: var(--thc-shadow);
}

.thcm-hub.thcm-v2 .thcm-sf-group+.thcm-sf-group {
	margin-top: 20px;
}

.thcm-hub.thcm-v2 .thcm-sf-label {
	margin: 0 0 10px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--thc-muted);
}

.thcm-hub.thcm-v2 .thcm-sf-seg {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.thcm-hub.thcm-v2 .thcm-sf-seg button {
	/* padding: 8px 15px; */
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--thc-text);
	background: var(--thc-surface-2);
	border: 1px solid var(--thc-g0);
	border-radius: 100px;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.thcm-hub.thcm-v2 .thcm-sf-seg button:hover {
	border-color: var(--thc-accent);
	color: var(--thc-accent-dark);
	background: var(--thc-accent-tint);
}

.thcm-hub.thcm-v2 .thcm-sf-seg button.is-on {
	background: var(--thc-accent);
	border-color: var(--thc-accent);
	color: var(--thc-on-accent);
	box-shadow: var(--thc-shadow);
}

.thcm-hub.thcm-v2 .thcm-reset {
	margin-top: 20px;
	width: 100%;
	padding: 9px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--thc-muted);
	background: var(--thc-surface-2);
	border: 1px solid var(--thc-line);
	border-radius: var(--thc-r-sm);
	transition: border-color .15s ease, color .15s ease;
}

.thcm-hub.thcm-v2 .thcm-reset:hover {
	border-color: var(--thc-accent);
	color: var(--thc-accent-dark);
}

/* ========================================================
 * Step 3 — results
 * ====================================================== */
.thcm-hub.thcm-v2 .thcm-res-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--thc-line);
}

.thcm-hub.thcm-v2 .thcm-res-head .thcm-sec-label {
	margin: 0;
}

.thcm-hub.thcm-v2 .thcm-count {
	padding: 4px 11px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	color: var(--thc-accent-dark);
	background: var(--thc-accent-soft);
}

.thcm-hub.thcm-v2 .thcm-count:empty {
	display: none;
}

.thcm-hub.thcm-v2 .thcm-res-right {
	margin-left: auto;
}

.thcm-hub.thcm-v2 .thcm-sort {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	color: var(--thc-muted);
}

.thcm-hub.thcm-v2 .thcm-sort select {
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--thc-text);
	padding: 7px 11px;
	background: var(--thc-surface);
	border: 1px solid var(--thc-line);
	border-radius: var(--thc-r-sm);
	max-width: 220px;
	cursor: pointer;
}

.thcm-hub.thcm-v2 .thcm-sort select:hover {
	border-color: var(--thc-accent);
}

/* chips */
.thcm-hub.thcm-v2 .thcm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.thcm-hub.thcm-v2 .thcm-chips:empty {
	display: none;
}

.thcm-hub.thcm-v2 .thcm-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* padding: 6px 7px 6px 13px; */
	padding: 5px 6px 5px 12px;
	font-size: 12px;
	font-weight: 700;
	color: var(--thc-accent-dark);
	background: var(--thc-accent-soft);
	border: 1px solid rgba(0, 157, 191, .30);
	border-radius: 100px;
}

.thcm-hub.thcm-v2 .thcm-chip .dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--thc-g0);
}

.thcm-hub.thcm-v2 .thcm-chip .dot.d0 {
	background: var(--thc-g0);
}

.thcm-hub.thcm-v2 .thcm-chip .dot.d1 {
	background: var(--thc-g1);
}

.thcm-hub.thcm-v2 .thcm-chip .dot.d2 {
	background: var(--thc-g2);
}

.thcm-hub.thcm-v2 .thcm-chip .dot.d3 {
	background: var(--thc-g3);
}

.thcm-hub.thcm-v2 .thcm-chip button {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 14px;
	line-height: 1;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--thc-accent-dark);
	transition: background .15s ease;
}

.thcm-hub.thcm-v2 .thcm-chip button:hover {
	background: rgba(0, 157, 191, .20);
}

.thcm-hub.thcm-v2 .thcm-notice {
	margin: 0 0 16px;
	padding: 12px 15px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--thc-text);
	background: var(--thc-surface-2);
	border: 1px solid var(--thc-line);
	border-radius: var(--thc-r-sm);
}

/* ========================================================
 * Table
 * ====================================================== */
.thcm-hub.thcm-v2 .thcm-table-wrap {
	background: var(--thc-surface);
	border: 1px solid var(--thc-line);
	border-radius: var(--thc-r);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: var(--thc-shadow);
}

.thcm-hub.thcm-v2 .thcm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	line-height: 1.5;
}

.thcm-hub.thcm-v2 .thcm-table thead th {
	padding: 14px;
	text-align: left;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 700;
	color: #009dbf !important;
	letter-spacing: .07em;
	color: var(--thc-primary);
	background: var(--thc-surface-3);
	border-bottom: 1px solid var(--thc-accent);
}

.thcm-hub.thcm-v2 .thcm-table tbody th,
.thcm-hub.thcm-v2 .thcm-table tbody td {
	padding: 11px 12px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--thc-line);
	color: var(--thc-text);
	font-size: 14px;
	font-weight: 400;
}

.thcm-hub.thcm-v2 .thcm-table tbody th {
	font-weight: 700;
	color: var(--thc-primary);
}

.thcm-hub.thcm-v2 .thcm-table tbody tr:last-child th,
.thcm-hub.thcm-v2 .thcm-table tbody tr:last-child td {
	border-bottom: none;
}

.thcm-hub.thcm-v2 .thcm-table tbody tr:hover th,
.thcm-hub.thcm-v2 .thcm-table tbody tr:hover td {
	background: var(--thc-accent-tint);
}

.thcm-hub.thcm-v2 .thcm-table tr.thcm-hide {
	display: none;
}

/* selection group bands */
.thcm-hub.thcm-v2 .thcm-table tr.thcm-g0 th {
	box-shadow: inset 4px 0 0 var(--thc-g0);
}

.thcm-hub.thcm-v2 .thcm-table tr.thcm-g1 th {
	box-shadow: inset 4px 0 0 var(--thc-g1);
}

.thcm-hub.thcm-v2 .thcm-table tr.thcm-g2 th {
	box-shadow: inset 4px 0 0 var(--thc-g2);
}

.thcm-hub.thcm-v2 .thcm-table tr.thcm-g3 th {
	box-shadow: inset 4px 0 0 var(--thc-g3);
}

/* group headers: tinted, coloured text — legible, and keeps
   the palette light rather than reversing out to white */
.thcm-hub.thcm-v2 .thcm-group-h td {
	padding: 11px 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-bottom: none;
}

.thcm-hub.thcm-v2 .thcm-group-h .cnt {
	margin-left: 10px;
	padding: 2px 9px;
	border-radius: 100px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: none;
	background: rgba(255, 255, 255, .72);
}

.thcm-hub.thcm-v2 .thcm-group-h.thcm-gh0 td {
	background: var(--thc-g0-soft);
	color: var(--thc-accent-dark);
	box-shadow: inset 4px 0 0 var(--thc-g0);
}

.thcm-hub.thcm-v2 .thcm-group-h.thcm-gh1 td {
	background: var(--thc-g1-soft);
	color: var(--thc-primary);
	box-shadow: inset 4px 0 0 var(--thc-g1);
}

.thcm-hub.thcm-v2 .thcm-group-h.thcm-gh2 td {
	background: var(--thc-g2-soft);
	color: var(--thc-accent-strong);
	box-shadow: inset 4px 0 0 var(--thc-g2);
}

.thcm-hub.thcm-v2 .thcm-group-h.thcm-gh3 td {
	background: var(--thc-g3-soft);
	color: var(--thc-text);
	box-shadow: inset 4px 0 0 var(--thc-g3);
}

.thcm-hub.thcm-v2 .thcm-group-h.thcm-hide {
	display: none;
}

/* row action */
.thcm-hub.thcm-v2 .thcm-cta,
.thcm-hub.thcm-v2 .thcm-table .tc-table-btn {
	display: inline-block;
	white-space: nowrap;
	font-family: "Inter", Sans-serif;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--thc-on-accent);
	background: var(--thc-accent);
	border: 1px solid var(--thc-accent);
	text-decoration: none;
	box-shadow: var(--thc-shadow);
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
	border-style: solid;
	border-width: 2px 2px 2px 2px;
	border-color: #FFFFFF00;
	border-radius: 8px 8px 8px 8px;
	padding: 7px 14px 7px 14px;
}

.thcm-hub.thcm-v2 .thcm-cta:hover,
.thcm-hub.thcm-v2 .thcm-table .tc-table-btn:hover {
	/* background: var(--thc-accent-strong);
	border-color: var(--thc-accent-strong);
	color: var(--thc-on-accent); */
	transform: translateY(-1px);
	background-color: #FFFFFF;
	color: #009DBF;
	border-color: #009DBF;
}

.thcm-hub.thcm-v2 .thcm-empty {
	margin: 0;
	padding: 44px 20px;
	text-align: center;
	font-size: 13.5px;
	color: var(--thc-muted);
}

.thcm-hub.thcm-v2 .thcm-more-wrap {
	margin-top: 20px;
	text-align: center;
}

.thcm-hub.thcm-v2 .thcm-more {
	padding: 11px 26px;
	font-size: 13px;
	font-weight: 700;
	color: var(--thc-accent-dark);
	background: var(--thc-surface);
	border: 1px solid var(--thc-accent);
	border-radius: var(--thc-r-sm);
	transition: background .15s ease, color .15s ease;
}

.thcm-hub.thcm-v2 .thcm-more:hover {
	background: var(--thc-accent);
	border-color: var(--thc-accent);
	color: var(--thc-on-accent);
}

/* ========================================================
 * Responsive
 * ====================================================== */
@media (max-width:1180px) {
	.thcm-hub.thcm-v2 .thcm-step2 {
		grid-template-columns: 1fr;
	}

	.thcm-hub.thcm-v2 .thcm-sidefilters {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
		gap: 18px;
	}

	.thcm-hub.thcm-v2 .thcm-sf-group+.thcm-sf-group {
		margin-top: 0;
	}

	.thcm-hub.thcm-v2 .thcm-reset {
		grid-column: 1/-1;
		margin-top: 4px;
	}
}

@media (max-width:1024px) {
	.thcm-hub.thcm-v2 {
		grid-template-columns: 1fr;
	}

	.thcm-hub.thcm-v2 .thcm-side {
		position: static;
		padding: 20px;
	}

	.thcm-hub.thcm-v2 .thcm-stepper {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	.thcm-hub.thcm-v2 .thcm-step {
		padding: 0 0 0 36px;
	}

	.thcm-hub.thcm-v2 .thcm-step::before {
		display: none;
	}

	.thcm-hub.thcm-v2 .thcm-help {
		margin-top: 20px;
	}
}

@media (max-width:820px) {
	.thcm-hub.thcm-v2 .thcm-stepper {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.thcm-hub.thcm-v2 .thcm-pills2 {
		grid-template-columns: 1fr 1fr;
	}

	.thcm-hub.thcm-v2 .thcm-cards2 {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.thcm-hub.thcm-v2 .thcm-res-right {
		margin-left: 0;
		width: 100%;
	}

	.thcm-hub.thcm-v2 .thcm-sort {
		width: 100%;
	}

	.thcm-hub.thcm-v2 .thcm-sort select {
		flex: 1;
		max-width: none;
	}
}

/* phone: the table becomes a stack of labelled cards. Labels
   come from each cell's data-th, so the markup stays a real
   <table> for crawlers — nothing is duplicated or hidden. */
@media (max-width:640px) {
	.thcm-hub.thcm-v2 {
		--thc-gap: 18px;
	}

	.thcm-hub.thcm-v2 .thcm-pills2 {
		grid-template-columns: 1fr 1fr;
	}

	.thcm-hub.thcm-v2 .thcm-cards2 {
		grid-template-columns: 1fr 1fr;
	}

	.thcm-hub.thcm-v2 .thcm-table-wrap {
		border: none;
		background: transparent;
		overflow: visible;
		box-shadow: none;
	}

	.thcm-hub.thcm-v2 .thcm-table,
	.thcm-hub.thcm-v2 .thcm-table tbody,
	.thcm-hub.thcm-v2 .thcm-table tr,
	.thcm-hub.thcm-v2 .thcm-table th,
	.thcm-hub.thcm-v2 .thcm-table td {
		display: block;
	}

	.thcm-hub.thcm-v2 .thcm-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.thcm-hub.thcm-v2 .thcm-table tbody tr {
		margin-bottom: 14px;
		padding: 0 0 10px;
		background: var(--thc-surface);
		border: 1px solid var(--thc-line);
		border-radius: var(--thc-r);
		box-shadow: var(--thc-shadow);
	}

	.thcm-hub.thcm-v2 .thcm-table tbody th {
		padding: 14px 15px 12px;
		font-size: 15px;
		border-bottom: 1px solid var(--thc-line);
	}

	.thcm-hub.thcm-v2 .thcm-table tbody td {
		display: flex;
		gap: 12px;
		align-items: center;
		justify-content: space-between;
		padding: 8px 15px;
		border-bottom: none;
		align-self: center;
	}

	.thcm-hub.thcm-v2 .thcm-table tbody td::before {
		content: attr(data-th);
		flex: 0 0 44%;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--thc-muted);
	}

	.thcm-hub.thcm-v2 .thcm-table tbody td:empty {
		display: none;
	}

	.thcm-hub.thcm-v2 .thcm-table tbody tr:hover th,
	.thcm-hub.thcm-v2 .thcm-table tbody tr:hover td {
		background: transparent;
	}

	.thcm-hub.thcm-v2 .thcm-table tr.thcm-g0 th,
	.thcm-hub.thcm-v2 .thcm-table tr.thcm-g1 th,
	.thcm-hub.thcm-v2 .thcm-table tr.thcm-g2 th,
	.thcm-hub.thcm-v2 .thcm-table tr.thcm-g3 th {
		box-shadow: none;
	}

	.thcm-hub.thcm-v2 .thcm-table tbody tr.thcm-g0 {
		border-left: 4px solid var(--thc-g0);
	}

	.thcm-hub.thcm-v2 .thcm-table tbody tr.thcm-g1 {
		border-left: 4px solid var(--thc-g1);
	}

	.thcm-hub.thcm-v2 .thcm-table tbody tr.thcm-g2 {
		border-left: 4px solid var(--thc-g2);
	}

	.thcm-hub.thcm-v2 .thcm-table tbody tr.thcm-g3 {
		border-left: 4px solid var(--thc-g3);
	}

	.thcm-hub.thcm-v2 .thcm-group-h td {
		display: block;
		border-radius: var(--thc-r-sm);
		padding: 10px 14px;
		margin-bottom: 12px;
	}

	.thcm-hub.thcm-v2 .thcm-group-h td::before {
		display: none;
	}

	.thcm-hub.thcm-v2 .thcm-table tbody td.thcm-action {
		display: block;
		padding: 6px 15px 8px;
	}

	.thcm-hub.thcm-v2 .thcm-table tbody td.thcm-action::before {
		display: none;
	}

	.thcm-hub.thcm-v2 .thcm-table .tc-table-btn,
	.thcm-hub.thcm-v2 .thcm-cta {
		width: 100%;
		text-align: center;
		margin-top: 6px;
		padding: 7px 14px;
		font-size: 13.5px;
	}

	.thcm-pill2 {
		display: flex !important;
		flex-direction: column;
		gap: 5px;
		flex-wrap: wrap;
		justify-content: center;
		padding: 7px !important;
		text-align: center !important;
	}

	.thcm-hub.thcm-v2 .thcm-pill2 b {
		font-size: 14.5px;
		align-self: center;
	}

	.thcm-hub.thcm-v2 .thcm-pill2 small {
		align-self: center;
	}

}

@media (max-width:420px) {
	.thcm-hub.thcm-v2 .thcm-cards2 {
		grid-template-columns: 1fr 1fr;
	}

	.thcm-hub.thcm-v2 .thcm-table tbody td {
		flex-direction: column;
		gap: 2px;
	}

	.thcm-hub.thcm-v2 .thcm-table tbody td::before {
		flex: none;
	}
}

/* ========================================================
 * Accessibility + print
 * ====================================================== */
@media (prefers-reduced-motion:reduce) {
	.thcm-hub.thcm-v2 * {
		transition: none !important;
		animation: none !important;
	}

	.thcm-hub.thcm-v2 .thcm-pill2:hover,
	.thcm-hub.thcm-v2 .thcm-pill2.is-active,
	.thcm-hub.thcm-v2 .thcm-sol2:hover,
	.thcm-hub.thcm-v2 .thcm-cta:hover {
		transform: none;
	}

	.thcm-hub.thcm-v2 .thcm-sol2:hover img {
		transform: none;
	}
}

@media print {
	.thcm-hub.thcm-v2 {
		display: block;
	}

	.thcm-hub.thcm-v2 .thcm-side,
	.thcm-hub.thcm-v2 .thcm-pills2,
	.thcm-hub.thcm-v2 .thcm-step2,
	.thcm-hub.thcm-v2 .thcm-chips,
	.thcm-hub.thcm-v2 .thcm-res-right,
	.thcm-hub.thcm-v2 .thcm-more-wrap,
	.thcm-hub.thcm-v2 .thcm-hint {
		display: none !important;
	}

	.thcm-hub.thcm-v2 .thcm-table tr.thcm-hide {
		display: table-row !important;
	}

	.thcm-hub.thcm-v2 .thcm-table-wrap {
		border: 1px solid var(--thc-line-strong);
		box-shadow: none;
	}

	.thcm-hub.thcm-v2 .thcm-cta,
	.thcm-hub.thcm-v2 .tc-table-btn {
		display: none !important;
	}
}

/* ========================================================
 * v1.8.0 — sticky action column
 *
 * The action button was the last cell, so on a 10-column
 * table it sat off-screen until you scrolled right. Rather
 * than move it to first (which pushes the product name
 * out of the lead position), the identifier column pins
 * left and the action column pins right while everything
 * between them scrolls.
 *
 * border-collapse must be `separate` for this: with
 * `collapse`, borders on sticky cells drop out during
 * scroll in Chrome and Safari.
 * ====================================================== */

.thcm-hub.thcm-v2 {
	--thc-row-hover: #F6FCFE;
	/* opaque #DBF4FA42 over white — sticky
	                                 cells need an opaque fill or scrolled
	                                 content shows through them */
	--thc-pin-shadow: 8px 0 10px -8px rgba(151, 151, 151, .3411764705882353);
	--thc-pin-shadow-r: -8px 0 10px -8px rgba(151, 151, 151, .3411764705882353);
}

.thcm-hub.thcm-v2 .thcm-table {
	border-collapse: separate;
	border-spacing: 0;
}

.thcm-hub.thcm-v2 .thcm-table thead th {
	border-bottom: 1px solid var(--thc-accent);
}

.thcm-hub.thcm-v2 .thcm-table tbody th,
.thcm-hub.thcm-v2 .thcm-table tbody td {
	border-bottom: 1px solid var(--thc-line);
}

.thcm-hub.thcm-v2 .thcm-table tbody tr:last-child th,
.thcm-hub.thcm-v2 .thcm-table tbody tr:last-child td {
	border-bottom: none;
}

/* pin the identifier column left */
.thcm-hub.thcm-v2 .thcm-table thead th:first-child,
.thcm-hub.thcm-v2 .thcm-table tbody th {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--thc-surface);
	box-shadow: var(--thc-pin-shadow);
}

.thcm-hub.thcm-v2 .thcm-table thead th:first-child {
	background: var(--thc-table-head);
	z-index: 4;
}

/* pin the action column right */
.thcm-hub.thcm-v2 .thcm-table thead th:last-child,
.thcm-hub.thcm-v2 .thcm-table tbody td.thcm-action {
	position: sticky;
	right: 0;
	z-index: 3;
	background: var(--thc-surface);
	box-shadow: var(--thc-pin-shadow-r);
	text-align: center;
}

.thcm-hub.thcm-v2 .thcm-table thead th:last-child {
	background: var(--thc-table-head);
	z-index: 4;
}

/* hover fill must be opaque on pinned cells */
.thcm-hub.thcm-v2 .thcm-table tbody tr:hover th,
.thcm-hub.thcm-v2 .thcm-table tbody tr:hover td {
	background: var(--thc-row-hover);
}

/* group header spans the full width, so it must not pin */
.thcm-hub.thcm-v2 .thcm-table .thcm-group-h td {
	position: static;
	box-shadow: none;
}

.thcm-hub.thcm-v2 .thcm-table .thcm-group-h.thcm-gh0 td {
	box-shadow: inset 4px 0 0 var(--thc-g0);
}

.thcm-hub.thcm-v2 .thcm-table .thcm-group-h.thcm-gh1 td {
	box-shadow: inset 4px 0 0 var(--thc-g1);
}

.thcm-hub.thcm-v2 .thcm-table .thcm-group-h.thcm-gh2 td {
	box-shadow: inset 4px 0 0 var(--thc-g2);
}

.thcm-hub.thcm-v2 .thcm-table .thcm-group-h.thcm-gh3 td {
	box-shadow: inset 4px 0 0 var(--thc-g3);
}

/* ========================================================
 * v1.8.0 — step 1 as image cards (pills_style = card)
 * Single-select, so the active state is a ring + tick
 * rather than a solid fill: the product photo has to stay
 * readable when the option is chosen.
 * ====================================================== */

.thcm-hub.thcm-v2 .thcm-pills2.thcm-pills-cards {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
}

.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard {
	display: flex;
	flex-direction: column;
	grid-template-columns: none;
	padding: 0 0 15px;
	overflow: hidden;
	text-align: left;
}

.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard img,
.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard .thcm-pillcard-noimg {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: contain;
	padding: 16px;
	margin: 0 0 13px;
	background: linear-gradient(160deg, var(--thc-bg-wash) 0%, var(--thc-table-head) 100%);
	border-bottom: 1px solid var(--thc-line);
	transition: transform .3s ease;
}

.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard .thcm-pillcard-noimg {
	display: grid;
	place-items: center;
}

.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard .thcm-pillcard-noimg::after {
	content: "";
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 2px dashed var(--thc-faint);
}

.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard:hover img {
	transform: scale(1.05);
}

.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard .thcm-pillcard-title {
	padding: 0 16px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--thc-primary);
	line-height: 1.3;
}

.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard .thcm-pillcard-sub {
	margin-top: 5px;
	padding: 0 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--thc-accent);
}

.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard .thcm-pill2-tick {
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	font-size: 12px;
	background: var(--thc-accent);
	color: var(--thc-on-accent);
}

/* override the solid fill the icon-pill active state uses */
.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard.is-active {
	background: var(--thc-surface);
	border-color: var(--thc-accent);
	box-shadow: var(--thc-shadow-lift);
}

.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard.is-active img,
.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard.is-active .thcm-pillcard-noimg {
	background: linear-gradient(160deg, var(--thc-bg-light) 0%, var(--thc-bg-light) 100%);
}

.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard.is-active .thcm-pillcard-title {
	color: var(--thc-primary);
}

.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard.is-active .thcm-pillcard-sub {
	color: var(--thc-accent);
}

@media (max-width:820px) {
	.thcm-hub.thcm-v2 .thcm-pills2.thcm-pills-cards {
		grid-template-columns: 1fr 1fr;
	}

	.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard img,
	.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard .thcm-pillcard-noimg {
		height: 130px;
	}
}

/* phone: table is a card stack, so nothing may pin.
   Also undo the flex/centre overrides on card-mode pills. */
@media (max-width:640px) {

	.thcm-hub.thcm-v2 .thcm-table thead th:first-child,
	.thcm-hub.thcm-v2 .thcm-table tbody th,
	.thcm-hub.thcm-v2 .thcm-table thead th:last-child,
	.thcm-hub.thcm-v2 .thcm-table tbody td.thcm-action {
		position: static;
		box-shadow: none;
		text-align: left;
	}

	.thcm-hub.thcm-v2 .thcm-table tbody tr:hover th,
	.thcm-hub.thcm-v2 .thcm-table tbody tr:hover td {
		background: transparent;
	}

	.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard {
		padding: 0 0 14px !important;
		text-align: left !important;
		gap: 0;
	}

	.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard .thcm-pillcard-title,
	.thcm-hub.thcm-v2 .thcm-pill2.thcm-pillcard .thcm-pillcard-sub {
		align-self: flex-start;
	}
}

/* ========================================================
 * v2.0 — filter sections, deep-link order, description panels
 * ====================================================== */

/* Sections are flex items of .thcm-main so a mega-menu deep link can
   reorder them with `order` alone. The DOM order never changes, so
   crawlers always see the original document sequence. */
.thcm-hub.thcm-v2 .thcm-main {
	display: flex;
	flex-direction: column;
}

.thcm-hub.thcm-v2 .thcm-sec {
	display: block;
	min-width: 0;
}

/* The edited .thcm-sec-label rule above dropped its margin, so the label
   sat on top of the buttons underneath. Restore vertical rhythm here
   (later in the file, so it wins) without touching the styling above. */
.thcm-hub.thcm-v2 .thcm-sec>.thcm-sec-label {
	margin: 0 0 16px;
}

.thcm-hub.thcm-v2 .thcm-sec+.thcm-sec {
	margin-top: 4px;
}

.thcm-hub.thcm-v2 .thcm-sec>.thcm-pills2 {
	margin: 0 0 26px;
}

/* The site header is sticky (~77px), so an anchored section would land
   underneath it. scroll-margin-top reserves that space. */
.thcm-hub.thcm-v2 .thcm-sec {
	scroll-margin-top: 110px;
}

/* Auto-generated section number ("1. ", "2. "). Empty until JS runs, so
   nothing shifts if JS is unavailable — the label still reads correctly. */
.thcm-hub.thcm-v2 .thcm-sec-n {
	font-variant-numeric: tabular-nums;
}

/* ---------- product line description panels ---------- */
.thcm-hub.thcm-v2 .thcm-descs {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 30px;
}

.thcm-hub.thcm-v2 .thcm-descs[hidden] {
	display: none;
}

.thcm-hub.thcm-v2 .thcm-desc {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) 250px;
	gap: 26px;
	align-items: center;
	padding: 22px 26px;
	background: var(--thc-bg-wash);
	border: 1px solid var(--thc-line);
	border-radius: var(--thc-r);
	box-shadow: var(--thc-shadow);
}

.thcm-hub.thcm-v2 .thcm-desc[hidden] {
	display: none;
}

.thcm-hub.thcm-v2 .thcm-desc-media img {
	display: block;
	width: 100%;
	height: 132px;
	object-fit: contain;
}

.thcm-hub.thcm-v2 .thcm-desc-eyebrow {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--thc-accent);
}

.thcm-hub.thcm-v2 .thcm-desc-h {
	margin: 0 0 9px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--thc-primary);
}

.thcm-hub.thcm-v2 .thcm-desc-t {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--thc-text);
	max-width: 62ch;
}

.thcm-hub.thcm-v2 .thcm-desc-feats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.thcm-hub.thcm-v2 .thcm-desc-feats li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.thcm-hub.thcm-v2 .thcm-desc-feat-ic {
	display: grid;
	place-items: center;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--thc-bg-light);
	color: var(--thc-accent-strong);
}

.thcm-hub.thcm-v2 .thcm-desc-feat-ic svg {
	width: 17px;
	height: 17px;
	display: block;
}

.thcm-hub.thcm-v2 .thcm-desc-feats b {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--thc-primary);
	line-height: 1.35;
}

.thcm-hub.thcm-v2 .thcm-desc-feats small {
	display: block;
	margin-top: 1px;
	font-size: 11.5px;
	color: var(--thc-muted);
	line-height: 1.4;
}

@media (max-width:1100px) {
	.thcm-hub.thcm-v2 .thcm-desc {
		grid-template-columns: 160px minmax(0, 1fr);
	}

	.thcm-hub.thcm-v2 .thcm-desc-feats {
		grid-column: 1/-1;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px 26px;
	}

	.thcm-hub.thcm-v2 .thcm-desc-feats li {
		/* flex: 1 1 200px; */
	}
}

@media (max-width:640px) {
	.thcm-hub.thcm-v2 .thcm-desc {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 18px;
	}

	.thcm-hub.thcm-v2 .thcm-desc-media img {
		height: 150px;
	}

	.thcm-hub.thcm-v2 .thcm-desc-feats {
		flex-direction: column;
		gap: 12px;
	}

	.thcm-hub.thcm-v2 .thcm-sec {
		scroll-margin-top: 80px;
	}
}

@media (prefers-reduced-motion:reduce) {
	.thcm-hub.thcm-v2 .thcm-sec {
		scroll-behavior: auto;
	}
}

/* ============================================================
 * v2.3 — "Weitere Filter (optional)" section, numeric range
 * sliders, availability counts and dimming of dead options.
 * ========================================================== */

/* When the side-filter rail moves out to its own section, step 2 no
   longer needs to reserve a 252px column for it. */
.thcm-hub.thcm-v2 .thcm-step2.thcm-step2-full {
	grid-template-columns: minmax(0, 1fr);
}

.thcm-hub.thcm-v2 .thcm-extras {
	background: var(--thc-surface);
	border: 1px solid var(--thc-line);
	border-radius: var(--thc-r);
	padding: 22px;
	margin: 0 0 34px;
	box-shadow: var(--thc-shadow);
}

/* Filter groups sit side by side on desktop; the sliders below them get
   their own row so a long label never squeezes a track to nothing. */
.thcm-hub.thcm-v2 .thcm-extras .thcm-sf-group {
	display: inline-block;
	vertical-align: top;
	min-width: 220px;
	margin: 0 32px 20px 0;
}

.thcm-hub.thcm-v2 .thcm-extras .thcm-sf-group+.thcm-sf-group {
	margin-top: 0;
}











/* The track is a real element so the fill between the two handles can be
   painted; the inputs themselves are transparent and stacked on top. */


























.thcm-hub.thcm-v2 .thcm-extras-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--thc-line);
}

.thcm-hub.thcm-v2 .thcm-extras-count {
	font-size: 13px;
	font-weight: 700;
	color: var(--thc-accent-dark, var(--thc-accent));
}

/* The section reset is inline, not the full-width rail button. */
.thcm-hub.thcm-v2 .thcm-extras .thcm-reset {
	width: auto;
	margin-top: 0;
	padding: 8px 16px;
}

/* ---- availability counts ---- */
.thcm-hub.thcm-v2 .thcm-cnt:empty {
	display: none;
}

.thcm-hub.thcm-v2 .thcm-cnt {
	display: inline-block;
	min-width: 20px;
	padding: 1px 6px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	color: var(--thc-muted);
	background: var(--thc-surface-2);
	border: 1px solid var(--thc-line);
	border-radius: 100px;
}

.thcm-hub.thcm-v2 .thcm-sf-seg button .thcm-cnt {
	margin-left: 6px;
	padding: 0 5px;
	min-width: 0;
	line-height: 14px;
	font-size: 10px;
}

.thcm-hub.thcm-v2 .thcm-sf-seg button.is-on .thcm-cnt,
.thcm-hub.thcm-v2 .thcm-pill2.is-active .thcm-cnt,
.thcm-hub.thcm-v2 .thcm-sol2.is-selected .thcm-cnt {
	color: var(--thc-on-accent);
	background: rgba(255, 255, 255, .22);
	border-color: transparent;
}

/* Counts on pills and cards sit in the corner, out of the text flow. */
.thcm-hub.thcm-v2 .thcm-pill2,
.thcm-hub.thcm-v2 .thcm-sol2 {
	position: relative;
}

.thcm-hub.thcm-v2 .thcm-pill2>.thcm-cnt,
.thcm-hub.thcm-v2 .thcm-sol2>.thcm-cnt {
	position: absolute;
	right: 10px;
	bottom: 9px;
}

.thcm-hub.thcm-v2 .thcm-sol2>.thcm-cnt {
	top: 33% !important;
	bottom: auto !important;
	transform: translateY(-50%);
	position: absolute;
	right: 10px !important;
	z-index: 2;
	display: inline-block;
	min-width: 20px;
	padding: 1px 6px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	color: var(--thc-muted);
	background: var(--thc-surface-2);
	border: 1px solid var(--thc-line);
	border-radius: 100px;
}

.thcm-hub.thcm-v2 .thcm-sol2.is-selected .thcm-cnt {
	color: #009dbf;
	background: rgb(255 255 255);
	border-color: #009dbf;
}

.thcm-hub.thcm-v2 .thcm-pillcard>.thcm-cnt,
.thcm-hub.thcm-v2 .thcm-sol2>.thcm-cnt {
	right: 10px;
	top: 10px;
	bottom: auto;
}

/* ---- dimmed / unavailable options (client: "hidden / blurred") ---- */
.thcm-hub.thcm-v2 .is-unavailable {
	opacity: .34;
	filter: grayscale(1);
	cursor: not-allowed;
}

.thcm-hub.thcm-v2 .is-unavailable img {
	filter: blur(1.5px);
}

.thcm-hub.thcm-v2 .is-unavailable:hover {
	border-color: var(--thc-line);
	color: var(--thc-text);
	background: var(--thc-surface-2);
}

@media (prefers-reduced-motion: reduce) {
	.thcm-hub.thcm-v2 .is-unavailable img {
		filter: none;
	}
}

@media (max-width: 782px) {
	.thcm-hub.thcm-v2 .thcm-extras {
		padding: 16px;
	}

	.thcm-hub.thcm-v2 .thcm-extras .thcm-sf-group {
		display: block;
		min-width: 0;
		margin-right: 0;
	}

	.thcm-hub.thcm-v2 .thcm-extras-foot {
		flex-direction: column;
		align-items: stretch;
	}

	.thcm-hub.thcm-v2 .thcm-extras .thcm-reset {
		width: 100%;
	}
}

/* ============================================================
 * v2.4 — multi-product selection tray + picker column
 * ========================================================== */

.thcm-hub.thcm-v2 .thcm-pick-col {
	width: 44px;
	text-align: center;
	padding-left: 10px;
	padding-right: 4px;
}

.thcm-hub.thcm-v2 .thcm-pick,
.thcm-hub.thcm-v2 .thcm-pick-all {
	width: 17px;
	height: 17px;
	accent-color: var(--thc-accent);
	cursor: pointer;
	margin: 0;
}

.thcm-hub.thcm-v2 tr.is-picked>th,
.thcm-hub.thcm-v2 tr.is-picked>td {
	background: var(--thc-accent-tint);
}

/* Inline rather than position:fixed, so it can never cover the table on a
   short viewport; it only becomes sticky once it holds something. */
.thcm-hub.thcm-v2 .thcm-tray {
	position: sticky;
	bottom: 12px;
	z-index: 5;
	margin: 18px 0 0;
	padding: 16px 18px;
	background: var(--thc-surface);
	border: 1px solid var(--thc-accent);
	border-radius: var(--thc-r);
	box-shadow: 0 8px 28px rgba(10, 26, 63, .13);
}

.thcm-hub.thcm-v2 .thcm-tray[hidden] {
	display: none;
}

.thcm-hub.thcm-v2 .thcm-tray-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.thcm-hub.thcm-v2 .thcm-tray-count {
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--thc-accent-dark, var(--thc-accent));
}

.thcm-hub.thcm-v2 .thcm-tray-clear {
	padding: 5px 11px;
	font-size: 12px;
	font-weight: 600;
	color: var(--thc-muted);
	background: var(--thc-surface-2);
	border: 1px solid var(--thc-line);
	border-radius: 100px;
	cursor: pointer;
}

.thcm-hub.thcm-v2 .thcm-tray-clear:hover {
	color: var(--thc-accent-dark, var(--thc-accent));
	border-color: var(--thc-accent);
}

.thcm-hub.thcm-v2 .thcm-tray-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	/* Long baskets scroll instead of pushing the button off-screen. */
	max-height: 132px;
	overflow-y: auto;
}

.thcm-hub.thcm-v2 .thcm-tray-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 6px 5px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--thc-text);
	background: var(--thc-surface-2);
	border: 1px solid var(--thc-line);
	border-radius: 100px;
}

.thcm-hub.thcm-v2 .thcm-tray-name {
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.thcm-hub.thcm-v2 .thcm-tray-x {
	width: 19px;
	height: 19px;
	flex: 0 0 19px;
	font-size: 15px;
	line-height: 17px;
	color: var(--thc-muted);
	background: transparent;
	border: 1px solid var(--thc-line);
	border-radius: 50%;
	cursor: pointer;
}

.thcm-hub.thcm-v2 .thcm-tray-x:hover {
	color: #fff;
	background: #009DBF;
	border-color: #009DBF;
}

.thcm-hub.thcm-v2 .thcm-tray-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.thcm-hub.thcm-v2 .thcm-tray-hint {
	margin: 0;
	font-size: 12px;
	color: var(--thc-muted);
}

.thcm-hub.thcm-v2 .thcm-tray-hint.is-warn {
	color: #009DBF;
	font-weight: 600;
}

.thcm-hub.thcm-v2 .thcm-tray-cta {
	padding: 10px 22px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--thc-on-accent);
	background: var(--thc-accent);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.thcm-hub.thcm-v2 .thcm-tray-cta:hover {
	background: var(--thc-accent-dark, var(--thc-accent));
}

@media (max-width: 782px) {
	.thcm-hub.thcm-v2 .thcm-tray {
		bottom: 0;
		padding: 13px 14px;
		border-radius: var(--thc-r) var(--thc-r) 0 0;
	}

	.thcm-hub.thcm-v2 .thcm-tray-foot {
		flex-direction: column;
		align-items: stretch;
	}

	.thcm-hub.thcm-v2 .thcm-tray-cta {
		width: 100%;
	}

	.thcm-hub.thcm-v2 .thcm-tray-name {
		max-width: 150px;
	}

	.thcm-hub.thcm-v2 .thcm-tray-list {
		max-height: 108px;
	}

	/* The stacked mobile table repeats each label, so the checkbox needs
	   its own full-width row rather than a 44px column. */
	.thcm-hub.thcm-v2 .thcm-pick-col {
		width: auto;
		text-align: left;
	}
}

/* ============================================================
 * v2.4.1 — slider refinement, selection affordance, round × buttons
 * ========================================================== */

/* ---- sliders: taller track, larger grabbable thumbs ---- */






/* An engaged slider is visibly engaged — otherwise, with seven of them, it
   is not obvious which one is narrowing the result set. */






















@media (prefers-reduced-motion: reduce) {
	.thcm-hub.thcm-v2 .thcm-range,
	.thcm-hub.thcm-v2 .thcm-range-out,
}

/* ---- the multiselect is announced, not left to be discovered ---- */
.thcm-hub.thcm-v2 .thcm-multi-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 14px;
	padding: 11px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--thc-text);
	background: var(--thc-accent-tint);
	border: 1px solid rgba(0, 157, 191, .28);
	border-radius: 10px;
}

.thcm-hub.thcm-v2 .thcm-multi-note-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	margin-top: 1px;
	color: var(--thc-on-accent);
	background: var(--thc-accent);
	border-radius: 50%;
}

/* Bigger hit area and a visible resting state, so the column reads as
   "you may tick these" rather than as decoration. */
.thcm-hub.thcm-v2 .thcm-pick-col {
	width: 52px;
}

.thcm-hub.thcm-v2 .thcm-pick,
.thcm-hub.thcm-v2 .thcm-pick-all {
	width: 19px;
	height: 19px;
	border: 1.5px solid var(--thc-muted);
	border-radius: 5px;
	transition: box-shadow .14s;
}

.thcm-hub.thcm-v2 .thcm-pick:hover,
.thcm-hub.thcm-v2 .thcm-pick-all:hover {
	box-shadow: 0 0 0 4px rgba(0, 157, 191, .16);
}

.thcm-hub.thcm-v2 .thcm-pick:focus-visible,
.thcm-hub.thcm-v2 .thcm-pick-all:focus-visible {
	outline: 2px solid var(--thc-accent);
	outline-offset: 2px;
}

/* A picked row is marked on the left edge as well as tinted, which survives
   zebra striping and reads at a glance down a long table. */
.thcm-hub.thcm-v2 tr.is-picked>td:first-child,
.thcm-hub.thcm-v2 tr.is-picked>th:first-child {
	box-shadow: inset 3px 0 0 var(--thc-accent);
}

/* ---- round × buttons ----
   Without an explicit flex-basis and matching width/height these were
   stretched by the flex row into wide ovals. */
.thcm-hub.thcm-v2 .thcm-tray-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	padding: 0;
	font-size: 15px;
	line-height: 1;
	background: rgba(10, 26, 63, .06);
	border: 0;
	transition: background .14s, color .14s;
}

.thcm-hub.thcm-v2 .thcm-tray-x:hover {
	background: var(--thc-accent);
	border-color: var(--thc-accent);
}

.thcm-hub.thcm-v2 .thcm-tray-item {
	max-width: 100%;
	padding: 5px 5px 5px 12px;
}

.thcm-hub.thcm-v2 .thcm-tray {
	border-width: 2px;
}

.thcm-hub.thcm-v2 .thcm-tray-count {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.thcm-hub.thcm-v2 .thcm-tray-count::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--thc-accent);
}

/* ============================================================
 * v2.4.4 — tick/count collision, slider alignment
 * ========================================================== */

/* ---- the selected-tick and the availability count were both pinned to the
   right edge and to the text box, so on a narrow pill they sat on top of the
   label. Give them one shared column and reserve it in the padding. ---- */
.thcm-hub.thcm-v2 .thcm-pill2,
.thcm-hub.thcm-v2 .thcm-pillcard {
	padding-right: 46px;
}

.thcm-hub.thcm-v2 .thcm-pill2-tick {
	top: 10px;
	right: 10px;
	bottom: auto;
	left: auto;
	z-index: 2;
}

/* Count drops to the opposite corner, never sharing a line with the tick. */
.thcm-hub.thcm-v2 .thcm-pill2>.thcm-cnt,
.thcm-hub.thcm-v2 .thcm-pillcard>.thcm-cnt {
	top: auto;
	bottom: 10px;
	right: 10px;
	z-index: 2;
}

.thcm-hub.thcm-v2 .thcm-sol2>.thcm-cnt {
	top: 10px;
	right: 46px;
	/* clear of the card's own radio/check control */
	bottom: auto;
}

/* A one-line pill has no room below for the count; centre it beside the tick. */
.thcm-hub.thcm-v2 .thcm-pill2:not(.thcm-pillcard)>.thcm-cnt {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

.thcm-hub.thcm-v2 .thcm-pill2:not(.thcm-pillcard).is-active>.thcm-cnt {
	right: 10px;
	color: #009dbf;
	background: #fff;
}

/* ---- sliders: every card the same shape ----
   "INNENMASS LÄNGE" wraps to two lines while "WANDDICKE" does not, so the
   cards were different heights and the tracks sat at different offsets.
   A grid with fixed rows lines the tracks up across the whole set. */














@media (max-width: 600px) {

	.thcm-hub.thcm-v2 .thcm-pill2,
	.thcm-hub.thcm-v2 .thcm-pillcard {
		padding-right: 42px;
	}
}


/* ============================================================
 * v2.5 — collapsible compact dimension filters, hit counter,
 *        sortable columns
 * ========================================================== */

/* ---- collapsible group ---- */
.thcm-hub.thcm-v2 .thcm-ranges-wrap {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--thc-line);
}

.thcm-hub.thcm-v2 .thcm-ranges-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 11px 14px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--thc-text);
	background: var(--thc-surface-2);
	border: 1px solid var(--thc-line);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}

.thcm-hub.thcm-v2 .thcm-ranges-toggle:hover {
	border-color: var(--thc-accent);
	color: var(--thc-accent-dark, var(--thc-accent));
}

.thcm-hub.thcm-v2 .thcm-ranges-wrap.is-open .thcm-ranges-toggle {
	border-radius: 10px 10px 0 0;
	border-bottom-color: transparent;
	background: var(--thc-surface);
}

.thcm-hub.thcm-v2 .thcm-ranges-toggle-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	color: var(--thc-on-accent);
	background: var(--thc-accent);
	border-radius: 7px;
}

.thcm-hub.thcm-v2 .thcm-ranges-toggle-txt {
	flex: 1 1 auto;
	text-align: left;
	font-size: 16px;
}

/* A narrowed filter must be visible even while the group is folded away. */
.thcm-hub.thcm-v2 .thcm-ranges-active {
	padding: 2px 9px;
	font-size: 11px;
	font-weight: 700;
	color: var(--thc-on-accent);
	background: var(--thc-accent);
	border-radius: 100px;
}

.thcm-hub.thcm-v2 .thcm-ranges-active[hidden] {
	display: none;
}

.thcm-hub.thcm-v2 .thcm-ranges-chev {
	display: inline-flex;
	color: var(--thc-muted);
	transition: transform .2s ease;
}

.thcm-hub.thcm-v2 .thcm-ranges-wrap.is-open .thcm-ranges-chev {
	transform: rotate(180deg);
}

.thcm-hub.thcm-v2 .thcm-ranges {
	display: block;
	padding: 2px 16px 12px;
	background: var(--thc-surface);
	border: 1px solid var(--thc-line);
	border-top: 0;
	border-radius: 0 0 10px 10px;
}

.thcm-hub.thcm-v2 .thcm-ranges[hidden] {
	display: none;
}

/* ---- groups ---- */
/* ---- groups: rows sit side by side, so seven dimensions occupy three
   lines instead of seven. This is what actually removes the length; the
   row heights were only part of it. ---- */
.thcm-hub.thcm-v2 .thcm-range-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
	gap: 0 26px;
	padding: 10px 0 2px;
}

.thcm-hub.thcm-v2 .thcm-range-group+.thcm-range-group {
	border-top: 1px solid #EEF3F6;
}

.thcm-hub.thcm-v2 .thcm-range-group-title {
	grid-column: 1 / -1;
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--thc-accent-dark, var(--thc-accent));
}

/* ---- one dimension, one line: name · von–bis · track ---- */
.thcm-hub.thcm-v2 .thcm-range {
	display: grid;
	grid-template-columns: 58px auto minmax(70px, 1fr);
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	min-height: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.thcm-hub.thcm-v2 .thcm-range+.thcm-range {
	border-top: 0;
}

.thcm-hub.thcm-v2 .thcm-range-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--thc-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.thcm-hub.thcm-v2 .thcm-range.is-active .thcm-range-name {
	color: var(--thc-accent-dark, var(--thc-accent));
	font-weight: 700;
}

/* The live readout duplicated the two number fields exactly, so it was pure
   width. Kept in the DOM for assistive tech, off the layout. */
.thcm-hub.thcm-v2 .thcm-range-out {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.thcm-hub.thcm-v2 .thcm-range-nums {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
}

.thcm-hub.thcm-v2 .thcm-range-nums input {
	width: 54px;
	padding: 5px 3px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	color: var(--thc-text);
	background: var(--thc-surface-2);
	border: 1px solid var(--thc-line);
	border-radius: 6px;
	-moz-appearance: textfield;
	transition: border-color .14s, box-shadow .14s, background .14s;
}

.thcm-hub.thcm-v2 .thcm-range-nums input::-webkit-outer-spin-button,
.thcm-hub.thcm-v2 .thcm-range-nums input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.thcm-hub.thcm-v2 .thcm-range-nums input:focus {
	outline: none;
	background: var(--thc-surface);
	border-color: var(--thc-accent);
	box-shadow: 0 0 0 3px rgba(0, 157, 191, .15);
}

.thcm-hub.thcm-v2 .thcm-range.is-active .thcm-range-nums input {
	background: var(--thc-surface);
	border-color: #9FD8E6;
	color: var(--thc-accent-dark, var(--thc-accent));
}

.thcm-hub.thcm-v2 .thcm-range-dash {
	font-size: 11px;
	color: var(--thc-muted);
}

.thcm-hub.thcm-v2 .thcm-range-unit {
	font-size: 10.5px;
	font-weight: 600;
	color: var(--thc-muted);
	margin-left: 1px;
}

/* ---- track ---- */
.thcm-hub.thcm-v2 .thcm-range-track {
	position: relative;
	display: block;
	height: 4px;
	margin: 0 8px;
	background: #DCE7ED;
	border-radius: 100px;
}

.thcm-hub.thcm-v2 .thcm-range-fill {
	position: absolute;
	top: 0;
	height: 100%;
	border-radius: 100px;
	background: linear-gradient(90deg, #22C1DC 0%, var(--thc-accent) 100%);
}

.thcm-hub.thcm-v2 .thcm-range-track input[type="range"] {
	position: absolute;
	top: 50%;
	left: -8px;
	width: calc(100% + 16px);
	height: 20px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	background: none;
	border: 0;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

.thcm-hub.thcm-v2 .thcm-range-track input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	pointer-events: auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--thc-accent);
	box-shadow: 0 1px 3px rgba(10, 26, 63, .25);
	cursor: grab;
	transition: transform .12s ease, box-shadow .12s ease;
}

.thcm-hub.thcm-v2 .thcm-range-track input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--thc-accent);
	box-shadow: 0 1px 3px rgba(10, 26, 63, .25);
	cursor: grab;
}

.thcm-hub.thcm-v2 .thcm-range-track input[type="range"]::-webkit-slider-thumb:hover,
.thcm-hub.thcm-v2 .thcm-range-track input[type="range"]:active::-webkit-slider-thumb {
	transform: scale(1.18);
	box-shadow: 0 0 0 5px rgba(0, 157, 191, .18);
}

.thcm-hub.thcm-v2 .thcm-range-track input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 5px rgba(0, 157, 191, .3);
}

.thcm-hub.thcm-v2 .thcm-range-track input[type="range"]::-moz-range-track {
	background: none;
	border: 0;
}

/* ---- the hit counter ---- */
.thcm-hub.thcm-v2 .thcm-hitbox {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px 10px 14px;
	background: linear-gradient(135deg, #F0FAFC 0%, #E4F5F9 100%);
	border: 1.5px solid var(--thc-accent);
	border-radius: 12px;
}

.thcm-hub.thcm-v2 .thcm-hitbox-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	color: var(--thc-on-accent);
	background: var(--thc-accent);
	border-radius: 10px;
}

.thcm-hub.thcm-v2 .thcm-hitbox-txt {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.thcm-hub.thcm-v2 .thcm-hitbox-n {
	font-size: 26px;
	font-weight: 800;
	color: var(--thc-accent-dark, var(--thc-accent));
	font-variant-numeric: tabular-nums;
}

.thcm-hub.thcm-v2 .thcm-hitbox-lbl {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--thc-muted);
}

/* Nothing found is the state the counter exists to make obvious. */
.thcm-hub.thcm-v2 .thcm-hitbox.is-empty {
	background: #FFF6F5;
	border-color: #E3A9A2;
}

.thcm-hub.thcm-v2 .thcm-hitbox.is-empty .thcm-hitbox-ic {
	background: #C9736A;
}

.thcm-hub.thcm-v2 .thcm-hitbox.is-empty .thcm-hitbox-n {
	color: #B4564C;
}

/* ---- sortable headers ---- */
.thcm-hub.thcm-v2 .thcm-th-sort {
	padding: 0;
}

.thcm-hub.thcm-v2 .thcm-sort-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
}

.thcm-hub.thcm-v2 .thcm-sort-btn:hover {
	color: var(--thc-accent);
}

.thcm-hub.thcm-v2 .thcm-sort-ic {
	opacity: .38;
	flex: 0 0 auto;
	transition: opacity .14s;
}

.thcm-hub.thcm-v2 .thcm-sort-btn:hover .thcm-sort-ic {
	opacity: .7;
}

.thcm-hub.thcm-v2 .thcm-th-sort.is-sorted .thcm-sort-ic {
	opacity: 1;
}

/* Only the active direction's chevron is drawn, so the header states which
   way the column is pointing rather than just that it is sortable. */
.thcm-hub.thcm-v2 .thcm-th-sort.is-sorted .thcm-sort-dn {
	display: none;
}

.thcm-hub.thcm-v2 .thcm-th-sort.is-sorted.is-desc .thcm-sort-dn {
	display: inline;
}

.thcm-hub.thcm-v2 .thcm-th-sort.is-sorted.is-desc .thcm-sort-up {
	display: none;
}

@media (max-width: 600px) {

	/* One dimension per line, track on its own row: at this width a track
	   sharing the line with two number fields is too short to aim at. */
	.thcm-hub.thcm-v2 .thcm-range-group {
		grid-template-columns: minmax(0, 1fr);
	}

	.thcm-hub.thcm-v2 .thcm-range {
		grid-template-columns: 62px minmax(0, 1fr);
		gap: 8px;
		padding: 6px 0;
	}

	.thcm-hub.thcm-v2 .thcm-range-track {
		grid-column: 2;
		margin: 2px 8px 0;
	}

	.thcm-hub.thcm-v2 .thcm-hitbox {
		width: 100%;
	}
}




.thcm-hub.thcm-v2 .thcm-range-track input[type="range"] {
	height: 14px;
	top: 50%;
	transform: translateY(-50%);
}

.thcm-hub.thcm-v2 .thcm-range-track input[type="range"]::-webkit-slider-runnable-track {
	height: 14px;
	background: transparent;
	border: 0;
}

.thcm-hub.thcm-v2 .thcm-range-track input[type="range"]::-webkit-slider-thumb {
	margin-top: 0;
}

.thcm-hub.thcm-v2 .thcm-range-track input[type="range"]::-moz-range-track {
	height: 14px;
	background: transparent;
	border: 0;
} 



/* 
.thcm-hub.thcm-v2 .thcm-range-group {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 8px 18px;
	padding: 12px 0 6px;
}

.thcm-hub.thcm-v2 .thcm-range-group-title {
	margin: 0 0 6px;
	font-size: 11px;
	letter-spacing: .12em;
}

.thcm-hub.thcm-v2 .thcm-range {
	grid-template-columns: 56px minmax(80px, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	background: #fff;
	border: 1px solid #E8EFF3;
	border-radius: 10px;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.thcm-hub.thcm-v2 .thcm-range:hover {
	border-color: #BFDEE8;
	box-shadow: 0 2px 10px rgba(10, 26, 63, .06);
}

.thcm-hub.thcm-v2 .thcm-range.is-active {
	border-color: var(--thc-accent);
	background: linear-gradient(180deg, #FBFEFF 0%, #F3FAFC 100%);
	box-shadow: 0 2px 12px rgba(0, 157, 191, .13);
}

.thcm-hub.thcm-v2 .thcm-range-name  { order: 1; font-size: 12.5px; }
.thcm-hub.thcm-v2 .thcm-range-track { order: 2; }
.thcm-hub.thcm-v2 .thcm-range-nums  { order: 3; }

.thcm-hub.thcm-v2 .thcm-range-track {
	height: 6px;
	margin: 0 10px;
	background: #E1EAEF;
	border-radius: 100px;
	box-shadow: inset 0 1px 2px rgba(10, 26, 63, .07);
}

.thcm-hub.thcm-v2 .thcm-range-fill {
	background: linear-gradient(90deg, #5FCADD 0%, var(--thc-accent) 100%);
	box-shadow: 0 1px 4px rgba(0, 157, 191, .3);
}


.thcm-hub.thcm-v2 .thcm-range-track input[type="range"] {
	height: 16px;
	top: 50%;
	left: -10px;
	width: calc(100% + 20px);
	transform: translateY(-50%);
}

.thcm-hub.thcm-v2 .thcm-range-track input[type="range"]::-webkit-slider-runnable-track {
	height: 16px;
	background: transparent;
	border: 0;
}

.thcm-hub.thcm-v2 .thcm-range-track input[type="range"]::-moz-range-track {
	height: 16px;
	background: transparent;
	border: 0;
}

.thcm-hub.thcm-v2 .thcm-range-track input[type="range"]::-webkit-slider-thumb {
	width: 16px;
	height: 16px;
	margin-top: 0;
	background: #fff;
	border: 4px solid var(--thc-accent);
	box-shadow: 0 1px 4px rgba(10, 26, 63, .3);
}

.thcm-hub.thcm-v2 .thcm-range-track input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: #fff;
	border: 4px solid var(--thc-accent);
	box-shadow: 0 1px 4px rgba(10, 26, 63, .3);
}

.thcm-hub.thcm-v2 .thcm-range-track input[type="range"]::-webkit-slider-thumb:hover,
.thcm-hub.thcm-v2 .thcm-range-track input[type="range"]:active::-webkit-slider-thumb {
	transform: scale(1.15);
	box-shadow: 0 0 0 6px rgba(0, 157, 191, .17), 0 1px 4px rgba(10, 26, 63, .3);
}

.thcm-hub.thcm-v2 .thcm-range-nums {
	gap: 5px;
}

.thcm-hub.thcm-v2 .thcm-range-nums input {
	width: 52px;
	padding: 6px 4px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--thc-text);
	background: #F5F9FB;
	border: 1px solid #E3EBF0;
	border-radius: 7px;
	appearance: textfield;
	-moz-appearance: textfield;
}

.thcm-hub.thcm-v2 .thcm-range-nums input::-webkit-outer-spin-button,
.thcm-hub.thcm-v2 .thcm-range-nums input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	display: none;
}

.thcm-hub.thcm-v2 .thcm-range.is-active .thcm-range-nums input {
	color: var(--thc-accent-strong);
	background: #fff;
	border-color: #9FD8E6;
}

.thcm-hub.thcm-v2 .thcm-range-unit {
	min-width: 20px;
	font-size: 10.5px;
}

@media (max-width: 620px) {
	.thcm-hub.thcm-v2 .thcm-range-group {
		grid-template-columns: minmax(0, 1fr);
	}

	.thcm-hub.thcm-v2 .thcm-range {
		grid-template-columns: 56px minmax(0, 1fr);
		row-gap: 8px;
	}

	.thcm-hub.thcm-v2 .thcm-range-track {
		order: 3;
		grid-column: 1 / -1;
		margin: 0 10px;
	}

	.thcm-hub.thcm-v2 .thcm-range-nums {
		order: 2;
		justify-self: end;
	}
}

*/