@charset "utf-8";

/* CATALOG (Product Catalog and Add-On Catalog) */
.catalog {
	display: grid;
	gap: var(--margin-block);
	}
.catalog-intro {
	color: var(--color-dimmed);
	max-width: var(--width-text);
	}
.catalog-intro > :last-child {
	margin-bottom: 0;
	}

/* JUMP LINKS */
.catalog-jump {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
	}
.catalog-jump li {
	margin: 0;
	}
.catalog-jump a {
	border: 1px solid var(--background-border);
	border-radius: var(--radius);
	color: inherit;
	display: inline-block;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	padding: var(--space-5) var(--space-10);
	text-decoration: none;
	transition: border-color var(--animation-duration) var(--animation-easing), color var(--animation-duration) var(--animation-easing);
	}
.catalog-jump a:hover,
.catalog-jump a:focus-visible {
	border-color: var(--color-link);
	color: var(--color-link);
	}

/* GROUPS */
.catalog-group {
	display: grid;
	gap: var(--space-20);
	scroll-margin-top: var(--space-20);
	}
.catalog-group-head {
	align-items: baseline;
	border-bottom: 1px solid var(--background-divider);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5) var(--space-20);
	padding-bottom: var(--space-10);
	}
.catalog-group-title {
	font-size: var(--text-h4, var(--text-h5));
	margin: 0;
	}
.catalog-group-intro {
	color: var(--color-bright);
	flex: 1 1 16rem;
	font-size: var(--font-size-sm);
	margin: 0;
	}
.catalog-group-link {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semi);
	margin-left: auto;
	white-space: nowrap;
	}
.catalog-group-link i {
	color: var(--color-arrow);
	}

/* CARDS */
.catalog-card-price {
	font-size: var(--text-h5);
	line-height: var(--line-height-snug);
	margin: 0 0 var(--space-10);
	}
.catalog-card-price .term-page-price {
	color: var(--color-header);
	font-weight: var(--font-weight-bold);
	}
.catalog-card-price .term-page-quote {
	color: var(--color-bright);
	font-size: var(--font-size-sm);
	font-style: italic;
	}
.catalog-card-price .product-pricing-from {
	color: var(--color-bright);
	font-size: 0.75rem;
	}
.catalog-card-best,
.catalog-card-fits {
	color: var(--color-bright);
	font-size: var(--font-size-sm);
	margin: 0 0 var(--space-10);
	}
.catalog-card-best {
	color: var(--color-header);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	}