/* 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-ink, #655F55);
}

/* 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-ink, #655F55);
}
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-ink, #655F55);
}

/* 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-ink, #655F55);
}
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-ink, #655F55);
	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-ink, #655F55);
}
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-ink, #35589C); /*b71 was --svt-click, 4.24 on the group panel*/
	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;
	font-weight: 400; /*b71 was opacity .6, 3.84 on the tab. Lighter weight, same ink*/
}
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 */

/* SVT-BLOCK-19 */

/* The link up to this category's ranking page. Block 14 moved it below the
   products, where it belongs; this gives it something to be. The shape matches
   the category rows on the search results page deliberately - one component,
   two surfaces. */

.svt-cat-best {
	margin: 22px 0 30px;
}

.svt-cat-best a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border: 1px solid #e3ded2;
	border-radius: 10px;
	background: linear-gradient( 90deg, #f3efe6 0%, #fcfaf6 60% );
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #1d1a15;
	text-decoration: none;
	transition: transform 0.14s ease, border-color 0.14s ease;
}

.svt-cat-best a:hover,
.svt-cat-best a:focus-visible {
	border-color: #a4632a;
	transform: translateX( 2px );
	color: #1d1a15;
}

.svt-cat-best a span {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 16px;
	color: #a4632a;
	transition: transform 0.14s ease;
}

.svt-cat-best a:hover span {
	transform: translateX( 3px );
}

@media ( max-width: 560px ) {
	.svt-cat-best a {
		padding: 14px 16px;
		font-size: 15px;
	}
}

/* SVT-BLOCK-22 */

/* The ranking link is a card, not a control: it holds content and is as tall as
   one. 10px was stated as a literal and becomes the card token. */

.svt-cat-best a {
	border-radius: var( --svt-radius-card, 12px );
}

/* SVT-BLOCK-90 */

/* The footer links under the hubs and the 404. svt-best.css colours them on
   the rankings hub only, so on the 404 they fell back to the theme link
   colour and failed contrast on the page tan (PSI 95, 2026-09-28). */
body.svt-vs-hub .rk-hubfoot a {
	color: var(--svt-click-ink, #35589C);
}
body.svt-vs-hub .rk-hubfoot a:hover,
body.svt-vs-hub .rk-hubfoot a:focus-visible {
	color: var(--svt-click-deep, #3A5FA3);
}

/* b102c, 2026-10-02 (Michael; Content Standards 1.82). One row of each hub grid shows and the rest fold behind
   "Show N more", as on /all-brands/ and /all-categories/ (block 102). The grids are fixed to a column count per
   width band so the row is known: comparison cards 1 / 2 / 3 / 4, ranking cards 1 / 1 / 2 / 3, at up to 560px,
   561 to 899, 900 to 1199 and 1200 up. svt_hub_fold() in each hub template writes svt-fold--bB-K for every band
   B whose row of K cards does not hold the grid. Every group now renders open. */
body.svt-vs-hub .svt-vscards {
	grid-template-columns: 1fr;
}
body.svt-vs-hub .rk-hubgrid {
	grid-template-columns: 1fr;
}
@media (min-width: 561px) {
	body.svt-vs-hub .svt-vscards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	body.svt-vs-hub .svt-vscards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body.svt-vs-hub .rk-hubgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	body.svt-vs-hub .svt-vscards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	body.svt-vs-hub .rk-hubgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body.svt-vs-hub .svt-fold__r {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
body.svt-vs-hub .svt-fold__more {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 7px;
	box-sizing: border-box;
	width: max-content;
	margin: 16px auto 0;
	padding: 9px 18px;
	border: 1px solid #D6D1C7;
	border-radius: var(--svt-radius-control, 8px);
	background: var(--svt-card, #fff);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--svt-ink, #26231E);
	cursor: pointer;
	transition: border-color .2s, background .2s, color .2s;
}
body.svt-vs-hub .svt-fold__more:hover {
	border-color: var(--svt-click, #4974C4);
	background: var(--b-soft, #EAF0FB);
	color: var(--svt-click-ink, #35589C);
}
body.svt-vs-hub .svt-fold__more:after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s;
}
body.svt-vs-hub .svt-fold__r:checked ~ .svt-fold__more:after {
	transform: translateY(2px) rotate(225deg);
}
body.svt-vs-hub .svt-fold__r:focus-visible ~ .svt-fold__more {
	outline: 2px solid var(--svt-click, #4974C4);
	outline-offset: 2px;
}
body.svt-vs-hub .svt-fold__s,
body.svt-vs-hub .svt-fold__n,
body.svt-vs-hub .svt-fold__r:checked ~ .svt-fold__more .svt-fold__o {
	display: none;
}
body.svt-vs-hub .svt-fold__r:checked ~ .svt-fold__more .svt-fold__s {
	display: inline;
}
@media (max-width:560px) {
	body.svt-vs-hub .svt-fold--b1-1 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+2) { display: none; }
	body.svt-vs-hub .svt-fold--b1-2 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+3) { display: none; }
	body.svt-vs-hub .svt-fold--b1-3 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+4) { display: none; }
	body.svt-vs-hub .svt-fold--b1-4 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+5) { display: none; }
	body.svt-vs-hub [class*="svt-fold--b1-"] > .svt-fold__more { display: flex; }
	body.svt-vs-hub .svt-fold__n1 { display: inline; }
}
@media (min-width:561px) and (max-width:899px) {
	body.svt-vs-hub .svt-fold--b2-1 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+2) { display: none; }
	body.svt-vs-hub .svt-fold--b2-2 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+3) { display: none; }
	body.svt-vs-hub .svt-fold--b2-3 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+4) { display: none; }
	body.svt-vs-hub .svt-fold--b2-4 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+5) { display: none; }
	body.svt-vs-hub [class*="svt-fold--b2-"] > .svt-fold__more { display: flex; }
	body.svt-vs-hub .svt-fold__n2 { display: inline; }
}
@media (min-width:900px) and (max-width:1199px) {
	body.svt-vs-hub .svt-fold--b3-1 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+2) { display: none; }
	body.svt-vs-hub .svt-fold--b3-2 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+3) { display: none; }
	body.svt-vs-hub .svt-fold--b3-3 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+4) { display: none; }
	body.svt-vs-hub .svt-fold--b3-4 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+5) { display: none; }
	body.svt-vs-hub [class*="svt-fold--b3-"] > .svt-fold__more { display: flex; }
	body.svt-vs-hub .svt-fold__n3 { display: inline; }
}
@media (min-width:1200px) {
	body.svt-vs-hub .svt-fold--b4-1 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+2) { display: none; }
	body.svt-vs-hub .svt-fold--b4-2 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+3) { display: none; }
	body.svt-vs-hub .svt-fold--b4-3 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+4) { display: none; }
	body.svt-vs-hub .svt-fold--b4-4 > .svt-fold__r:not(:checked) ~ .svt-fold__grid > :nth-child(n+5) { display: none; }
	body.svt-vs-hub [class*="svt-fold--b4-"] > .svt-fold__more { display: flex; }
	body.svt-vs-hub .svt-fold__n4 { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
	body.svt-vs-hub .svt-fold__more,
	body.svt-vs-hub .svt-fold__more:after { transition: none; }
}
/* The phone rule above hid a short index because the closed groups were the
   list. The groups are open now, so the index is the way down the page. */
@media (max-width: 768px) {
	body.svt-vs-hub .svt-vs-hub__index:not(.svt-vs-hub__index--long),
	body.svt-vs-hub .svt-vs-hub__indexlist {
		display: block;
	}
	body.svt-vs-hub .svt-vs-hub__indexhead {
		margin: 0 0 10px;
	}
	body.svt-vs-hub .svt-vs-hub__indexlist {
		column-width: 140px;
		column-gap: 16px;
	}
}
/* end b102c */