/* Comparisons hub, /vs/ - archive-svt_vs.php. Rebuilt 2026-09-16.
   Rides on the directory chrome in style.css (body.svt-directory). The cards
   are svt-vs-cards.css. Colours are tokens, with the same fallbacks style.css
   uses. Controls take the 8px radius of the versus page's tabs. */

/* The breadcrumb is Woo's markup, and its spacing comes from a stylesheet
   Woo prints on shop pages only - so here it ran "Home>Comparisons" with no
   gaps. These are the values the brand and category pages render with. */
body.svt-vs-hub nav.woocommerce-breadcrumb {
	font-size: 14px;
	line-height: 18px;
	margin: 5px 0 14px;
}
body.svt-vs-hub .woocommerce-breadcrumb span.delimiter {
	margin: 0 12px;
}
body.svt-vs-hub .woocommerce-breadcrumb span.delimiter i {
	font-size: 14px;
}

body.svt-vs-hub .svt-vs-hub__lede {
	max-width: 680px;
	margin: 4px 0 32px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--svt-slate, #79746A);
}

/* Section links. Printed only once there is more than one section. */
body.svt-vs-hub .svt-vs-hub__sections {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: -12px 0 32px;
}
body.svt-vs-hub .svt-vs-hub__sections a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--svt-hairline, #E5E1D8);
	border-radius: 8px;
	background: var(--svt-card, #fff);
	font-size: 14px;
	font-weight: 600;
	color: var(--svt-ink, #26231E);
	text-decoration: none;
}
body.svt-vs-hub .svt-vs-hub__sections a span {
	font-weight: 500;
	color: var(--svt-slate, #79746A);
}
body.svt-vs-hub .svt-vs-hub__sections a:hover,
body.svt-vs-hub .svt-vs-hub__sections a:focus-visible {
	border-color: var(--svt-click, #4974C4);
}

body.svt-vs-hub .svt-vs-hub__section {
	margin: 0 0 56px;
}
body.svt-vs-hub .svt-vs-hub__h2 {
	margin: 0 0 6px;
	font-size: 26px;
	line-height: 1.2;
	color: var(--svt-ink, #26231E);
}
body.svt-vs-hub .svt-vs-hub__sub {
	margin: 0 0 28px;
	font-size: 14.5px;
	color: var(--svt-slate, #79746A);
}

/* Jump index: every top-level category, alphabetical, in columns. Printed
   from two groups up; past twelve it carries a find box that filters the
   index and the groups together. */
body.svt-vs-hub .svt-vs-hub__index {
	margin: 0 0 24px;
	padding: 16px 20px 18px;
	border: 1px solid var(--svt-hairline, #E5E1D8);
	border-radius: 12px;
	background: var(--svt-card, #fff);
}
body.svt-vs-hub .svt-vs-hub__indexhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin: 0 0 12px;
}
body.svt-vs-hub .svt-vs-hub__indextitle {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--svt-slate, #79746A);
}
body.svt-vs-hub .svt-vs-hub__find {
	width: 260px;
	max-width: 100%;
	margin: 0;
	padding: 7px 12px;
	border: 1px solid #D6D1C7;
	border-radius: 8px;
	background: var(--svt-page, #F2EEE6);
	font-size: 14px;
	color: var(--svt-ink, #26231E);
}
body.svt-vs-hub .svt-vs-hub__group[hidden] {
	display: none;
}
body.svt-vs-hub .svt-vs-hub__indexlist {
	margin: 0;
	padding: 0;
	list-style: none;
	column-width: 200px;
	column-gap: 24px;
}
body.svt-vs-hub .svt-vs-hub__indexlist li {
	margin: 0;
	padding: 0;
	break-inside: avoid;
}
body.svt-vs-hub .svt-vs-hub__indexlist li[hidden] {
	display: none;
}
body.svt-vs-hub .svt-vs-hub__indexlist a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--svt-hairline, #E5E1D8);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--svt-click, #4974C4);
	text-decoration: none;
}
body.svt-vs-hub .svt-vs-hub__indexlist a span {
	font-weight: 500;
	color: var(--svt-slate, #79746A);
	font-variant-numeric: tabular-nums;
}
body.svt-vs-hub .svt-vs-hub__indexlist a:hover,
body.svt-vs-hub .svt-vs-hub__indexlist a:focus-visible {
	color: var(--svt-click-deep, #3A5FA3);
	text-decoration: underline;
}

/* One group per top-level category, a <details> closed by default. */
body.svt-vs-hub .svt-vs-hub__group {
	margin: 0;
	border: 1px solid var(--svt-hairline, #E5E1D8);
	border-radius: 12px;
	background: rgba(255, 255, 255, .45);
	scroll-margin-top: 110px;
}
body.svt-vs-hub .svt-vs-hub__group + .svt-vs-hub__group {
	margin-top: 12px;
}
body.svt-vs-hub .svt-vs-hub__ghead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 18px 24px;
	list-style: none;
	cursor: pointer;
	border-radius: 12px;
}
body.svt-vs-hub .svt-vs-hub__ghead::-webkit-details-marker {
	display: none;
}
body.svt-vs-hub .svt-vs-hub__ghead::marker {
	content: "";
}
body.svt-vs-hub .svt-vs-hub__ghead:hover {
	background: rgba(255, 255, 255, .6);
}
body.svt-vs-hub .svt-vs-hub__ghead:focus-visible {
	outline: 2px solid var(--svt-click, #4974C4);
	outline-offset: 2px;
}
body.svt-vs-hub .svt-vs-hub__gtitle {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--svt-ink, #26231E);
}
body.svt-vs-hub .svt-vs-hub__gcount {
	margin-left: 10px;
	font-size: 14px;
	font-weight: 400;
	color: var(--svt-slate, #79746A);
}
body.svt-vs-hub .svt-vs-hub__chev {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-right: 4px;
	border-right: 2px solid var(--svt-ink, #26231E);
	border-bottom: 2px solid var(--svt-ink, #26231E);
	transform: rotate(45deg) translateY(-3px);
	transition: transform .16s ease;
}
body.svt-vs-hub .svt-vs-hub__group[open] > .svt-vs-hub__ghead .svt-vs-hub__chev {
	transform: rotate(-135deg) translateY(-3px);
}
body.svt-vs-hub .svt-vs-hub__gbody {
	padding: 0 24px 24px;
}
body.svt-vs-hub .svt-vs-hub__gall,
body.svt-vs-hub .svt-vs-hub__call {
	font-size: 14px;
	font-weight: 500;
	color: var(--svt-click, #4974C4);
	text-decoration: none;
}
body.svt-vs-hub .svt-vs-hub__gall {
	display: inline-block;
	margin: 0 0 14px;
}
body.svt-vs-hub .svt-vs-hub__call {
	display: inline-block;
	margin-top: 16px;
}
body.svt-vs-hub .svt-vs-hub__gall:hover,
body.svt-vs-hub .svt-vs-hub__gall:focus-visible,
body.svt-vs-hub .svt-vs-hub__call:hover,
body.svt-vs-hub .svt-vs-hub__call:focus-visible {
	color: var(--svt-click-deep, #3A5FA3);
	text-decoration: underline;
}

/* Category tabs: radio inputs and labels, the versus page's pattern. The
   inputs are the only <input> in .svt-vs-hub__tabset, so nth-of-type on them
   lines up with nth-child on the labels and the panes. */
body.svt-vs-hub .svt-vs-hub__tabset {
	position: relative;
}
body.svt-vs-hub .svt-vs-hub__r {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
body.svt-vs-hub .svt-vs-hub__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}
body.svt-vs-hub .svt-vs-hub__tabs label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 14px 7px;
	border: 1px solid #D6D1C7;
	border-radius: 8px;
	background: #E5E1D8;
	color: var(--svt-ink, #26231E);
	font-size: 13px;
	font-weight: 550;
	line-height: 1.6;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
body.svt-vs-hub .svt-vs-hub__tabs label span {
	font-variant-numeric: tabular-nums;
	opacity: .6;
}
body.svt-vs-hub .svt-vs-hub__tabs label:hover {
	border-color: #BDB6A9;
}
body.svt-vs-hub .svt-vs-hub__panes > .svt-vs-hub__pane {
	display: none;
}
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(1):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(1),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(2):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(2),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(3):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(3),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(4):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(4),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(5):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(5),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(6):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(6),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(7):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(7),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(8):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(8),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(9):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(9),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(10):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(10),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(11):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(11),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(12):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(12),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(13):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(13),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(14):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(14),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(15):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(15),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(16):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(16),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(17):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(17),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(18):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(18),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(19):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(19),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(20):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(20),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(21):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(21),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(22):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(22),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(23):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(23),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(24):checked ~ .svt-vs-hub__panes > .svt-vs-hub__pane:nth-child(24) {
	display: block;
}
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(1):checked ~ .svt-vs-hub__tabs > label:nth-child(1),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(2):checked ~ .svt-vs-hub__tabs > label:nth-child(2),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(3):checked ~ .svt-vs-hub__tabs > label:nth-child(3),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(4):checked ~ .svt-vs-hub__tabs > label:nth-child(4),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(5):checked ~ .svt-vs-hub__tabs > label:nth-child(5),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(6):checked ~ .svt-vs-hub__tabs > label:nth-child(6),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(7):checked ~ .svt-vs-hub__tabs > label:nth-child(7),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(8):checked ~ .svt-vs-hub__tabs > label:nth-child(8),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(9):checked ~ .svt-vs-hub__tabs > label:nth-child(9),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(10):checked ~ .svt-vs-hub__tabs > label:nth-child(10),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(11):checked ~ .svt-vs-hub__tabs > label:nth-child(11),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(12):checked ~ .svt-vs-hub__tabs > label:nth-child(12),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(13):checked ~ .svt-vs-hub__tabs > label:nth-child(13),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(14):checked ~ .svt-vs-hub__tabs > label:nth-child(14),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(15):checked ~ .svt-vs-hub__tabs > label:nth-child(15),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(16):checked ~ .svt-vs-hub__tabs > label:nth-child(16),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(17):checked ~ .svt-vs-hub__tabs > label:nth-child(17),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(18):checked ~ .svt-vs-hub__tabs > label:nth-child(18),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(19):checked ~ .svt-vs-hub__tabs > label:nth-child(19),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(20):checked ~ .svt-vs-hub__tabs > label:nth-child(20),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(21):checked ~ .svt-vs-hub__tabs > label:nth-child(21),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(22):checked ~ .svt-vs-hub__tabs > label:nth-child(22),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(23):checked ~ .svt-vs-hub__tabs > label:nth-child(23),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(24):checked ~ .svt-vs-hub__tabs > label:nth-child(24) {
	background: #12213B;
	border-color: #12213B;
	color: #FDFAF4;
}
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(1):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(1),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(2):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(2),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(3):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(3),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(4):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(4),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(5):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(5),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(6):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(6),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(7):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(7),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(8):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(8),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(9):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(9),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(10):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(10),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(11):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(11),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(12):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(12),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(13):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(13),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(14):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(14),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(15):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(15),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(16):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(16),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(17):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(17),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(18):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(18),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(19):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(19),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(20):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(20),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(21):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(21),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(22):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(22),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(23):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(23),
body.svt-vs-hub .svt-vs-hub__r:nth-of-type(24):focus-visible ~ .svt-vs-hub__tabs > label:nth-child(24) {
	outline: 2px solid var(--svt-click, #4974C4);
	outline-offset: 2px;
}

body.svt-vs-hub .svt-vs-hub__empty {
	margin: 12px 0 48px;
	font-size: 15px;
}

@media (max-width: 768px) {
	body.svt-vs-hub .svt-vs-hub__ghead {
		padding: 14px 14px;
	}
	body.svt-vs-hub .svt-vs-hub__gbody {
		padding: 0 14px 18px;
	}
	body.svt-vs-hub .svt-vs-hub__gtitle {
		font-size: 19px;
	}
	body.svt-vs-hub .svt-vs-hub__gcount {
		display: block;
		margin: 2px 0 0;
		font-size: 13px;
	}
	body.svt-vs-hub .svt-vs-hub__index {
		padding: 14px;
	}
	/* On a phone the closed groups are the list, so the index keeps only its
	   find box, and a short hub prints no index at all. */
	body.svt-vs-hub .svt-vs-hub__index:not(.svt-vs-hub__index--long),
	body.svt-vs-hub .svt-vs-hub__indexlist {
		display: none;
	}
	body.svt-vs-hub .svt-vs-hub__indexhead {
		margin: 0;
	}
	body.svt-vs-hub .svt-vs-hub__find {
		width: 100%;
	}
	/* Every category tab shows on a phone. They wrap onto as many rows as
	   they need, smaller than on desktop; a row that scrolled sideways hid
	   the categories past the edge with nothing to say they were there. */
	body.svt-vs-hub .svt-vs-hub__tabs {
		gap: 6px;
	}
	body.svt-vs-hub .svt-vs-hub__tabs label {
		gap: 5px;
		padding: 4px 9px 5px;
		font-size: 12.5px;
		line-height: 1.5;
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.svt-vs-hub .svt-vs-hub__tabs label,
	body.svt-vs-hub .svt-vs-hub__chev { transition: none; }
}

/* SVT hub motion and the product section, 2026-09-16 (Draft 0.6, settled).
   The groups carry the versus page's .reveal and fade in as its sections do;
   svt-vs.js adds .svtvs--js, so with no script nothing is hidden. A group opened
   by a jump link is shown at once by the hash script. */
body.svt-vs-hub .svtvs--js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
body.svt-vs-hub .svtvs--js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	body.svt-vs-hub .svtvs--js .reveal { opacity: 1; transform: none; transition: none; }
}
body.svt-vs-hub .svt-vs-hub__section + .svt-vs-hub__section { margin-top: 8px; }
/* end SVT hub motion */