/*
 * HS Compare.
 *
 * Built on the theme's --hs-* tokens (navy, accent, borders, radii, the
 * Franklin Gothic heading face) with fallbacks, so it reads as part of the
 * site on Recreational and Defense alike.
 *
 *   1. Tokens
 *   2. Compare toggle (product cards, product page)
 *   3. Tray
 *   4. Buttons, badges, icons
 *   5. Comparison page
 *   6. Compare sizes (family pages)
 *   7. Theme fixes
 *   8. Print
 */

/* 1. Tokens ---------------------------------------------------------------- */

.hs-cmp,
.hs-cmp-tray,
.hs-cmp-sizes,
.hs-cmp-toggle {
	--cmp-navy: var(--hs-navy, #00254d);
	--cmp-accent: var(--hs-accent, #007cba);
	--cmp-text: var(--hs-text, #1c2430);
	--cmp-muted: var(--hs-muted, #5b6675);
	--cmp-surface: var(--hs-surface, #fff);
	--cmp-soft: var(--hs-surface-soft, #f4f6f9);
	--cmp-tint: #eef4fa;
	--cmp-diff: #fff6e0;
	--cmp-line-color: #dfe4ea;
	--cmp-line: 1px solid var(--cmp-line-color);
	--cmp-radius: var(--hs-radius-md, 10px);
	--cmp-head: var(--hs-font-head, inherit);
	--cmp-body: var(--hs-font-body, inherit);
	--cmp-ease: var(--hs-ease, cubic-bezier(.2, .7, .2, 1));
	--cmp-fast: var(--hs-fast, .15s);
}

/* 2. Compare toggle -------------------------------------------------------- */

.hs-cmp-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin: 0;
	border: 1.5px solid var(--cmp-line-color);
	background: var(--cmp-surface);
	color: var(--cmp-navy);
	font-family: var(--cmp-body);
	cursor: pointer;
	transition: background var(--cmp-fast) var(--cmp-ease), border-color var(--cmp-fast) var(--cmp-ease), color var(--cmp-fast) var(--cmp-ease), transform var(--cmp-fast) var(--cmp-ease);
}

.hs-cmp-toggle__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.hs-cmp-toggle .hs-cmp-icon {
	display: block;
	flex: none;
	width: 18px;
	height: 18px;
}

.hs-cmp-toggle__icon--on {
	display: none;
}

.hs-cmp-toggle.is-on .hs-cmp-toggle__icon--on {
	display: flex;
}

.hs-cmp-toggle.is-on .hs-cmp-toggle__icon--off {
	display: none;
}

.hs-cmp-toggle:hover {
	border-color: var(--cmp-navy);
}

.hs-cmp-toggle.is-on {
	background: var(--cmp-navy);
	border-color: var(--cmp-navy);
	color: #fff;
}

.hs-cmp-toggle:focus-visible {
	outline: 3px solid var(--cmp-accent);
	outline-offset: 2px;
}

.hs-cmp-toggle:active {
	transform: scale(.94);
}

/* Card: a round icon button on the "View Details" row, right-aligned. It
   stays in the card's column flow and is pulled up by exactly its own height
   (the theme's small-control height, which the CTA uses too), so it lines up
   with the CTA whatever padding each site's card has. */
.hs-pcard .hs-cmp-toggle--card {
	--cmp-btn: var(--hs-control-h-sm, 2.75rem);
	position: relative !important;
	/* Some themes set buttons to display:block, which drops the centring. */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 0 !important;
	align-self: flex-end;
	flex: none;
	width: var(--cmp-btn) !important;
	height: var(--cmp-btn) !important;
	min-width: 0 !important;
	/* Its own height plus the gap the card body puts between items. */
	margin: calc(-1 * var(--cmp-btn) - var(--hs-space-2, .5rem)) 0 0 !important;
	padding: 0 !important;
	border: 1.5px solid var(--cmp-line-color) !important;
	border-radius: 50% !important;
	background: var(--cmp-surface) !important;
	color: var(--cmp-navy) !important;
	box-shadow: none !important;
}

.hs-pcard .hs-cmp-toggle--card:hover {
	border-color: var(--cmp-navy) !important;
}

.hs-pcard .hs-cmp-toggle--card.is-on {
	background: var(--cmp-navy) !important;
	border-color: var(--cmp-navy) !important;
	color: #fff !important;
}

.hs-cmp-toggle--card .hs-cmp-toggle__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Tooltip: on hover and on keyboard focus, never on touch-only devices. */
.hs-cmp-toggle--card::after,
.hs-cmp-toggle--card::before {
	position: absolute;
	right: 50%;
	pointer-events: none;
	opacity: 0;
	transform: translate(50%, 4px);
	transition: opacity var(--cmp-fast) var(--cmp-ease), transform var(--cmp-fast) var(--cmp-ease);
}

.hs-cmp-toggle--card::after {
	content: attr(data-tip);
	bottom: calc(100% + 10px);
	z-index: 5;
	width: max-content;
	max-width: 13rem;
	padding: .45rem .7rem;
	border-radius: 6px;
	background: var(--cmp-navy);
	color: #fff;
	font-family: var(--cmp-body);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
	box-shadow: 0 6px 18px rgba(0, 37, 77, .2);
}

.hs-cmp-toggle--card::before {
	content: "";
	bottom: calc(100% + 4px);
	z-index: 6;
	border: 6px solid transparent;
	border-top-color: var(--cmp-navy);
	border-bottom: 0;
}

/* Right-aligned button: keep the bubble inside the card. */
.hs-cmp-toggle--card::after {
	right: -.25rem;
	transform: translate(0, 4px);
}

.hs-cmp-toggle--card::before {
	right: calc(var(--cmp-btn, 2.75rem) / 2 - 6px);
	transform: translate(0, 4px);
}

@media (hover: hover) {
	.hs-cmp-toggle--card:hover::after,
	.hs-cmp-toggle--card:hover::before {
		opacity: 1;
		transform: translate(0, 0);
	}
}

.hs-cmp-toggle--card:focus-visible::after,
.hs-cmp-toggle--card:focus-visible::before {
	opacity: 1;
	transform: translate(0, 0);
}

/* Product page: a labelled pill beside the cart / quote button. */
.hs-cmp-pagebtn {
	margin-top: .75rem;
}

.hs-cmp-toggle--page {
	height: var(--hs-control-h-sm, 2.5rem);
	padding: 0 1.1rem 0 .9rem;
	border-radius: 999px;
	font-size: .9375rem;
	font-weight: 600;
}

/* Product page, in the theme's Print / Download PDF row: the theme's ghost
   button look (hs-btn hs-btn--ghost), restored over the toggle's own base
   rules, which load later. */
.hs-pdp-actions .hs-cmp-toggle--inline,
.right-buttons .hs-cmp-toggle--inline {
	gap: var(--hs-space-2, .5rem);
	height: var(--hs-control-h-sm, 2.75rem);
	padding: 0 var(--hs-space-5, 1.25rem);
	border: var(--hs-border, 1px solid);
	border-color: var(--hs-line, var(--cmp-line-color));
	border-radius: var(--hs-radius-pill, 999px);
	background: var(--hs-surface, #fff);
	color: var(--hs-navy, var(--cmp-navy));
	font-family: var(--hs-font-head, inherit);
	font-size: var(--hs-text-md, 1rem);
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}

.hs-pdp-actions .hs-cmp-toggle--inline:hover,
.right-buttons .hs-cmp-toggle--inline:hover {
	color: var(--hs-accent, var(--cmp-accent));
	background: var(--hs-surface-soft, var(--cmp-soft));
	border-color: color-mix(in srgb, var(--hs-accent, #007cba) 50%, transparent);
}

.hs-pdp-actions .hs-cmp-toggle--inline.is-on,
.right-buttons .hs-cmp-toggle--inline.is-on {
	color: #fff;
	background: var(--hs-navy, var(--cmp-navy));
	border-color: var(--hs-navy, var(--cmp-navy));
}

.hs-cmp-toggle--inline .hs-cmp-icon {
	width: 20px;
	height: 20px;
	stroke-width: 1.8;
	opacity: .75;
}

.hs-cmp-toggle--inline.is-on .hs-cmp-icon {
	opacity: 1;
}

/* The theme greys every span in the product column (.product_det span). */
.hs-cmp-toggle--inline .hs-cmp-toggle__label,
.hs-cmp-toggle--inline .hs-cmp-toggle__icon {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: inherit;
}

.hs-cmp-toggle--inline .hs-cmp-toggle__label {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
}

/* Tablet and phone: the theme stretches Print and Download to share the
   row. Compare keeps its own width, so when it wraps it sits on the left,
   in line with the title and price above. */
@media (max-width: 991.98px) {
	/* Outranks the theme's body.hs-pdp .right-buttons .hs-btn. */
	body .right-buttons.hs-pdp-actions .hs-btn.hs-cmp-toggle--inline,
	body.hs-pdp .right-buttons .hs-btn.hs-cmp-toggle--inline {
		flex: 0 0 auto;
	}
}

/* 3. Tray ------------------------------------------------------------------ */

.hs-cmp-tray {
	position: fixed;
	left: 50%;
	bottom: 1rem;
	z-index: 1040;
	transform: translateX(-50%);
	width: min(980px, calc(100% - 2rem));
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	padding: .75rem .75rem .75rem 1rem;
	background: var(--cmp-surface);
	border: var(--cmp-line);
	border-radius: 14px;
	box-shadow: 0 14px 40px rgba(0, 37, 77, .18);
	font-family: var(--cmp-body);
	animation: hs-cmp-rise .2s var(--cmp-ease);
}

@keyframes hs-cmp-rise {
	from { opacity: 0; transform: translate(-50%, 12px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

.hs-cmp-tray[hidden] {
	display: none;
}

.hs-cmp-tray__items {
	display: flex;
	flex: 1 1 auto;
	gap: .5rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
}

.hs-cmp-tray__item {
	display: flex;
	align-items: center;
	gap: .5rem;
	max-width: 14rem;
	padding: .3rem .3rem .3rem .4rem;
	background: var(--cmp-soft);
	border-radius: 8px;
	font-size: .8125rem;
	color: var(--cmp-text);
}

.hs-cmp-tray__item img {
	width: 34px;
	height: 34px;
	object-fit: contain;
	border-radius: 4px;
	background: #fff;
	mix-blend-mode: multiply;
}

.hs-cmp-tray__item span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hs-cmp-tray__remove {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border: 0;
	border-radius: 50%;
	background: none;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--cmp-muted);
	cursor: pointer;
}

.hs-cmp-tray__remove:hover,
.hs-cmp-tray__remove:focus-visible {
	background: rgba(0, 37, 77, .08);
	color: var(--cmp-navy);
}

.hs-cmp-tray__actions {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex: none;
}

.hs-cmp-tray .hs-cmp-tray__go {
	display: inline-flex;
	align-items: center;
	height: 2.5rem;
	padding: 0 1.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--cmp-navy) !important;
	color: #fff !important;
	font-family: var(--cmp-head);
	font-size: 1rem;
	text-decoration: none;
	white-space: nowrap;
}

.hs-cmp-tray .hs-cmp-tray__go:hover {
	background: var(--cmp-accent) !important;
}

.hs-cmp-tray__go[aria-disabled="true"] {
	opacity: .45;
	pointer-events: none;
}

.hs-cmp-tray__clear {
	border: 0;
	background: none;
	font-size: .875rem;
	color: var(--cmp-muted);
	text-decoration: underline;
	cursor: pointer;
}

.hs-cmp-tray__notice {
	flex-basis: 100%;
	margin: 0;
	font-size: .8125rem;
	color: var(--cmp-navy);
}

.hs-cmp-tray__notice:empty {
	display: none;
}

@media (max-width: 575.98px) {
	.hs-cmp-tray {
		bottom: 0;
		width: 100%;
		border-radius: 14px 14px 0 0;
	}

	.hs-cmp-tray__item span {
		display: none;
	}

	.hs-cmp-tray__actions {
		width: 100%;
		justify-content: space-between;
	}
}

/* 4. Buttons, badges, icons ----------------------------------------------- */

.hs-cmp-icon {
	flex: none;
}

.hs-cmp .hs-cmp-btn,
.hs-cmp-empty .hs-cmp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 2.5rem;
	padding: .45rem 1.1rem;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-family: var(--cmp-body);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--cmp-fast) var(--cmp-ease), color var(--cmp-fast) var(--cmp-ease), border-color var(--cmp-fast) var(--cmp-ease);
}

.hs-cmp .hs-cmp-btn--primary,
.hs-cmp-empty .hs-cmp-btn--primary {
	background: var(--cmp-navy);
	border-color: var(--cmp-navy);
	color: #fff;
}

.hs-cmp .hs-cmp-btn--primary:hover,
.hs-cmp-empty .hs-cmp-btn--primary:hover {
	background: var(--cmp-accent);
	border-color: var(--cmp-accent);
	color: #fff;
}

.hs-cmp .hs-cmp-btn--outline {
	background: #fff;
	border-color: var(--cmp-navy);
	color: var(--cmp-navy);
}

.hs-cmp .hs-cmp-btn--outline:hover {
	background: var(--cmp-navy);
	color: #fff;
}

.hs-cmp .hs-cmp-btn--outline:disabled {
	background: var(--cmp-tint);
	border-color: var(--cmp-tint);
	color: var(--cmp-navy);
	cursor: default;
}

.hs-cmp .hs-cmp-btn--ghost {
	min-height: 2.25rem;
	padding: .35rem .8rem;
	background: none;
	color: var(--cmp-navy);
	font-weight: 500;
}

.hs-cmp .hs-cmp-btn--ghost:hover,
.hs-cmp .hs-cmp-btn--ghost.is-done {
	background: var(--cmp-tint);
}

.hs-cmp .hs-cmp-btn:focus-visible,
.hs-cmp-seg__btn:focus-visible,
.hs-cmp a:focus-visible,
.hs-cmp-card__remove:focus-visible {
	outline: 3px solid var(--cmp-accent);
	outline-offset: 2px;
}

/* WooCommerce adds a tick link after an AJAX add to cart; keep it tidy. */
.hs-cmp .added_to_cart {
	display: block;
	margin-top: .4rem;
	font-size: .8125rem;
	color: var(--cmp-accent);
}

.hs-cmp-badge {
	display: inline-block;
	padding: .2rem .6rem;
	border-radius: 999px;
	background: var(--cmp-tint);
	color: var(--cmp-navy);
	font-size: .8125rem;
	font-weight: 600;
	white-space: nowrap;
}

/* 5. Comparison page ------------------------------------------------------- */

.hs-cmp {
	max-width: 1320px;
	margin: 1.5rem auto 4rem;
	padding: 0 1rem;
	font-family: var(--cmp-body);
	color: var(--cmp-text);
	--hs-cmp-label-w: 10.5rem;
	--hs-cmp-col-w: 13.5rem;
}

.hs-cmp__heading {
	margin: 0 0 1rem;
	font-family: var(--cmp-head);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--cmp-navy);
}

/* Summary and controls */
.hs-cmp__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: 1.25rem;
}

.hs-cmp__back {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	margin-bottom: .35rem;
	font-size: .875rem;
	font-weight: 500;
	color: var(--cmp-accent);
	text-decoration: none;
}

.hs-cmp__back:hover {
	text-decoration: underline;
}

.hs-cmp__back .hs-cmp-icon {
	width: 16px;
	height: 16px;
	margin-left: -4px;
}

.hs-cmp__count {
	margin: 0;
	font-size: 1.0625rem;
	color: var(--cmp-muted);
}

.hs-cmp__count strong {
	color: var(--cmp-navy);
	font-weight: 700;
}

.hs-cmp__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}

.hs-cmp-seg {
	display: inline-flex;
	padding: 3px;
	border-radius: 999px;
	background: var(--cmp-soft);
	border: var(--cmp-line);
}

.hs-cmp-seg__btn {
	padding: .4rem .95rem;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--cmp-muted);
	font-family: var(--cmp-body);
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--cmp-fast) var(--cmp-ease), color var(--cmp-fast) var(--cmp-ease);
}

.hs-cmp-seg__btn[aria-pressed="true"] {
	background: var(--cmp-navy);
	color: #fff;
	box-shadow: 0 1px 3px rgba(0, 37, 77, .25);
}

.hs-cmp-seg__btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.hs-cmp__swipe {
	display: none;
	margin: 0 0 .5rem;
	font-size: .8125rem;
	color: var(--cmp-muted);
}

.hs-cmp__swipe::after {
	content: " →";
}

.hs-cmp.has-overflow .hs-cmp__swipe {
	display: block;
}

/* The table */
.hs-cmp__scroll {
	overflow-x: auto;
	border: var(--cmp-line);
	border-radius: 14px;
	background: var(--cmp-surface);
	box-shadow: 0 2px 10px rgba(0, 37, 77, .05);
	-webkit-overflow-scrolling: touch;
}

.hs-cmp__scroll:focus-visible {
	outline: 3px solid var(--cmp-accent);
	outline-offset: 2px;
}

.hs-cmp__table {
	width: 100%;
	min-width: calc(var(--hs-cmp-label-w) + var(--hs-cmp-cols, 4) * var(--hs-cmp-col-w));
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	background: none;
	font-size: .9375rem;
	font-variant-numeric: tabular-nums;
}

.hs-cmp__table th,
.hs-cmp__table td {
	padding: .7rem 1rem;
	border: 0;
	border-bottom: var(--cmp-line);
	background: transparent;
	text-align: left;
	vertical-align: top;
	color: inherit;
}

.hs-cmp__table col,
.hs-cmp__corner {
	width: var(--hs-cmp-label-w);
}

/* Label column stays put while products scroll sideways. */
.hs-cmp__corner,
.hs-cmp__table tbody th,
.hs-cmp__foot .hs-cmp__corner {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--cmp-soft) !important;
}

/* Product header: picture row, then the name/price strip. */
.hs-cmp__media-row td {
	padding: 1rem 1rem .25rem;
	border-bottom: 0;
	background: var(--cmp-surface);
}

.hs-cmp__media-row .hs-cmp__corner {
	border-bottom: 0;
}

.hs-cmp-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 11rem;
	padding: .75rem;
	border-radius: 10px;
	background: var(--cmp-soft);
}

.hs-cmp-card__media a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.hs-cmp-card__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.hs-cmp-card__remove {
	position: absolute;
	top: .5rem;
	right: .5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: var(--cmp-line);
	border-radius: 50%;
	background: #fff;
	color: var(--cmp-muted);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 37, 77, .1);
	transition: color var(--cmp-fast) var(--cmp-ease), border-color var(--cmp-fast) var(--cmp-ease);
}

.hs-cmp-card__remove:hover {
	color: #b42318;
	border-color: #b42318;
}

.hs-cmp-card__remove .hs-cmp-icon {
	width: 16px;
	height: 16px;
}

.hs-cmp__head-row th {
	padding-top: .75rem;
	padding-bottom: 1rem;
	background: var(--cmp-surface);
	font-weight: 400;
	border-bottom: 2px solid var(--cmp-navy);
}

.hs-cmp__head-row .hs-cmp__corner {
	z-index: 4;
	vertical-align: bottom;
	font-family: var(--cmp-head);
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cmp-muted);
}

.hs-cmp__product {
	font-weight: 400;
}

.hs-cmp-card__eyebrow {
	display: block;
	min-height: 1.1em;
	margin-bottom: .2rem;
	font-family: var(--cmp-head);
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cmp-muted);
}

.hs-cmp-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
	font-family: var(--cmp-head);
	font-size: 1.125rem;
	line-height: 1.25;
	color: var(--cmp-navy);
	text-decoration: none;
}

.hs-cmp-card__title:hover {
	color: var(--cmp-accent);
}

.hs-cmp-card__price {
	display: block;
	margin-top: .45rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--cmp-text);
}

.hs-cmp-card__price .woocommerce-Price-amount {
	white-space: nowrap;
}

.hs-cmp-card__choose {
	display: block;
	margin-top: .2rem;
	font-size: .8125rem;
	color: var(--cmp-muted);
}

.hs-cmp-card__action {
	display: block;
	margin-top: .75rem;
}

.hs-cmp-card__action .hs-cmp-btn,
.hs-cmp__foot .hs-cmp-btn {
	width: 100%;
}

/* "Add another" slot */
.hs-cmp__slot {
	vertical-align: top;
	background: var(--cmp-surface);
	border-bottom: 2px solid var(--cmp-navy) !important;
	padding-bottom: 1rem !important;
}

/* Corner legend: explains the highlight on rows that differ. */
.hs-cmp-legend {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--cmp-body);
	font-size: .8125rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cmp-muted);
}

.hs-cmp-legend__swatch {
	flex: none;
	width: 14px;
	height: 14px;
	border-left: 3px solid #e8a400;
	border-radius: 2px;
	background: var(--cmp-diff);
}

.hs-cmp-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	height: 100%;
	min-height: 15rem;
	padding: 1rem;
	border: 2px dashed var(--cmp-line-color);
	border-radius: 10px;
	color: var(--cmp-muted);
	text-align: center;
	text-decoration: none;
	transition: border-color var(--cmp-fast) var(--cmp-ease), color var(--cmp-fast) var(--cmp-ease), background var(--cmp-fast) var(--cmp-ease);
}

.hs-cmp-slot:hover {
	border-color: var(--cmp-accent);
	background: var(--cmp-tint);
	color: var(--cmp-navy);
}

.hs-cmp-slot__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--cmp-soft);
	color: var(--cmp-navy);
}

.hs-cmp-slot__text {
	font-weight: 600;
	color: var(--cmp-navy);
}

.hs-cmp-slot__hint {
	font-size: .8125rem;
}

.hs-cmp__slot-cell {
	background: var(--cmp-surface);
}

/* Group heading */
.hs-cmp__group th {
	position: static !important;
	padding: 1.1rem 1rem .5rem;
	background: var(--cmp-surface) !important;
	font-family: var(--cmp-head);
	font-size: 1rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cmp-navy);
}

/* Specification rows */
.hs-cmp__row th {
	font-weight: 500;
	color: var(--cmp-navy);
	box-shadow: inset 3px 0 0 transparent;
}

.hs-cmp__row td {
	color: var(--cmp-text);
}

.hs-cmp__row:hover td,
.hs-cmp__row:hover th {
	background: var(--cmp-tint) !important;
}

/* A row that differs: marked in the label column and given full weight. */
.hs-cmp__row.is-diff th {
	box-shadow: inset 3px 0 0 #e8a400;
	font-weight: 600;
}

.hs-cmp__row.is-diff td {
	background: var(--cmp-diff);
	font-weight: 500;
}

/* A row that is the same for every product: quieter. */
.hs-cmp__row.is-same td {
	color: var(--cmp-muted);
}

.hs-cmp__table td.is-empty {
	color: #a3acb8;
}

.hs-cmp.is-diff-only .hs-cmp__row.is-same {
	display: none;
}

.hs-cmp__none {
	padding: 2rem 1rem !important;
	text-align: center !important;
	color: var(--cmp-muted);
}

/* Bottom buy row */
.hs-cmp__foot td {
	padding-top: 1rem;
	padding-bottom: 1.1rem;
	border-bottom: 0;
	background: var(--cmp-surface);
}

.hs-cmp__note {
	margin: .9rem 0 0;
	font-size: .8125rem;
	color: var(--cmp-muted);
}

/* Floating name strip (see floatHeader() in the script): the theme clips
   overflow on its content wrapper, so position: sticky cannot be used. */
.hs-cmp-float {
	position: fixed;
	z-index: 1030;
	overflow: hidden;
	border: var(--cmp-line);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 8px 20px rgba(0, 37, 77, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--cmp-fast) var(--cmp-ease), transform var(--cmp-fast) var(--cmp-ease), visibility 0s linear var(--cmp-fast);
	pointer-events: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.hs-cmp-float.is-shown {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.hs-cmp-float {
	border-bottom: 2px solid var(--cmp-navy);
}

.hs-cmp-float__track {
	display: flex;
	will-change: transform;
}

.hs-cmp-float__cell {
	flex: none;
	min-width: 0;
	padding: .55rem 1rem;
}

.hs-cmp-float__cell--corner {
	position: relative;
	z-index: 1;
	background: var(--cmp-soft);
}

.hs-cmp-float__title {
	display: block;
	overflow: hidden;
	font-family: var(--cmp-head);
	font-size: .9375rem;
	line-height: 1.25;
	color: var(--cmp-navy);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hs-cmp-float__price {
	display: block;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--cmp-muted);
}

@media (max-width: 767.98px) {
	.hs-cmp-float__cell {
		padding: .45rem .65rem;
	}

	.hs-cmp-float__title {
		font-size: .8125rem;
	}
}

@media print {
	.hs-cmp-float {
		display: none !important;
	}
}

/* Phones: two products in view, compact header. */
@media (max-width: 767.98px) {
	.hs-cmp {
		--hs-cmp-label-w: 6.75rem;
		--hs-cmp-col-w: 10.5rem;
		margin-top: 1rem;
	}

	.hs-cmp__bar {
		align-items: flex-start;
	}

	.hs-cmp__controls {
		width: 100%;
	}

	.hs-cmp-seg {
		flex: 1 1 100%;
	}

	.hs-cmp-seg__btn {
		flex: 1;
	}

	.hs-cmp__table {
		font-size: .875rem;
	}

	.hs-cmp__table th,
	.hs-cmp__table td {
		padding: .6rem .65rem;
	}

	.hs-cmp-card__media {
		height: 7.5rem;
		padding: .5rem;
	}

	.hs-cmp-card__title {
		font-size: 1rem;
	}

	.hs-cmp .hs-cmp-btn {
		min-height: 2.25rem;
		padding: .4rem .6rem;
		font-size: .8125rem;
		white-space: normal;
	}

	.hs-cmp-slot {
		min-height: 11rem;
	}
}

/* Empty state */
.hs-cmp-empty {
	max-width: 32rem;
	margin: 2rem auto;
	padding: 2.5rem 2rem;
	border: var(--cmp-line);
	border-radius: 14px;
	background: var(--cmp-soft);
	text-align: center;
}

.hs-cmp-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: #fff;
	color: var(--cmp-navy);
	box-shadow: 0 2px 8px rgba(0, 37, 77, .08);
}

.hs-cmp-empty__icon .hs-cmp-icon {
	width: 26px;
	height: 26px;
}

.hs-cmp-empty__title {
	margin: 0 0 .5rem;
	font-family: var(--cmp-head);
	color: var(--cmp-navy);
}

.hs-cmp-empty__text {
	margin: 0 0 1.5rem;
	color: var(--cmp-muted);
}

/* 6. Compare sizes --------------------------------------------------------- */

.hs-cmp-sizes__title {
	margin-bottom: .75rem;
	font-family: var(--cmp-head);
	color: var(--cmp-navy);
}

.hs-cmp-sizes .hs-cmp__scroll {
	max-height: 32rem;
	overflow: auto;
}

.hs-cmp-sizes__table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: .9375rem;
	font-variant-numeric: tabular-nums;
	background: var(--cmp-surface);
}

.hs-cmp-sizes__table th,
.hs-cmp-sizes__table td {
	padding: .6rem .9rem;
	border: 0;
	border-bottom: var(--cmp-line);
	vertical-align: middle;
	text-align: left;
	white-space: nowrap;
}

.hs-cmp-sizes__table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--cmp-soft);
	font-weight: 600;
	color: var(--cmp-navy);
}

.hs-cmp-sizes__table thead th:first-child,
.hs-cmp-sizes__table tbody th:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--cmp-soft);
}

.hs-cmp-sizes__table thead th:first-child {
	z-index: 3;
}

.hs-cmp-sizes__table tbody th {
	font-weight: 600;
	color: var(--cmp-navy);
}

.hs-cmp-sizes__table tbody tr:hover td,
.hs-cmp-sizes__table tbody tr:hover th {
	background: var(--cmp-tint);
}

.hs-cmp-sizes__table tbody tr.is-selected td,
.hs-cmp-sizes__table tbody tr.is-selected th {
	background: var(--cmp-diff);
}

.hs-cmp-sizes__table tbody tr.is-selected th:first-child {
	box-shadow: inset 3px 0 0 var(--cmp-navy);
}

.hs-cmp-sizes__select {
	padding: .3rem .9rem;
	border: 1.5px solid var(--cmp-navy);
	border-radius: 999px;
	background: #fff;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--cmp-navy);
	cursor: pointer;
}

.hs-cmp-sizes__select:hover,
.hs-cmp-sizes__select:focus-visible,
.hs-cmp-sizes__table tr.is-selected .hs-cmp-sizes__select {
	background: var(--cmp-navy);
	color: #fff;
}

/* 7. Theme fixes ------------------------------------------------------------ */

/* The theme does not define WordPress's screen-reader-text. */
.hs-cmp .screen-reader-text,
.hs-cmp-sizes .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Defense's page template prints the title in white, for a header image the
   comparison page does not have. */
body:has(.hs-cmp) .entry-header .entry-title {
	color: var(--hs-navy, #00254d);
}

/* 8. Print ----------------------------------------------------------------- */

@media print {
	.hs-cmp-tray,
	.hs-cmp__controls,
	.hs-cmp__back,
	.hs-cmp__swipe,
	.hs-cmp-card__remove,
	.hs-cmp-card__action,
	.hs-cmp__foot,
	.hs-cmp__slot,
	.hs-cmp__slot-cell,
	.hs-cmp-sizes__select {
		display: none !important;
	}

	.hs-cmp__scroll {
		overflow: visible;
		border: 0;
		box-shadow: none;
	}

	.hs-cmp__head-row th {
		position: static;
	}
}