/*
 * Collection pages, the parts every layout shares (parts/collection/*). Loaded with
 * Home B's file, whose tokens, type, buttons, header, footer and questions these pages
 * reuse through the hdc-home-b body class; each layout adds its own file
 * (collection-spec.css, collection-load.css, collection-guide.css).
 *
 * Home B's rules hold here: square corners, hairlines and type for structure, no
 * shadows, no pills or count bubbles, yellow only as the Call fill, never yellow text or
 * rules on white. Breakpoints 40rem, 48rem, 64rem, 80rem. Layout rules are not nested.
 */

@layer tokens {
	body.hdc-col {
		/* The blueprint ground of Your route, reused for quiet zones. */
		--c-ground: #eceff3;
		--c-rule: #cfd7df;
		--c-mute: #56616c;
		--c-ok: #1b7a3a;
		--c-close: #b42318;
		--c-shade: rgb(22 25 29 / 0.62);
		--c-row: 5.5rem;
	}
}

@layer components {
	/* Section titles: Home B's title, one step smaller (lists are working pages). */
	.hdc-col .hdc-collection-h2 {
		color: var(--ink);
		font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
		font-stretch: 75%;
		font-weight: 750;
		line-height: 1;
		text-wrap: balance;
	}

	/* Staging layout switch. */
	.hdc-col .hdc-collection-preview {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.25rem 1rem;
		padding: 0.375rem var(--gutter);
		background: var(--ink);
		color: var(--mist);
		font-size: 0.8125rem;
		--link: var(--fog);
		--link-hover: var(--white);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-col .hdc-collection-preview__label {
		font-weight: 700;
	}

	.hdc-col .hdc-collection-preview__link {
		display: inline-flex;
		align-items: center;
		min-height: 2rem;
	}

	.hdc-col .hdc-collection-preview__link[aria-current] {
		color: var(--accent);
		font-weight: 700;
	}

	.hdc-col .hdc-collection-preview__note {
		margin-left: auto;
	}

	/* Breadcrumb. */
	.hdc-col .hdc-collection-crumbs__list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 0;
		margin: 0;
		padding: 0;
		font-size: 0.875rem;
		list-style: none;
		--link: var(--steel);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-col .hdc-collection-crumbs__item {
		display: inline-flex;
		align-items: center;
		color: var(--steel);
	}

	.hdc-col .hdc-collection-crumbs__item + .hdc-collection-crumbs__item::before {
		content: "/";
		margin-inline: 0.5rem;
		color: var(--control);
	}

	.hdc-col .hdc-collection-crumbs__item a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}

	.hdc-col .hdc-collection-crumbs__item [aria-current] {
		color: var(--body);
	}

	.hdc-col .hdc-collection-crumbs--dark .hdc-collection-crumbs__list {
		--link: var(--mist);
		--link-hover: var(--white);
	}

	.hdc-col .hdc-collection-crumbs--dark .hdc-collection-crumbs__item,
	.hdc-col .hdc-collection-crumbs--dark .hdc-collection-crumbs__item [aria-current] {
		color: var(--fog);
	}

	/* Call and the quote, side by side; the quote fills the row alone without a number. */
	.hdc-col .hdc-collection-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.hdc-col .hdc-collection-actions > * {
		flex: 1 1 13rem;
	}

	.hdc-col .hdc-collection-call {
		font-variant-numeric: tabular-nums;
	}

	/* Availability: the word with a small square marker. */
	.hdc-col .hdc-collection-avail {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--body);
		font-size: 0.9375rem;
	}

	.hdc-col .hdc-collection-avail::before {
		content: "";
		flex: none;
		width: 0.5rem;
		height: 0.5rem;
		background: var(--c-ok);
	}

	.hdc-col .hdc-collection-avail--preorder::before {
		outline: 1px solid var(--ink);
		background: var(--accent);
	}

	.hdc-col .hdc-collection-avail--discontinued::before,
	.hdc-col .hdc-collection-avail--unavailable::before {
		background: var(--control);
	}

	/* Type cards (Keith's sharp cards, squared): a crisp photo on white, an ink name bar. */
	.hdc-col .hdc-collection-types {
		padding-block: var(--space-section) 0;
	}

	.hdc-col .hdc-collection-types__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
		margin: 1.5rem 0 0;
		padding: 0;
		list-style: none;
	}

	.hdc-col .hdc-collection-types__card {
		display: flex;
		flex-direction: column;
		height: 100%;
		border: 1px solid var(--line);
		background: var(--white);
		color: var(--ink);
		text-decoration: none;
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: none;
	}

	.hdc-col .hdc-collection-types__photo {
		display: block;
		overflow: hidden;
		aspect-ratio: 4 / 3;
		padding: 0.75rem;
		background: var(--white);
	}

	.hdc-col .hdc-collection-types__img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		transition: transform 0.2s ease-out;
	}

	.hdc-col .hdc-collection-types__bar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 0 0.5rem;
		margin-top: auto;
		padding: 0.75rem;
		background: var(--ink);
		color: var(--white);
	}

	/* Two lines on every card, so the bars line up when one name wraps (Tanzeel's row rule). */
	.hdc-col .hdc-collection-types__name {
		display: flex;
		align-items: end;
		min-height: 2.3em;
		color: var(--white);
		font-size: 1.0625rem;
		font-stretch: 85%;
		font-weight: 750;
		line-height: 1.15;
	}

	.hdc-col .hdc-collection-types__count {
		grid-row: 2;
		color: var(--mist);
		font-size: 0.8125rem;
	}

	.hdc-col .hdc-collection-types__go {
		display: flex;
		grid-row: 1 / span 2;
		grid-column: 2;
		align-items: center;
	}

	.hdc-col .hdc-collection-types__arrow {
		width: 1.25rem;
		height: 1.25rem;
		transition: transform 0.15s ease-out;
	}

	.hdc-col .hdc-collection-types__card:hover {
		border-color: var(--ink);
	}

	.hdc-col .hdc-collection-types__card:hover .hdc-collection-types__img {
		transform: scale(1.04);
	}

	.hdc-col .hdc-collection-types__card:hover .hdc-collection-types__arrow {
		transform: translateX(0.25rem);
		color: var(--accent);
	}

	/* Filters: a bottom sheet on phones, see each layout for the wide form. */
	.hdc-col .hdc-collection-filters {
		position: fixed;
		inset: auto 0 0;
		width: 100%;
		max-width: none;
		max-height: min(88dvh, 44rem);
		margin: 0;
		padding: 0;
		border: 0;
		background: var(--white);
		color: var(--body);
		overscroll-behavior: contain;
	}

	.hdc-col .hdc-collection-filters[open] {
		display: flex;
		flex-direction: column;
	}

	.hdc-col .hdc-collection-filters::backdrop {
		background: var(--c-shade);
	}

	.hdc-col .hdc-collection-filters__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.75rem var(--gutter);
		border-bottom: 1px solid var(--line);
	}

	.hdc-col .hdc-collection-filters__title {
		color: var(--ink);
		font-size: 1.5rem;
		font-stretch: 75%;
		font-weight: 750;
	}

	/* The close button Tanzeel asked for on every drawer: red and white, square. */
	.hdc-col .hdc-collection-filters__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3rem;
		height: 3rem;
		border: 0;
		background: var(--c-close);
		color: var(--white);
		cursor: pointer;
	}

	.hdc-col .hdc-collection-filters__close .hdc-icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.hdc-col .hdc-collection-filters__body {
		flex: 1 1 auto;
		overflow-y: auto;
		padding: 0.5rem var(--gutter) 1rem;
	}

	.hdc-col .hdc-collection-filters__group {
		margin: 0;
		padding: 1rem 0;
		border: 0;
		border-bottom: 1px solid var(--line);
	}

	.hdc-col .hdc-collection-filters__group:last-child {
		border-bottom: 0;
	}

	.hdc-col .hdc-collection-filters__legend {
		float: left;
		width: 100%;
		margin-bottom: 0.75rem;
		color: var(--ink);
		font-weight: 700;
	}

	/* Options as square cells: the radio is the whole cell, checked reads ink. */
	.hdc-col .hdc-collection-filters__group {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.hdc-col .hdc-collection-filters__option {
		display: inline-flex;
		position: relative;
		align-items: center;
		gap: 0.5rem;
		min-height: 3rem;
		padding: 0.5rem 0.875rem;
		border: 1px solid var(--control);
		background: var(--white);
		color: var(--ink);
		font-size: 0.9375rem;
		cursor: pointer;
	}

	.hdc-col .hdc-collection-filters__option input {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		opacity: 0;
		cursor: pointer;
	}

	.hdc-col .hdc-collection-filters__option:has(input:checked) {
		border-color: var(--ink);
		background: var(--ink);
		color: var(--white);
	}

	.hdc-col .hdc-collection-filters__option:has(input:focus-visible) {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}

	.hdc-col .hdc-collection-filters__count {
		color: var(--steel);
		font-size: 0.8125rem;
		font-variant-numeric: tabular-nums;
	}

	.hdc-col .hdc-collection-filters__option:has(input:checked) .hdc-collection-filters__count {
		color: var(--mist);
	}

	.hdc-col .hdc-collection-filters__foot {
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
		border-top: 1px solid var(--line);
		background: var(--white);
	}

	.hdc-col .hdc-collection-filters__clear,
	.hdc-col .hdc-collection-toolbar__clear {
		min-height: 2.75rem;
		padding: 0;
		border: 0;
		background: none;
		color: var(--ink);
		font-weight: 700;
		text-decoration: underline;
		text-underline-offset: 0.2em;
		cursor: pointer;
	}

	.hdc-col .hdc-collection-filters__show {
		flex: 1;
	}

	/* The bar over a list. */
	.hdc-col .hdc-collection-toolbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75rem 1rem;
		min-height: 3rem;
	}

	.hdc-col .hdc-collection-toolbar__controls {
		display: flex;
		flex: 1 1 100%;
		gap: 0.5rem;
	}

	.hdc-col .hdc-collection-toolbar__controls > * {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
	}

	.hdc-col .hdc-collection-toolbar__controls .hdc-collection-toolbar__sort select {
		width: 100%;
	}

	.hdc-col .hdc-collection-toolbar__count {
		flex: 1 1 100%;
		margin: 0;
		color: var(--ink);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.hdc-col .hdc-collection-toolbar__filters,
	.hdc-col .hdc-collection-finder__more {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 3rem;
		padding: 0.5rem 1rem;
		border: 1px solid var(--ink);
		background: var(--white);
		color: var(--ink);
		font-weight: 700;
		cursor: pointer;
	}

	.hdc-col .hdc-collection-toolbar__filters[hidden],
	.hdc-col .hdc-collection-finder__more[hidden],
	.hdc-col .hdc-collection-toolbar__sort[hidden] {
		display: none;
	}

	.hdc-col .hdc-collection-toolbar__filters .hdc-icon,
	.hdc-col .hdc-collection-finder__more .hdc-icon {
		width: 1.25rem;
		height: 1.25rem;
	}

	.hdc-col .hdc-collection-toolbar__sort {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.9375rem;
	}

	.hdc-col .hdc-collection-toolbar__sort-label {
		color: var(--steel);
	}

	@media (max-width: 47.99rem) {
		.hdc-col .hdc-collection-toolbar__sort-label {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip: rect(0 0 0 0);
			white-space: nowrap;
		}
	}

	.hdc-col .hdc-collection-toolbar__sort select {
		min-height: 3rem;
		padding: 0.5rem 2rem 0.5rem 0.75rem;
		border: 1px solid var(--control);
		border-radius: 0;
		background-color: var(--white);
		color: var(--ink);
		font: inherit;
		font-weight: 700;
	}

	/* Applied filters: plain underlined values, each removable, then Clear all. */
	.hdc-col .hdc-collection-toolbar__applied {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.25rem 1.25rem;
		flex-basis: 100%;
	}

	.hdc-col .hdc-collection-toolbar__applied[hidden] {
		display: none;
	}

	.hdc-col .hdc-collection-toolbar__values {
		display: contents;
	}

	.hdc-col .hdc-collection-toolbar__value {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		min-height: 2.75rem;
		padding: 0;
		border: 0;
		background: none;
		color: var(--ink);
		font: inherit;
		font-size: 0.9375rem;
		cursor: pointer;
	}

	.hdc-col .hdc-collection-toolbar__value::after {
		content: "";
		width: 1rem;
		height: 1rem;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.hdc-col .hdc-collection-toolbar__value:hover {
		text-decoration: underline;
	}

	.hdc-col .hdc-collection-empty {
		margin: 1rem 0;
		padding: 1.5rem;
		background: var(--c-ground);
		color: var(--ink);
		font-weight: 600;
	}

	.hdc-col .hdc-collection-empty[hidden] {
		display: none;
	}

	/* Model cards. */
	.hdc-col .hdc-collection-cards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hdc-col .hdc-collection-cards__item[hidden] {
		display: none;
	}

	.hdc-col .hdc-collection-card {
		display: flex;
		flex-direction: column;
		height: 100%;
		border: 1px solid var(--line);
		background: var(--white);
	}

	.hdc-col .hdc-collection-card:hover {
		border-color: var(--control);
	}

	.hdc-col .hdc-collection-card__photo {
		display: block;
		overflow: hidden;
		aspect-ratio: 1;
		padding: 0.75rem;
		border-bottom: 1px solid var(--line);
		background: var(--white);
	}

	/* A model without a photo yet: a quiet frame with an image mark, so the row keeps its line. */
	.hdc-col .hdc-collection-card__photo.is-empty,
	.hdc-col .hdc-collection-types__photo:has(> .hdc-collection-types__none) {
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--c-ground);
	}

	.hdc-col .hdc-collection-card__none,
	.hdc-col .hdc-collection-types__none {
		width: 2.5rem;
		height: 2.5rem;
		color: var(--control);
		stroke-width: 1.5;
	}

	.hdc-col .hdc-collection-card__img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.hdc-col .hdc-collection-card__body {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 0.625rem;
		padding: 0.875rem;
	}

	.hdc-col .hdc-collection-card__name {
		font-size: 1rem;
		font-stretch: 100%;
		font-weight: 700;
		line-height: 1.25;
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-col .hdc-collection-card__cap {
		display: flex;
		flex-direction: column;
		margin: 0;
	}

	.hdc-col .hdc-collection-card__cap-value {
		color: var(--ink);
		font-size: 1.75rem;
		font-stretch: 75%;
		font-weight: 800;
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}

	.hdc-col .hdc-collection-card__cap.is-unknown .hdc-collection-card__cap-value {
		color: var(--steel);
	}

	.hdc-col .hdc-collection-card__cap-label {
		color: var(--steel);
		font-size: 0.8125rem;
	}

	/* Specs a buyer reads at arm's length (owners, 2026-10-20: the old 12 and 14 px were too small). */
	.hdc-col .hdc-collection-card__specs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.625rem 0.75rem;
		margin: 0;
		padding-top: 0.75rem;
		border-top: 1px solid var(--line);
	}

	.hdc-col .hdc-collection-card__spec dt {
		color: var(--steel);
		font-size: 0.8125rem;
		line-height: 1.3;
	}

	.hdc-col .hdc-collection-card__spec dd {
		margin: 0;
		overflow: hidden;
		color: var(--ink);
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.3;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.hdc-col .is-unknown dd,
	.hdc-col td.is-unknown {
		color: var(--steel);
		font-weight: 400;
	}

	.hdc-col .hdc-collection-card__foot {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 0.75rem;
		margin: auto 0 0;
	}

	.hdc-col .hdc-collection-card__price {
		color: var(--ink);
		font-weight: 700;
	}

	.hdc-col .hdc-collection-card__quote {
		--link: var(--ink);
		--link-hover: var(--white);
		--link-line: none;
		--link-hover-line: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 2.75rem;
		padding: 0.375rem 0.75rem;
		border: 1px solid var(--ink);
		color: var(--ink);
		font-size: 0.9375rem;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
	}

	.hdc-col .hdc-collection-card__quote:hover {
		background: var(--ink);
		color: var(--white);
	}

	/* Cards: View product leads, the quote sits beside it. */
	.hdc-col .hdc-collection-card__actions {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
		gap: 0.5rem;
	}

	.hdc-col .hdc-collection-card__view {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 2.75rem;
		padding: 0.375rem 0.75rem;
		border: 1px solid var(--ink);
		background: var(--ink);
		color: var(--white);
		font-size: 0.9375rem;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		--link: var(--white);
		--link-hover: var(--white);
		--link-line: none;
		--link-hover-line: none;
	}

	.hdc-col .hdc-collection-card__view:hover {
		border-color: var(--graphite);
		background: var(--graphite);
	}

	/* Page links (core pagination) as square cells: the page in view in ink. */
	.hdc-col .hdc-collection-pages {
		margin-top: 1.25rem;
	}

	.hdc-col .hdc-collection-pages .nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.hdc-col .hdc-collection-pages .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 3rem;
		min-height: 3rem;
		padding: 0 1rem;
		border: 1px solid var(--line);
		border-radius: 2px;
		background: var(--white);
		color: var(--ink);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		text-decoration: none;
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: none;
	}

	.hdc-col .hdc-collection-pages a.page-numbers:hover {
		border-color: var(--ink);
	}

	.hdc-col .hdc-collection-pages .page-numbers.current {
		border-color: var(--ink);
		background: var(--ink);
		color: var(--white);
	}

	.hdc-col .hdc-collection-pages .page-numbers.dots {
		min-width: 0;
		padding: 0 0.25rem;
		border: 0;
		background: none;
	}

	/* Discontinued models. */
	.hdc-col .hdc-collection-gone {
		margin-top: 1.5rem;
		border-top: 1px solid var(--line);
		border-bottom: 1px solid var(--line);
	}

	.hdc-col .hdc-collection-gone__summary {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		min-height: 3.5rem;
		color: var(--ink);
		font-weight: 700;
		list-style: none;
		cursor: pointer;
	}

	.hdc-col .hdc-collection-gone__summary::-webkit-details-marker {
		display: none;
	}

	.hdc-col .hdc-collection-gone__count {
		color: var(--steel);
		font-weight: 400;
	}

	.hdc-col .hdc-collection-gone__icon {
		width: 1.25rem;
		height: 1.25rem;
		margin-left: auto;
		transition: transform 0.15s;
	}

	.hdc-col .hdc-collection-gone[open] .hdc-collection-gone__icon {
		transform: rotate(180deg);
	}

	.hdc-col .hdc-collection-gone__list {
		margin: 0 0 1rem;
		padding: 0;
		list-style: none;
	}

	.hdc-col .hdc-collection-gone__item {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 1rem;
		padding: 0.5rem 0;
	}

	.hdc-col .hdc-collection-gone__by {
		color: var(--steel);
	}

	/* Where it works. */
	.hdc-col .hdc-collection-uses {
		padding-block: var(--space-section);
		background: var(--c-ground);
	}

	.hdc-col .hdc-collection-uses__grid {
		display: grid;
		gap: 1.5rem;
	}

	.hdc-col .hdc-collection-uses__list {
		display: grid;
		gap: 0;
		margin: 0;
		padding: 0;
		border-top: 1px solid var(--c-rule);
		list-style: none;
	}

	.hdc-col .hdc-collection-uses__item {
		display: grid;
		grid-template-columns: 3rem minmax(0, 1fr);
		gap: 0.25rem 1rem;
		padding: 1.25rem 0;
		border-bottom: 1px solid var(--c-rule);
	}

	.hdc-col .hdc-collection-uses__icon {
		grid-row: 1 / span 2;
		width: 3rem;
		height: 3rem;
		padding: 0.625rem;
		border: 1px solid var(--c-rule);
		background: var(--white);
		color: var(--ink);
	}

	.hdc-col .hdc-collection-uses__title {
		color: var(--ink);
		font-size: 1.25rem;
		font-stretch: 85%;
		font-weight: 750;
	}

	.hdc-col .hdc-collection-uses__text {
		margin: 0;
		color: var(--body);
	}

	/* Buying guide. */
	.hdc-col .hdc-collection-guide {
		padding-block: var(--space-section);
		border-top: 1px solid var(--line);
	}

	.hdc-col .hdc-collection-guide__grid {
		display: grid;
		gap: 2rem;
	}

	.hdc-col .hdc-collection-guide__label {
		margin: 0 0 1rem;
		color: var(--ink);
		font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
		font-stretch: 75%;
		font-weight: 750;
		line-height: 1;
	}

	.hdc-col .hdc-collection-guide__toc ol {
		margin: 0;
		padding: 0;
		border-top: 1px solid var(--line);
		counter-reset: guide;
		list-style: none;
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-col .hdc-collection-guide__toc li {
		border-bottom: 1px solid var(--line);
		counter-increment: guide;
	}

	.hdc-col .hdc-collection-guide__toc a {
		display: grid;
		grid-template-columns: 2rem minmax(0, 1fr);
		align-items: center;
		min-height: 3rem;
		padding-block: 0.5rem;
		font-weight: 600;
	}

	.hdc-col .hdc-collection-guide__toc a::before {
		content: counter(guide, decimal-leading-zero);
		color: var(--steel);
		font-size: 0.8125rem;
		font-variant-numeric: tabular-nums;
	}

	.hdc-col .hdc-collection-guide__body {
		max-width: 46rem;
	}

	.hdc-col .hdc-collection-guide__lead {
		margin-bottom: 2rem;
		color: var(--ink);
		font-size: 1.1875rem;
		line-height: 1.55;
	}

	.hdc-col .hdc-collection-guide__part + .hdc-collection-guide__part {
		margin-top: 2.5rem;
		padding-top: 2.5rem;
		border-top: 1px solid var(--line);
	}

	.hdc-col .hdc-collection-guide__h2 {
		margin-bottom: 0.75rem;
		color: var(--ink);
		font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
		font-stretch: 80%;
		font-weight: 750;
		line-height: 1.1;
	}

	.hdc-col .hdc-collection-guide__text {
		font-size: 1.0625rem;
		line-height: 1.65;
	}

	.hdc-col .hdc-collection-guide__text p,
	.hdc-col .hdc-collection-guide__text ul,
	.hdc-col .hdc-collection-guide__text ol,
	.hdc-col .hdc-collection-guide__text table {
		margin: 0 0 1rem;
	}

	.hdc-col .hdc-collection-guide__text > :first-child {
		color: var(--ink);
		font-weight: 600;
	}

	.hdc-col .hdc-collection-guide__text h3 {
		margin: 1.5rem 0 0.5rem;
		color: var(--ink);
		font-size: 1.1875rem;
		font-weight: 700;
	}

	.hdc-col .hdc-collection-guide__text table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.9375rem;
		font-variant-numeric: tabular-nums;
	}

	.hdc-col .hdc-collection-guide__text th,
	.hdc-col .hdc-collection-guide__text td {
		padding: 0.625rem 0.75rem 0.625rem 0;
		border-bottom: 1px solid var(--line);
		text-align: left;
		vertical-align: top;
	}

	.hdc-col .hdc-collection-guide__text thead th {
		border-bottom-color: var(--ink);
		color: var(--ink);
	}

	/* Questions: Home B's, with HTML answers. */
	.hdc-col .hdc-collection-questions__a > :last-child {
		margin-bottom: 0;
	}

	/* Side by side matrix. */
	.hdc-col .hdc-collection-matrix {
		padding-block: var(--space-section);
	}

	.hdc-col .hdc-collection-matrix__head {
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		justify-content: space-between;
		gap: 1rem;
		margin-bottom: 1.5rem;
	}

	.hdc-col .hdc-collection-matrix__controls {
		display: flex;
		align-items: center;
		gap: 0.75rem;
	}

	.hdc-col .hdc-collection-matrix__controls[hidden] {
		display: none;
	}

	.hdc-col .hdc-collection-matrix__counter {
		min-width: 6.5rem;
		margin: 0;
		color: var(--steel);
		font-size: 0.9375rem;
		font-variant-numeric: tabular-nums;
		text-align: center;
	}

	.hdc-col .hdc-collection-matrix__frame {
		overflow-x: auto;
		border: 1px solid var(--line);
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 9rem;
	}

	.hdc-col .hdc-collection-matrix__frame:focus-visible {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}

	.hdc-col .hdc-collection-matrix__table {
		min-width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		font-size: 0.9375rem;
		font-variant-numeric: tabular-nums;
	}

	.hdc-col .hdc-collection-matrix__table th,
	.hdc-col .hdc-collection-matrix__table td {
		padding: 0.75rem;
		border-bottom: 1px solid var(--line);
		text-align: left;
		vertical-align: top;
	}

	.hdc-col .hdc-collection-matrix__table [hidden] {
		display: none;
	}

	.hdc-col .hdc-collection-matrix__corner,
	.hdc-col .hdc-collection-matrix__spec {
		position: sticky;
		left: 0;
		z-index: 1;
		width: 9rem;
		min-width: 9rem;
		border-right: 1px solid var(--line);
		background: var(--white);
	}

	.hdc-col .hdc-collection-matrix__spec {
		color: var(--steel);
		font-weight: 600;
	}

	.hdc-col .hdc-collection-matrix__model {
		min-width: 10rem;
		width: 10rem;
		scroll-snap-align: start;
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-col .hdc-collection-matrix__model a {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		font-weight: 700;
		line-height: 1.25;
	}

	.hdc-col .hdc-collection-matrix__img {
		width: 100%;
		height: 6rem;
		object-fit: contain;
	}

	.hdc-col .hdc-collection-matrix__cell {
		color: var(--ink);
	}

	/* Compare tray and sheet (spec sheet). */
	.hdc-col .hdc-collection-tray {
		position: fixed;
		inset: auto 0 0;
		z-index: 35;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 1rem;
		padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
		background: var(--ink);
		color: var(--white);
	}

	.hdc-col .hdc-collection-tray[hidden] {
		display: none;
	}

	.hdc-col .hdc-collection-tray__note {
		margin: 0;
		color: var(--mist);
	}

	.hdc-col .hdc-collection-tray__note[hidden] {
		display: none;
	}

	.hdc-col .hdc-collection-tray__list {
		display: flex;
		flex: 1 1 auto;
		flex-wrap: wrap;
		gap: 0.25rem 1.5rem;
		margin: 0;
		padding: 0;
		font-weight: 700;
		list-style: none;
	}

	.hdc-col .hdc-collection-tray__clear {
		min-height: 2.75rem;
		border: 0;
		background: none;
		color: var(--fog);
		text-decoration: underline;
		cursor: pointer;
	}

	.hdc-col .hdc-collection-tray__go {
		border-color: var(--white);
		background: var(--white);
		color: var(--ink);
	}

	.hdc-col .hdc-collection-tray__go:disabled {
		opacity: 0.5;
		cursor: default;
	}

	.hdc-col.has-tray {
		padding-bottom: 5rem;
	}

	.hdc-col .hdc-collection-compare {
		width: min(100% - 2rem, 60rem);
		max-height: 88dvh;
		padding: 0;
		border: 0;
		background: var(--white);
	}

	.hdc-col .hdc-collection-compare::backdrop {
		background: var(--c-shade);
	}

	.hdc-col .hdc-collection-compare__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.75rem 1rem;
		border-bottom: 1px solid var(--line);
	}

	.hdc-col .hdc-collection-compare__title {
		font-size: 1.75rem;
		font-stretch: 75%;
		font-weight: 750;
	}

	.hdc-col .hdc-collection-compare__body {
		overflow-x: auto;
		padding: 0 1rem 1rem;
	}

	.hdc-col .hdc-collection-compare__table {
		width: 100%;
		border-collapse: collapse;
		font-variant-numeric: tabular-nums;
	}

	.hdc-col .hdc-collection-compare__table th,
	.hdc-col .hdc-collection-compare__table td {
		padding: 0.75rem 0.75rem 0.75rem 0;
		border-bottom: 1px solid var(--line);
		text-align: left;
		vertical-align: top;
	}

	.hdc-col .hdc-collection-compare__table thead th {
		border-bottom: 2px solid var(--ink);
		color: var(--ink);
	}

	.hdc-col .hdc-collection-compare__table tbody th {
		color: var(--steel);
		font-weight: 600;
	}

	.hdc-col .hdc-collection-compare__table tbody td {
		color: var(--ink);
		font-weight: 700;
	}

	.hdc-col .hdc-collection-compare__table .is-same td {
		color: var(--steel);
		font-weight: 400;
	}

	@media (min-width: 40rem) {
		.hdc-col .hdc-collection-cards {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 1rem;
		}

		.hdc-col .hdc-collection-uses__list {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			column-gap: 2rem;
		}
	}

	@media (min-width: 48rem) {
		.hdc-col .hdc-collection-toolbar__count {
			flex: 0 1 auto;
			margin-right: auto;
		}

		.hdc-col .hdc-collection-toolbar__controls {
			flex: 0 1 auto;
			justify-content: flex-end;
		}

		.hdc-col .hdc-collection-toolbar__controls > * {
			flex: 0 0 auto;
		}

		.hdc-col .hdc-collection-toolbar__controls .hdc-collection-toolbar__sort select {
			width: auto;
		}
	}

	@media (min-width: 64rem) {
		.hdc-col .hdc-collection-types__list {
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 1rem;
		}

		.hdc-col .hdc-collection-types__name {
			font-size: 1.25rem;
		}

		.hdc-col .hdc-collection-cards {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}

		.hdc-col .hdc-collection-filters:not(.hdc-collection-filters--rail) {
			inset: 0 0 0 auto;
			width: 26rem;
			max-height: none;
			height: 100dvh;
		}

		.hdc-col .hdc-collection-uses__grid {
			grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
			gap: 4rem;
		}

		.hdc-col .hdc-collection-uses__list {
			border-top: 0;
		}

		.hdc-col .hdc-collection-uses__item:nth-child(-n+2) {
			border-top: 1px solid var(--c-rule);
		}

		.hdc-col .hdc-collection-guide__grid {
			grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
			gap: 4rem;
		}

		.hdc-col .hdc-collection-guide__side {
			align-self: start;
			position: sticky;
			top: calc(var(--sticky) + 1.5rem);
		}

		.hdc-col .hdc-collection-matrix__corner,
		.hdc-col .hdc-collection-matrix__spec {
			width: 12rem;
			min-width: 12rem;
		}

		.hdc-col .hdc-collection-matrix__frame {
			scroll-padding-left: 12rem;
		}

		.hdc-col .hdc-collection-tray {
			left: auto;
			right: var(--gutter);
			bottom: 1rem;
			width: min(44rem, 100% - 2 * var(--gutter));
		}
	}

	@media (max-width: 63.99rem) {
		/* Above the call bar on phones. */
		.hdc-col .hdc-collection-tray {
			bottom: var(--bar);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hdc-col .hdc-collection-types__img,
		.hdc-col .hdc-collection-types__arrow {
			transition: none;
		}
	}
}