/* SVT components (block 130, 2026-10-07): one definition for a component that repeats across the
   site. Michael: the product page is the newest and sets the direction; where a component repeats,
   it is defined here once (renderer in plugins/svt-core/includes/svt-components.php) and every
   surface uses it.

   1. The pros and cons card, "What we like" / "What holds it back" (130d, Michael's mock-up):
      a flat card, light neutral fill, thin border, coloured top accent, a solid round badge in
      the header; one fact row per point with a round tinted badge carrying a topic icon from the
      site's set; four rows, then a small "Show N more" control. Surfaces: the product page
      (130e) and product-vs-product pages. Prefix svt-pnc: "svt-pc" is taken by the dot-line
      splitter (svt-dotline.php), which wraps every " · " piece in span.svt-pc (130e). */
.svt-pnc { --pc-accent: #556F50; --pc-tint: #EAF1E7; --pc-ink: #3F5E3A; background: #FCFBF9; border: 1px solid #E6E2DA; border-top: 3px solid var(--pc-accent); border-radius: 12px; padding: 16px 18px 12px; box-sizing: border-box; min-width: 0; }
.svt-pnc--con { --pc-accent: #B4574C; --pc-tint: #F8E8E4; --pc-ink: #8A4A43; }
.svt-pnc__head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.svt-pnc__badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pc-accent); color: #fff; box-shadow: 0 0 0 4px var(--pc-tint); }
.svt-pnc__badge-ic { width: 15px !important; height: 15px !important; }
.svt-pnc .svt-pnc__title { margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.25 !important; font-weight: 800 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--svt-ink, #26231E) !important; }
ul.svt-pnc__list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
li.svt-pnc-row { display: flex; gap: 12px; align-items: flex-start; margin: 0 !important; padding: 9px 0 !important; border-top: 1px solid #EFEBE4; list-style: none !important; }
li.svt-pnc-row:first-child { border-top: 0; }
li.svt-pnc-row::before { content: none !important; display: none !important; }
.svt-pnc-row__badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; background: var(--pc-tint); color: var(--pc-ink); }
.svt-pnc-row__ic { width: 16px !important; height: 16px !important; }
.svt-pnc-row__body { display: grid; gap: 1px; min-width: 0; font-size: 14.5px; line-height: 1.45; color: var(--svt-ink, #26231E); overflow-wrap: anywhere; }
.svt-pnc-row__lead, .svt-pnc-row__text b { font-weight: 700; }
.svt-pnc-row__more { font-size: 13.5px; color: var(--svt-slate-ink, #655F55); }
.svt-pnc-more__r { position: fixed; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.svt-pnc-more__r:not(:checked) ~ ul.svt-pnc__list > li:nth-child(n+5) { display: none !important; }
label.svt-pnc-more { display: flex; width: max-content; align-items: center; gap: 7px; margin: 4px auto 0; padding: 6px 12px; border-radius: var(--svt-radius-control, 8px); font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--pc-ink); cursor: pointer; -webkit-user-select: none; user-select: none; transition: background .15s ease; }
label.svt-pnc-more::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
label.svt-pnc-more:hover { background: var(--pc-tint); }
.svt-pnc-more__s, .svt-pnc-more__r:checked ~ label.svt-pnc-more .svt-pnc-more__o { display: none; }
.svt-pnc-more__r:checked ~ label.svt-pnc-more .svt-pnc-more__s { display: inline; }
.svt-pnc-more__r:checked ~ label.svt-pnc-more::after { transform: translateY(2px) rotate(225deg); }
.svt-pnc-more__r:focus-visible ~ label.svt-pnc-more { outline: 2px solid var(--svt-click, #4974C4); outline-offset: 2px; }
@media (max-width: 767px) { .svt-pnc { padding: 14px 14px 10px; } }
@media (prefers-reduced-motion: reduce) { label.svt-pnc-more, label.svt-pnc-more::after { transition: none; } }
.svt-pl-pc > .svt-pnc { flex: 1 1 auto; }
/* 130f (Michael): on the product page the Usability card keeps its own height instead of stretching
   to the cards beside it (the bars were spreading out), and the rows sit a little tighter there. */
@media (min-width: 1024px) {
	.svt-pl-row.has-pc { align-items: start; }
	.svt-pl-row.has-pc > .svt-pl-usab > .svt-bars { flex: 0 0 auto !important; justify-content: flex-start !important; }
	.svt-pl-row.has-pc > .svt-pl-pc { gap: 16px; }
}
.svt-pl-pc li.svt-pnc-row { padding: 7px 0 !important; }

/* 130f (Michael): the Usability bars are the site's fold rows, the same tile and chevron as
   "What owners are saying" (.svt-pl-fold). A bar with a note opens to the review's reason for
   that score; the verdict closes the card. Phone: the note runs the full width of the row. */
body.svt-pl .svt-pl-usab .svt-pl-ubars { display: flex !important; flex-direction: column; gap: 8px; justify-content: flex-start !important; }
body.svt-pl .svt-pl-ufold { background: var(--svt-pl-tile, #F6F2EB); border-radius: 14px; margin: 0; scroll-margin-top: 96px; }
body.svt-pl .svt-pl-ufold > .svt-bar-row,
body.svt-pl .svt-pl-ufold > summary.svt-bar-row {
	display: grid !important; grid-template-columns: 28px minmax(0, 1fr) 14px !important; column-gap: 14px !important; align-items: center !important;
	min-height: 56px; margin: 0 !important; padding: 10px 16px; box-sizing: border-box; list-style: none;
}
body.svt-pl .svt-pl-ufold > summary.svt-bar-row { cursor: pointer; border-radius: 14px; }
body.svt-pl .svt-pl-ufold > summary.svt-bar-row::-webkit-details-marker { display: none; }
body.svt-pl .svt-pl-ufold > summary.svt-bar-row::after {
	content: ""; justify-self: center; width: 8px; height: 8px; margin: 0 0 3px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; color: var(--svt-pl-ink, #26231E);
	transform: rotate(45deg); transition: transform .2s ease;
}
body.svt-pl .svt-pl-ufold[open] > summary.svt-bar-row::after { transform: rotate(-135deg); margin-bottom: -3px; }
body.svt-pl .svt-pl-ufold > summary.svt-bar-row:focus-visible { outline: 2px solid var(--svt-click, #4974C4); outline-offset: -2px; }
body.svt-pl .svt-pl-ufold .svt-bar-logo { width: 28px !important; height: 28px !important; margin: 0 !important; opacity: 1 !important; transform: none !important; }
body.svt-pl .svt-pl-ufold .svt-bar-main, body.svt-pl .svt-pl-ufold .svt-bar-track { display: block; }
body.svt-pl .svt-pl-ufold .svt-bar-head { display: flex; }
body.svt-pl .svt-pl-ufold .svt-bar-track { margin-top: 2px; }
body.svt-pl .svt-pl-uicw { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--svt-pl-blue, #35589C); }
body.svt-pl .svt-pl-uicw svg, body.svt-pl .svt-pl-uic { width: 26px !important; height: 26px !important; }
body.svt-pl .svt-pl-unote { margin: 0 16px 0 58px; padding: 10px 0 14px; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 15px; line-height: 1.55; color: var(--svt-pl-ink, #26231E); }
body.svt-pl .svt-pl-unote p, body.svt-pl .svt-pl-unote ul { margin: 0 !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--svt-pl-ink, #26231E); }
body.svt-pl .svt-pl-unote ul { padding-left: 18px !important; }
body.svt-pl .svt-pl-unote li { margin: 0 0 4px !important; }
body.svt-pl .svt-pl-unote b { font-weight: 700; }
body.svt-pl .svt-pl-unote__part + .svt-pl-unote__part { margin-top: 10px; }
body.svt-pl .svt-pl-unote__lab { display: block; margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--svt-pl-brass, #8F6226); }
body.svt-pl .svt-pl-uverdict { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; margin-top: 14px; padding: 14px 16px 0; border-top: 1px solid rgba(0, 0, 0, .08); }
body.svt-pl .svt-pl-uverdict .svt-pl-uicw { color: var(--svt-pl-brass, #8F6226); }
body.svt-pl .svt-pl-uverdict p { margin: 0 !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--svt-pl-ink, #26231E); }
@media (max-width: 767px) {
	body.svt-pl .svt-pl-ufold > .svt-bar-row,
	body.svt-pl .svt-pl-ufold > summary.svt-bar-row { grid-template-columns: 24px minmax(0, 1fr) 14px !important; column-gap: 10px !important; padding: 10px 12px; }
	body.svt-pl .svt-pl-ufold .svt-bar-logo, body.svt-pl .svt-pl-uicw { width: 24px !important; height: 24px !important; }
	body.svt-pl .svt-pl-unote { margin: 0 12px; }
	body.svt-pl .svt-pl-uverdict { grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; padding: 14px 12px 0; }
}
@media (prefers-reduced-motion: reduce) { body.svt-pl .svt-pl-ufold > summary.svt-bar-row::after { transition: none; } }

/* 131 (Michael): the compact card, three rows then "Show N more", on brand comparison cards. */
.svt-pnc--show3 .svt-pnc-more__r:not(:checked) ~ ul.svt-pnc__list > li:nth-child(n+4) { display: none !important; }
.svtvs .pcard__pnc { display: grid; gap: 12px; align-content: start; margin: 12px 0 0; padding: 0 12px 14px; }
@media (min-width: 821px) { .svtvs .pcard > .pcard__pnc { grid-row: 4 / span 4; align-self: start; } }
.svtvs .pcard__pnc .svt-pnc { padding: 14px 14px 10px; }
.svtvs .pcard__pnc .svt-pnc__title { margin: 0; }
/* 131b (Michael): each card closes on one closed row (Summary, Description) in the fold rows' tile; this is only its spacing. */
body.svt-pl .svt-pl-getting > .svt-pl-ufold, body.svt-pl .svt-pl-owners > .svt-pl-ufold { margin-top: 16px; }
body.svt-pl .svt-pl-desc .svt-pl-unote p + p, body.svt-pl .svt-pl-desc .svt-pl-unote ul + p, body.svt-pl .svt-pl-desc .svt-pl-unote p + ul { margin-top: 10px !important; }
/* 131c (Michael: "two horizontal lines ... a gap for no reason"): the description body keeps no rule or gap of its own inside the row. */
body.svt-pl .svt-pl-desc .svt-desc-body { border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; }
/* 131e (Michael): a blank User reviews pool reads "Not scored" in the score's place; the closing rows of What you're getting sit 8px apart, as the bars do. */
.svt-pl-fold.is-blank > summary .svt-pl-src__s { font-size: 13px; font-weight: 600; color: var(--svt-pl-slate, #655F55); }
body.svt-pl .svt-pl-getting > .svt-pl-ufold + .svt-pl-ufold { margin-top: 8px; }
/* 131f (Michael): a blank pool's "Not scored" and chevron sit in the scored rows' columns; with no reason to show, the row does not open. */
@media (min-width: 1024px) { .svt-pl-fold.is-blank > summary .svt-pl-src__s { grid-column: 4; } .svt-pl-fold.is-blank > summary::after { grid-column: 5; } }
.svt-pl-fold.is-static > summary { cursor: default; pointer-events: none; }
.svt-pl-fold.is-static > summary::after { visibility: hidden; }
/* 131g (Michael): on a phone the owners card's header is one row like Usability's, the score on the right; the title wraps before it overlaps. From 1024px, when every pros and cons row fits beside Usability, all show and the control goes (svt_pl_js_fit). */
@media (max-width: 767px) { body.svt-pl .svt-pl-owners > .svt-pl-head { flex-wrap: nowrap !important; } body.svt-pl .svt-pl-owners > .svt-pl-head .svt-pl-title { min-width: 0; white-space: normal !important; } }
.svt-pnc.is-all label.svt-pnc-more { display: none; }

/* 134 (Michael, 2026-10-08): one score look everywhere a score repeats, the product page's. Content Standards Part 9, the
   template register: criterion bar, score summary, fold row. Ranking cards, category and brand cards, versus pages. */
/* Score summary on product cards (svt_loop_blend_scores: category, brand and ranking cards): blue solid marks, cream track, N.N/10. */
html body .woocommerce .products .product .svt-loop-scores--blend .svt-loop-part-ico,
html body .svtvs--rank .rk-top .rk-blend.woocommerce .products.grid_woo .product .svt-loop-scores--blend .svt-loop-part-ico { background-color: #4974C4 !important; -webkit-mask-size: contain !important; mask-size: contain !important; }
html body .woocommerce .products .product .svt-loop-scores--blend .svt-loop-part-ico.is-usability { -webkit-mask-image: url("../svt-kit/icons/circle-check-solid.svg?v=1") !important; mask-image: url("../svt-kit/icons/circle-check-solid.svg?v=1") !important; }
html body .woocommerce .products .product .svt-loop-scores--blend .svt-loop-part-ico.is-social { -webkit-mask-image: url("../svt-kit/icons/message-circle-solid.svg?v=1") !important; mask-image: url("../svt-kit/icons/message-circle-solid.svg?v=1") !important; }
html body .woocommerce .products .product .svt-loop-scores--blend .svt-loop-part-bar { background: #EEE9E0 !important; }
html body .woocommerce .products .product .svt-loop-scores--blend .svt-loop-part-lbl { font-weight: 700 !important; }
html body .woocommerce .products .product .svt-loop-scores--blend .svt-loop-part-val { color: #26231E !important; white-space: nowrap; }
html body .woocommerce .products .product .svt-loop-scores--blend .svt-loop-part-val .svt-of { font-size: .78em; font-weight: 600; color: #655F55; margin-left: 1px; }
/* Ranking cards: each deciding criterion is the product page's Usability row: tinted tile, blue mark, N.N/10, the segmented bar. */
.svtvs--rank .rk-crits .rk-crit { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; margin: 0 0 8px; padding: 10px 14px; background: #F6F2EB; border-radius: 14px; }
.svtvs--rank .rk-crits .rk-crit > .svt-bar-logo { grid-column: 1; grid-row: 1 / 3; width: 24px !important; height: 24px !important; margin: 0 !important; background-color: #4974C4 !important; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.svtvs--rank .rk-crits .rk-crit > span:not(.svt-bar-logo) { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 700; line-height: 1.25; color: #26231E; }
.svtvs--rank .rk-crits .rk-crit > b { grid-column: 3; grid-row: 1; font-size: 15px; font-weight: 700; line-height: 1.25; color: #26231E; text-align: right; white-space: nowrap; }
.svtvs--rank .rk-crits .rk-crit > b .svt-of { font-size: .78em; font-weight: 600; color: #655F55; margin-left: 1px; }
.svtvs--rank .rk-crits .rk-crit > i { grid-column: 2 / 4; grid-row: 2; height: 8px; background: #EEE9E0; }
.svtvs--rank .rk-crits .rk-crit--na > b { font-weight: 400; color: #655F55; }
@media (max-width: 700px) {
	.svtvs--rank .rk-crits .rk-crit { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; margin: 0 0 6px; padding: 9px 12px; align-items: center; }
	.svtvs--rank .rk-crits .rk-crit > .svt-bar-logo { width: 22px !important; height: 22px !important; }
	.svtvs--rank .rk-crits .rk-crit > span:not(.svt-bar-logo), .svtvs--rank .rk-crits .rk-crit > b { font-size: 14px; grid-row: 1; }
	.svtvs--rank .rk-crits .rk-crit > i { grid-column: 2 / 4; grid-row: 2; }
}
/* Versus pages: criterion and owner-source rows carry the blue mark and N.N/10. */
html body .svtvs .diffrow__mark .svt-bar-logo.is-line { background-color: #4974C4 !important; }
.svtvs .diffbar__val .svt-of, .svtvs .svt-minibar__val .svt-of { font-size: .78em; font-weight: 600; color: #655F55; margin-left: 1px; }
@media (min-width: 601px) { html body .svtvs .diffrow__bars .diffbar__val { min-width: 3.6em; white-space: nowrap; } }
html body .svtvs .diffbar__val { white-space: nowrap; }
/* Versus score cards: Usability and Social as on the product page: bold label, blue solid mark, the figure at the right, cream track. */
html body .svtvs .svt-minibar__txt, html body .svtvs .pcard__scores .svt-minibar__txt, html body .svtvs .facts .svt-minibar__txt, html body .svtvs .pcard .svt-minibar__txt { gap: 7px; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #26231E; }
html body .svtvs .svt-minibar__ico { width: 16px; height: 16px; background-color: #4974C4; }
html body .svtvs .svt-minibar__ico--usability { -webkit-mask-image: url("../svt-kit/icons/circle-check-solid.svg?v=1"); mask-image: url("../svt-kit/icons/circle-check-solid.svg?v=1"); }
html body .svtvs .svt-minibar__ico--social { -webkit-mask-image: url("../svt-kit/icons/message-circle-solid.svg?v=1"); mask-image: url("../svt-kit/icons/message-circle-solid.svg?v=1"); }
html body .svtvs .svt-minibar__val, html body .svtvs .pcard .svt-minibar__val, html body .svtvs .facts .svt-minibar__val { font-size: 14px; font-weight: 700; color: #26231E; white-space: nowrap; }
html body .svtvs .svt-minibar__lab { margin: 0 0 5px; }
html body .svtvs .svt-minibar__track, html body .svtvs .pcard__scores .svt-minibar__track, html body .svtvs .facts .svt-minibar__track, html body .svtvs .match__lead .svt-minibar__track { background: #EEE9E0 !important; }
/* Questions: each one is a fold row, the tinted tile with the chevron at the right (versus and ranking pages). */
html body .svtvs .vsfaq__item, html body .svtvs .vsfaq__item:first-child, html body .svtvs .vsfaq__item:first-of-type { margin: 0 0 8px; border-top: 0; border-radius: 14px; background: #F6F2EB; }
html body .svtvs .vsfaq__q { align-items: center; padding: 14px 16px; color: #26231E; border-radius: 14px; }
html body .svtvs .vsfaq__q::after { flex: 0 0 8px; width: 8px; height: 8px; margin: 0 2px 3px auto; border-right: 2px solid #26231E; border-bottom: 2px solid #26231E; }
html body .svtvs .vsfaq__item[open] .vsfaq__q::after, html body .svtvs .vsfaq__q:hover::after { border-color: #26231E; }
html body .svtvs .vsfaq__item[open] .vsfaq__q::after { margin: 3px 2px 0 auto; }
html body .svtvs .vsfaq__q:focus-visible { outline: 2px solid #4974C4; outline-offset: -2px; }
html body .svtvs .vsfaq__a { padding: 0 16px 14px; }
@media (max-width: 767px) { html body .svtvs .vsfaq__q { padding: 13px 14px; } html body .svtvs .vsfaq__a { padding: 0 14px 13px; } }
/* 134b: phone fixes found on Staging. The ranking cards' three criteria stack one per row on a phone, as on the product page (they sat
   three across and overlapped). A category or brand card on a phone is too narrow for its halves' figures, so it keeps the bars alone;
   the ranking cards keep theirs. A versus bar's figure column takes the width "N.N/10" needs. */
@media (max-width: 767px) {
	html body .woocommerce .products .product .svt-loop-scores--blend .svt-loop-part-val { display: none !important; }
	html body .svtvs--rank .rk-top .rk-blend.woocommerce .products.grid_woo .product .svt-loop-scores--blend .svt-loop-part-val { display: inline !important; }
}
@media (max-width: 700px) { html body .svtvs--rank .rk-crits { display: block !important; } }
@media (max-width: 600px) { html body .svtvs .diffrow__bars .diffbar { grid-template-columns: minmax(0, 1fr) auto; } }

/* 135 (Michael, 2026-10-08, versus-button-v4): the Versus button's one run on a product page (svt_pl_js_vsa()). The mark
   slides left, "Compare with" and the rival brands roll, "See who wins" centres, the button turns peach with a brass edge
   and is pressed once, then it settles on "Versus". 4 s, once (135b: the closest three); hover or focus pauses; nothing with reduced motion. */
@property --svt-vsa-k { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --svt-vsa-p { syntax: "<number>"; inherits: true; initial-value: 0; }
.single-product .summary .svt-single-compare.wpsm-button.wpsm-button-new-compare.svt-vsa::before { visibility: hidden !important; }
.single-product .summary .svt-single-compare.svt-vsa { animation: svtVsaBtn 4s ease 1 both; }
.svt-single-compare.svt-vsa .svt-vsa__mark { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; margin-top: -11px; background: center / contain no-repeat; transform: translateX(var(--svt-vsa-x0, 0)); pointer-events: none; animation: svtVsaMark 4s cubic-bezier(.6, 0, .2, 1) 1 both; }
.single-product .summary .svt-single-compare.svt-vsa .comparelabel { animation: svtVsaWord 4s cubic-bezier(.6, 0, .2, 1) 1 both; }
.svt-single-compare.svt-vsa .svt-vsa__roll { position: absolute; left: 36px; right: 10px; top: 0; height: 100%; opacity: 0; pointer-events: none; text-align: left; animation: svtVsaRoll 4s ease 1 both; }
.svt-single-compare.svt-vsa .svt-vsa__eye { position: absolute; top: 4px; left: 0; font-size: 9px; line-height: 1; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: #8F6226; animation: svtVsaEye 4s ease 1 both; }
.svt-single-compare.svt-vsa .svt-vsa__win { position: absolute; left: 0; right: 0; top: 15px; height: 17px; overflow: hidden; animation: svtVsaWin 4s cubic-bezier(.65, 0, .25, 1) 1 both; }
.svt-single-compare.svt-vsa .svt-vsa__list { display: block; }
.svt-single-compare.svt-vsa .svt-vsa__list > span { display: block; height: 17px; line-height: 17px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #26231E; }
.svt-single-compare.svt-vsa .svt-vsa__list > .svt-vsa__cta { font-weight: 800; text-align: center; } /* 135b: centred in the room beside the mark */
.svt-single-compare.svt-vsa .svt-vsa__list--2 { animation: svtVsaList2 4s cubic-bezier(.65, 0, .25, 1) 1 both; }
.svt-single-compare.svt-vsa .svt-vsa__list--3 { animation: svtVsaList3 4s cubic-bezier(.65, 0, .25, 1) 1 both; }
.single-product .summary .svt-single-compare.svt-vsa:hover, .single-product .summary .svt-single-compare.svt-vsa:focus-visible,
.single-product .summary .svt-single-compare.svt-vsa:hover *, .single-product .summary .svt-single-compare.svt-vsa:focus-visible * { animation-play-state: paused; }
@keyframes svtVsaBtn { 0%, 61% { --svt-vsa-k: 0; --svt-vsa-p: 0; transform: none; } 65% { --svt-vsa-k: 1; --svt-vsa-p: 0; transform: none; } 68% { --svt-vsa-p: 0; transform: none; } 70.5% { --svt-vsa-p: 1; transform: translateY(2px); } 73% { --svt-vsa-p: 0; transform: none; } 84% { --svt-vsa-k: 1; --svt-vsa-p: 0; transform: none; } 90%, 100% { --svt-vsa-k: 0; --svt-vsa-p: 0; transform: none; } }
@keyframes svtVsaMark { 0%, 7.5% { transform: translateX(var(--svt-vsa-x0, 0)); } 15%, 88% { transform: translateX(8px); } 96%, 100% { transform: translateX(var(--svt-vsa-x0, 0)); } }
@keyframes svtVsaWord { 0%, 7.5% { opacity: 1; transform: none; } 13%, 90% { opacity: 0; transform: translateY(-12px); } 91% { opacity: 0; transform: translateY(12px); } 96%, 100% { opacity: 1; transform: none; } }
@keyframes svtVsaRoll { 0%, 10% { opacity: 0; } 15%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes svtVsaEye { 0%, 57.5% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes svtVsaWin { 0%, 58% { transform: none; } 63%, 100% { transform: translateY(-5.5px); } }
@keyframes svtVsaList2 { 0%, 15% { transform: none; } 32.6% { transform: none; } 35.6% { transform: translateY(-17px); } 53.25% { transform: translateY(-17px); } 56.25%, 100% { transform: translateY(-34px); } }
@keyframes svtVsaList3 { 0%, 15% { transform: none; } 25.75% { transform: none; } 28.75% { transform: translateY(-17px); } 39.5% { transform: translateY(-17px); } 42.5% { transform: translateY(-34px); } 53.25% { transform: translateY(-34px); } 56.25%, 100% { transform: translateY(-51px); } }
@media (prefers-reduced-motion: reduce) { .svt-single-compare.svt-vsa, .svt-single-compare.svt-vsa * { animation: none !important; } .svt-single-compare.svt-vsa .svt-vsa__roll, .svt-single-compare.svt-vsa .svt-vsa__mark { display: none; } }

/* 135c (Michael, 2026-10-08): a page cached before 135b can still build four names against this stylesheet; give that
   list its own 4 s roll so the run still ends on "See who wins" and never stops on a brand. */
.svt-single-compare.svt-vsa .svt-vsa__list--4 { animation: svtVsaList4 4s cubic-bezier(.65, 0, .25, 1) 1 both; }
@keyframes svtVsaList4 { 0%, 15% { transform: none; } 22.31% { transform: none; } 25.31% { transform: translateY(-17px); } 32.63% { transform: translateY(-17px); } 35.63% { transform: translateY(-34px); } 42.94% { transform: translateY(-34px); } 45.94% { transform: translateY(-51px); } 53.25% { transform: translateY(-51px); } 56.25%, 100% { transform: translateY(-68px); } }

/* 141 (Michael, 2026-10-08: "these What we like and What holds it back boxes ... have big white spots"): from 1024px the two cards
   beside Usability keep the height they share with it, and their rows spread over that height, each point centred in its share,
   instead of four rows packed at the top over an empty half. Product page only; the phone and tablet layouts are unchanged. */
@media (min-width: 1024px) {
	.svt-pl-row.has-pc > .svt-pl-pc > .svt-pnc { display: flex; flex-direction: column; }
	.svt-pl-row.has-pc > .svt-pl-pc > .svt-pnc > ul.svt-pnc__list { flex: 1 1 auto; display: flex; flex-direction: column; }
	.svt-pl-row.has-pc > .svt-pl-pc > .svt-pnc > ul.svt-pnc__list > li.svt-pnc-row { flex: 1 1 auto; align-items: center; }
}

/* 142 (Michael, 2026-10-08): a criterion at 5 or under ends its open panel with a similar product that does better on it
   (svt-alternatives.php). 142b (his mockup): a small photo at the left, the score at the right, the reason cut to a few
   words; on a phone the reason drops under the photo row. The row's bar shows a striped stretch up to the
   alternative's score; 142c (Michael): only while the row is open, so a closed list stays plain and needs no key. No script. */
body.svt-pl .svt-pl-unote a.svt-alt { display: grid; grid-template-columns: minmax(0, 1fr) auto 10px; grid-template-areas: "head sc go" "why sc go"; column-gap: 12px; row-gap: 2px; align-items: center; margin: 12px 0 0; padding: 10px 14px; background: var(--svt-card, #fff); border: 1px solid rgba(0, 0, 0, .08); border-radius: 10px; color: var(--svt-pl-ink, #26231E); text-decoration: none !important; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; }
body.svt-pl .svt-pl-unote a.svt-alt.has-img { grid-template-columns: 56px minmax(0, 1fr) auto 10px; grid-template-areas: "img head sc go" "img why sc go"; padding-left: 10px; }
body.svt-pl .svt-pl-unote a.svt-alt .svt-alt__img { grid-area: img; display: block; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--svt-pl-tile, #F6F2EB); }
body.svt-pl .svt-pl-unote a.svt-alt .svt-alt__img img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; margin: 0; }
body.svt-pl .svt-pl-unote a.svt-alt .svt-alt__head { grid-area: head; display: flex; flex-direction: column; gap: 1px; min-width: 0; align-self: end; }
body.svt-pl .svt-pl-unote a.svt-alt .svt-alt__lab { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--svt-pl-brass, #8F6226); }
body.svt-pl .svt-pl-unote a.svt-alt .svt-alt__name { font-size: 15px; line-height: 1.35; font-weight: 700; color: var(--svt-pl-blue, #35589C); }
body.svt-pl .svt-pl-unote a.svt-alt .svt-alt__why { grid-area: why; align-self: start; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--svt-pl-slate, #655F55); }
body.svt-pl .svt-pl-unote a.svt-alt .svt-alt__why b, body.svt-pl .svt-pl-unote a.svt-alt .svt-alt__price { font-weight: 700; color: var(--svt-pl-ink, #26231E); white-space: nowrap; }
body.svt-pl .svt-pl-unote a.svt-alt .svt-alt__sc { grid-area: sc; font-size: 20px; line-height: 1; font-weight: 700; color: #3F5E3A; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.svt-pl .svt-pl-unote a.svt-alt .svt-alt__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.svt-pl .svt-pl-unote a.svt-alt .svt-alt__go { grid-area: go; justify-self: end; width: 8px; height: 8px; border-top: 2px solid var(--svt-pl-blue, #35589C); border-right: 2px solid var(--svt-pl-blue, #35589C); transform: rotate(45deg); }
body.svt-pl .svt-pl-unote a.svt-alt:hover { border-color: var(--svt-pl-blue, #35589C); box-shadow: 0 0 0 1px var(--svt-pl-blue, #35589C); }
body.svt-pl .svt-pl-unote a.svt-alt:focus-visible { outline: 2px solid var(--svt-click, #4974C4); outline-offset: 2px; }
@media (max-width: 600px) {
	body.svt-pl .svt-pl-unote a.svt-alt.has-img { grid-template-columns: 48px minmax(0, 1fr) auto 8px; grid-template-areas: "img head sc go" "why why why why"; row-gap: 8px; }
	body.svt-pl .svt-pl-unote a.svt-alt .svt-alt__img { width: 48px; height: 48px; }
	body.svt-pl .svt-pl-unote a.svt-alt .svt-alt__sc { font-size: 18px; }
}
body.svt-pl .svt-pl-ufold[open] > summary .svt-bar-track .svt-alt-ghost { position: absolute; top: 0; bottom: 0; left: var(--svt-alt-l); width: var(--svt-alt-w); background: repeating-linear-gradient(135deg, #556F50 0 2px, #B8CBB2 2px 5px); }
@media (prefers-reduced-motion: reduce) { body.svt-pl .svt-pl-unote a.svt-alt { transition: none; } }