/* Comparison cards - the /vs/ hub and "Other comparisons" on every versus page.
   Markup: svt_vs_card_html() in plugins/svt-core/includes/svt-vs-cards.php.
   Two logos with the VS mark between them, the title under them, the whole
   card one link. Built 2026-09-16. */

.svt-vscards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
	gap: 16px;
}

.svt-vscards a.svt-vscard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--svt-hairline, #E5E1D8);
	border-radius: 12px;
	background: var(--svt-card, #fff);
	color: var(--svt-ink, #26231E);
	text-decoration: none;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.svt-vscards a.svt-vscard:hover,
.svt-vscards a.svt-vscard:focus-visible {
	border-color: var(--svt-click, #4974C4);
	box-shadow: 0 6px 18px rgba(38, 35, 30, .08);
	color: var(--svt-ink, #26231E);
	text-decoration: none;
}

.svt-vscards a.svt-vscard:focus-visible {
	outline: 2px solid var(--svt-click, #4974C4);
	outline-offset: 2px;
}

.svt-vscard__media {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	height: 100px;
	padding: 14px 16px;
	background: var(--svt-page, #F2EEE6);
	border-bottom: 1px solid var(--svt-hairline, #E5E1D8);
}

.svt-vscard__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 44px;
}

.svt-vscards .svt-vscard__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 44px;
	/* A scaled logo must still fit its cell: the width is reserved at 1/k so
	   the painted width after scale is never wider than the cell. Found on
	   Live 2026-09-16, where US Water (1.24) and Berkey (1.17) reached into
	   the VS mark. */
	max-width: calc(100% / var(--svt-logo-k, 1));
	object-fit: contain;
	scale: var(--svt-logo-k, 1);
}

.svt-vscards .svt-vscard__mark {
	display: block;
	width: 40px;
	height: 40px;
	max-width: none;
	border-radius: 50%;
}

.svt-vscard__name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	overflow-wrap: anywhere;
}

.svt-vscard__title {
	display: block;
	padding: 12px 16px 14px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.3;
}

.svt-vscards a.svt-vscard:hover .svt-vscard__title,
.svt-vscards a.svt-vscard:focus-visible .svt-vscard__title {
	color: var(--svt-click, #4974C4);
}

@media (max-width: 420px) {
	.svt-vscards { grid-template-columns: 1fr; gap: 12px; }
	.svt-vscard__media { height: 88px; }
}

/* On a versus page the strip sits under a centred section heading. */
.svtvs .relpairs--cards .svt-vscards { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
	.svt-vscards a.svt-vscard { transition: none; }
}

/* SVT VS pass 6, 2026-09-16 */

/* "COMPARED IN" IS A SLIM ROW ABOVE THE SCORE SECTIONS. Pass 6g, 2026-09-16.
   Michael: two links share a line on desktop, three and four fill two lines,
   and two lines is the most this section ever takes there. A phone shows the
   two most-searched and keeps the rest behind a "more" button in the label
   row, so the button costs no height. Built for one to four comparisons, the
   cap in svt_vs_for_product().
   - 960px of section and up: the label sits left of the links, and the links
     run two to a row.
   - 600 to 960px: the label sits above and the links still run two to a row.
     The chip grows with the section (22cqi, 150 to 188px) so the logos stay
     readable and a title stays on one line. The first build moved to two to
     a row only at 880px, and Michael's desktop, at about 850px, got one to a
     row.
   - Under 600px: one link to a row. With three or four, rows 3 and 4 are
     hidden until the button opens them. The script that adds .is-clip also
     wires the button, so with no script every link shows.
   Every chip in a size band is the same width, so the titles line up. A name
   wraps; it is never cut. Chips and controls use the 8px radius. */
.svt-comparedin {
	clear: both;
	box-sizing: border-box;
	margin: 0 0 14px;
	padding: 14px 0 10px;
	border-top: 1px solid var(--svt-hairline, #E5E1D8);
	container-type: inline-size;
	container-name: svtci;
}
.svt-comparedin__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px 22px;
}
.svt-comparedin__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
}
.svt-comparedin .svt-comparedin__h {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--svt-muted, #6B665C);
}
.svt-comparedin .svt-comparedin__more {
	display: none;
	align-items: center;
	gap: 5px;
	margin: -6px -8px -6px 0;
	padding: 6px 8px;
	border: 0;
	border-radius: 8px;
	background: none;
	box-shadow: none;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--svt-click, #4974C4);
	cursor: pointer;
}
.svt-comparedin .svt-comparedin__more:hover { background: color-mix(in srgb, var(--svt-click, #4974C4) 8%, transparent); }
.svt-comparedin .svt-comparedin__more:focus-visible { outline: 2px solid var(--svt-click, #4974C4); outline-offset: 1px; }
.svt-comparedin__more svg { display: block; width: 12px; height: 12px; transition: transform .16s ease; }
.svt-comparedin.is-open .svt-comparedin__more svg { transform: rotate(180deg); }
.svt-comparedin .svt-comparedin__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.svt-comparedin .svt-comparedin__list > li { margin: 0; padding: 0; min-width: 0; }
.svt-comparedin .svt-comparedin__list > li::before { content: none; }
.svt-comparedin a.svt-cilink {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 10px;
	width: 100%;
	color: var(--svt-ink, #26231E);
	text-decoration: none;
}
.svt-cilink__chip {
	--svt-chip-w: 150px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	width: var(--svt-chip-w);
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--svt-hairline, #E5E1D8);
	border-radius: 8px;
	background: var(--svt-card, #fff);
	transition: border-color .16s ease;
}
.svt-cilink__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 18px;
	min-width: 0;
}
.svt-comparedin .svt-cilink__img {
	display: block;
	width: auto;
	height: auto;
	max-height: 18px;
	max-width: calc((var(--svt-chip-w, 150px) - 50px) / 2 / var(--svt-logo-k, 1));
	object-fit: contain;
	scale: var(--svt-logo-k, 1);
}
.svt-comparedin .svt-cilink__mark {
	display: block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	max-width: none;
	border-radius: 50%;
}
.svt-cilink__name {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
}
.svt-cilink__text {
	min-width: 0;
	font-size: 13.5px;
	line-height: 1.3;
	text-wrap: pretty;
}
.svt-cilink__t { display: block; font-weight: 600; text-wrap: balance; transition: color .16s ease; }
.svt-cilink__sub { display: block; font-size: 12.5px; color: var(--svt-muted, #6B665C); }
.svt-cilink__dot { display: none; }
.svt-cilink__go {
	display: block;
	width: 12px;
	height: 12px;
	color: var(--svt-muted, #6B665C);
	transition: transform .16s ease, color .16s ease;
}
.svt-comparedin a.svt-cilink:hover .svt-cilink__chip,
.svt-comparedin a.svt-cilink:focus-visible .svt-cilink__chip { border-color: var(--svt-click, #4974C4); }
.svt-comparedin a.svt-cilink:hover .svt-cilink__t,
.svt-comparedin a.svt-cilink:focus-visible .svt-cilink__t,
.svt-comparedin a.svt-cilink:hover .svt-cilink__go,
.svt-comparedin a.svt-cilink:focus-visible .svt-cilink__go { color: var(--svt-click, #4974C4); }
.svt-comparedin a.svt-cilink:hover .svt-cilink__go { transform: translateX(2px); }
.svt-comparedin a.svt-cilink:focus-visible { outline: 2px solid var(--svt-click, #4974C4); outline-offset: 3px; border-radius: 8px; }
/* The one-link row, from 600px: the chip takes the logos at full size. */
@container svtci (min-width: 600px) {
	.svt-comparedin--n1 .svt-cilink__chip { width: auto; min-width: 196px; height: 36px; padding: 0 12px; gap: 8px; }
	.svt-comparedin--n1 .svt-cilink__logo { height: 20px; }
	.svt-comparedin--n1 .svt-cilink__img { max-height: 20px; max-width: calc(96px / var(--svt-logo-k, 1)); }
	.svt-comparedin--n1 .svt-cilink__mark { width: 20px; height: 20px; }
	.svt-comparedin--n1 .svt-cilink__sub { font-size: 14px; }
}
/* Phones: the button shows once the script has clipped the list. */
@container svtci (max-width: 599.98px) {
	.svt-comparedin.is-clip .svt-comparedin__more { display: inline-flex; }
	.svt-comparedin.is-clip:not(.is-open) .svt-comparedin__list > li:nth-child(n+3) { display: none; }
}
/* Two to a row from 600px. */
@container svtci (min-width: 600px) {
	.svt-cilink__chip { --svt-chip-w: clamp(150px, 22cqi, 188px); }
	.svt-cilink__text { font-size: 14px; }
	.svt-cilink__sub { font-size: 13px; }
	.svt-comparedin:not(.svt-comparedin--n1) .svt-comparedin__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.svt-comparedin--n1 .svt-comparedin__in { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
	.svt-comparedin--n1 a.svt-cilink { width: auto; justify-self: start; }
	.svt-comparedin--n1 .svt-cilink__t,
	.svt-comparedin--n1 .svt-cilink__sub { display: inline; }
	.svt-comparedin--n1 .svt-cilink__dot { display: inline; }
}
/* 960px and up: the label moves left. */
@container svtci (min-width: 960px) {
	.svt-comparedin__in { grid-template-columns: auto minmax(0, 1fr); }
	.svt-comparedin:not(.svt-comparedin--n1) .svt-comparedin__head { align-self: start; padding-top: 12px; }
	.svt-comparedin a.svt-cilink { column-gap: 12px; }
	.svt-cilink__chip { --svt-chip-w: 188px; height: 36px; }
}
@media (max-width: 480px) {
	.svt-comparedin { margin-bottom: 12px; padding: 12px 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.svt-cilink__chip,
	.svt-cilink__t,
	.svt-cilink__go,
	.svt-comparedin__more svg { transition: none; }
}

/* CARD TITLES ARE CENTRED. The title block fills the card under the logos, so
   a one-line title sits level with a two-line one beside it. */
.svt-vscards .svt-vscard__title {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-wrap: balance;
}
/* end SVT VS pass 6 */

/* SVT product-vs-product cards, 2026-09-16 (Draft 0.7 Part 9). The hub and the
   foot of a product page. Two cutouts where a brand card has logos, on the card
   band with no white box; both names in the side colours; the category above
   and both overalls below. */
.svt-vscards .svt-vscard--pvp .svt-vscard__media { height: 112px; padding: 10px 14px; }
.svt-vscards .svt-vscard--pvp .svt-vscard__logo { height: 88px; background: transparent; }
.svt-vscards .svt-vscard--pvp .svt-vscard__img { max-height: 80px; height: 80px; width: 80px; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; scale: 1; }
.svt-vscard .pvp-vsc { display: grid; gap: 3px; justify-items: center; min-width: 0; }
.svt-vscard .pvp-vsc__eye { display: block; margin: 0 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--svt-muted, #6B665C); }
.svt-vscard--pvp .pvp-vsc__eye { color: var(--svt-added, #3B6633); }
.svt-vscard .pvp-vsc__t { display: block; overflow-wrap: anywhere; }
.svt-vscard .pvp-vsc__t em { font-style: normal; font-weight: 500; color: var(--svt-muted, #6B665C); font-size: .85em; }
.svt-vscard .pvp-vsc__sub { display: block; margin: 0; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--svt-muted, #6B665C); }
.svt-vscard .pvp-vsc__sub b { font-family: var(--svt-font-mono, ui-monospace, monospace); font-weight: 600; }
.svt-vscard .pvp-n .pvp-b { font-weight: 700; }
.svt-vscard .pvp-c-a { color: var(--a, #C8842B); }
.svt-vscard .pvp-c-b { color: var(--b, #4974C4); }
.svt-vscard--brand .svt-vscard__title { color: var(--svt-ink, #26231E); }
.svt-vscards a.svt-vscard--pvp:hover .svt-vscard__title .pvp-c-a { color: var(--a, #C8842B); }
.svt-vscards a.svt-vscard--pvp:hover .svt-vscard__title .pvp-c-b { color: var(--b, #4974C4); }
@media (max-width: 700px) {
	.svt-vscards .svt-vscard--pvp .svt-vscard__media { height: 104px; }
}
/* "Compared in": a product pair's chip shows the two products. */
.svt-comparedin .svt-cilink__chip--pvp .svt-cilink__logo--pvp { height: 28px; }
.svt-comparedin .svt-cilink__chip--pvp .svt-cilink__img { max-height: 28px; max-width: calc((var(--svt-chip-w, 150px) - 50px) / 2); scale: 1; mix-blend-mode: multiply; }
/* end SVT product-vs-product cards */

/* SVT "Compared in" as rows, 2026-09-17 (Michael). One link to a row at every
   width: a small white chip on the left, the title to its right, one grey
   line (the category) under the title. The chip never runs full width.
   container-type: normal switches off the svtci container rules above (the
   two-to-a-row grid, the label moving left, the one-link inline row and the
   phone clip), so these rules are the whole layout.
   - Phones: chip 132x56, title 14.5px, no arrow (the row is the link).
   - Under 360px: chip 112x50.
   - 768px and up: chip 280x72, title 18px, arrow shown.
   Measured on the RO5DX page at 320, 375, 390 and 1280: no text clipped, no
   sideways scroll. The section prints below the tabs (hook priority 19). */
.svt-comparedin.svt-comparedin--rows { container-type: normal; padding: 16px 0 12px; }
.svt-comparedin.svt-comparedin--rows .svt-comparedin__in { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.svt-comparedin.svt-comparedin--rows .svt-comparedin__head { padding-top: 0; }
.svt-comparedin.svt-comparedin--rows .svt-comparedin__h { font-size: 15px; color: var(--svt-ink, #26231E); }
.svt-comparedin.svt-comparedin--rows .svt-comparedin__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.svt-comparedin.svt-comparedin--rows a.svt-cilink { grid-template-columns: 132px minmax(0, 1fr); column-gap: 12px; }
.svt-comparedin.svt-comparedin--rows .svt-cilink__chip { --svt-chip-w: 132px; width: 132px; height: 56px; padding: 0 8px; gap: 4px; border-radius: 10px; }
.svt-comparedin.svt-comparedin--rows .svt-cilink__logo { flex: 1 1 0; height: auto; }
.svt-comparedin.svt-comparedin--rows .svt-cilink__chip--pvp .svt-cilink__img { width: auto; height: 44px; max-height: 44px; max-width: 46px; }
.svt-comparedin.svt-comparedin--rows .svt-cilink__chip:not(.svt-cilink__chip--pvp) .svt-cilink__img { max-height: 26px; }
.svt-comparedin.svt-comparedin--rows .svt-cilink__chip:not(.svt-cilink__chip--pvp) .svt-cilink__img.svt-brandlogo { --svt-lf-a: 900; --svt-lf-h: 26px; --svt-lf-w: 46px; }
.svt-comparedin.svt-comparedin--rows .svt-cilink__mark { width: 22px; height: 22px; }
.svt-comparedin.svt-comparedin--rows .svt-cilink__name { font-size: 10px; }
.svt-comparedin.svt-comparedin--rows .svt-cilink__text { font-size: 14.5px; line-height: 1.3; }
.svt-comparedin.svt-comparedin--rows .svt-cilink__t { font-weight: 700; }
.svt-comparedin.svt-comparedin--rows .svt-cilink__sub { margin-top: 2px; font-size: 12.5px; }
.svt-comparedin.svt-comparedin--rows .svt-cilink__dot,
.svt-comparedin.svt-comparedin--rows .svt-cilink__go,
.svt-comparedin.svt-comparedin--rows .svt-comparedin__more { display: none; }
@media (max-width: 359.98px) {
	.svt-comparedin.svt-comparedin--rows a.svt-cilink { grid-template-columns: 112px minmax(0, 1fr); column-gap: 10px; }
	.svt-comparedin.svt-comparedin--rows .svt-cilink__chip { --svt-chip-w: 112px; width: 112px; height: 50px; padding: 0 6px; gap: 3px; }
	.svt-comparedin.svt-comparedin--rows .svt-cilink__chip--pvp .svt-cilink__img { height: 38px; max-height: 38px; max-width: 38px; }
	.svt-comparedin.svt-comparedin--rows .svt-cilink__chip:not(.svt-cilink__chip--pvp) .svt-cilink__img { max-height: 22px; }
	.svt-comparedin.svt-comparedin--rows .svt-cilink__chip:not(.svt-cilink__chip--pvp) .svt-cilink__img.svt-brandlogo { --svt-lf-a: 700; --svt-lf-h: 22px; --svt-lf-w: 38px; }
	.svt-comparedin.svt-comparedin--rows .svt-cilink__mark { width: 20px; height: 20px; }
	.svt-comparedin.svt-comparedin--rows .svt-cilink__text { font-size: 14px; }
}
@media (min-width: 768px) {
	.svt-comparedin.svt-comparedin--rows .svt-comparedin__list { gap: 14px; }
	.svt-comparedin.svt-comparedin--rows a.svt-cilink { grid-template-columns: 280px minmax(0, 1fr) auto; column-gap: 24px; }
	.svt-comparedin.svt-comparedin--rows .svt-cilink__chip { --svt-chip-w: 280px; width: 280px; height: 72px; padding: 0 16px; gap: 14px; border-radius: 12px; }
	.svt-comparedin.svt-comparedin--rows .svt-cilink__chip--pvp .svt-cilink__img { height: 58px; max-height: 58px; max-width: 92px; }
	.svt-comparedin.svt-comparedin--rows .svt-cilink__chip:not(.svt-cilink__chip--pvp) .svt-cilink__img { max-height: 38px; }
	.svt-comparedin.svt-comparedin--rows .svt-cilink__chip:not(.svt-cilink__chip--pvp) .svt-cilink__img.svt-brandlogo { --svt-lf-a: 2400; --svt-lf-h: 38px; --svt-lf-w: 96px; }
	.svt-comparedin.svt-comparedin--rows .svt-cilink__mark { width: 32px; height: 32px; }
	.svt-comparedin.svt-comparedin--rows .svt-cilink__name { font-size: 12px; }
	.svt-comparedin.svt-comparedin--rows .svt-cilink__text { font-size: 18px; }
	.svt-comparedin.svt-comparedin--rows .svt-cilink__sub { font-size: 15px; }
	.svt-comparedin.svt-comparedin--rows .svt-cilink__go { display: block; width: 16px; height: 16px; }
}
/* end SVT "Compared in" as rows */