/* SVT - category ranking pages (/best/). Draft - Category Ranking Pages 0.4.
   v2, 2026-09-17 (Michael's review): list items and price picks are the product card from
   svt-pvp.css (.pvp-alt), the score block is the category tiles' block, winners are the site
   green, and there is no technical (mono) type - that is for specification values only.
   Loads after svt-vs.css on single-svt_best.php and archive-svt_best.php.
   Everything is scoped to .svtvs--rank; the hub adds .svt-best-hub.
   v3, 2026-09-17 (Michael's second review): product photos sit on white, never on a tinted box
   with a multiply blend (it tints the photo itself); the score block sits beside the product and
   the buttons take the right of the card; the product page's solid icons; the glance list uses
   the score ring; every ring and bar animates the site's way; the field's dots drop in. */
.svtvs--rank .hero{padding-bottom:0}
/* the eyebrow: the date takes its own line on a phone rather than wrapping mid-date */
.svtvs--rank .rk-eyed:before{content:"\00b7";margin:0 7px}
.svtvs--rank .rk-answer{max-width:720px;margin:18px auto 0;font-size:17px;line-height:1.6;color:var(--body);text-wrap:pretty}
/* the figures sit at the top of the glance panel, spread across its width, with a hairline
   between them - part of the panel, not a row of loose chips (Michael, 2026-09-17) */
.svtvs--rank .rk-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--line);list-style:none}
.svtvs--rank .rk-facts li{padding:0 12px;border-left:1px solid var(--line);font-size:13px;line-height:1.35;color:var(--body);text-align:center;text-wrap:balance}
.svtvs--rank .rk-facts li:first-child{border-left:0}
.svtvs--rank .rk-facts b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.svtvs--rank .sec{margin-top:64px}
/* section intros run the full width of the section, so the heading and the cards stay close */
.svtvs--rank .sec > header p{max-width:none}
/* product photos: white box, hairline, no blend (a tinted box multiplied into the photo tints the product) */
.svtvs--rank .pvp-alt .pvp-alt__img,.svtvs--rank .rk-item--first .rk-img,.svtvs--rank .rk-g__img{background:#fff;border:1px solid var(--line,#E6E2DA)}
.svtvs--rank .pvp-alt .pvp-alt__img img{mix-blend-mode:normal}

/* the list at a glance */
.svtvs--rank .rk-glance{margin:36px 0 0;padding:16px 22px 10px}
.svtvs--rank .rk-g{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(5,auto);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:28px}
.svtvs--rank .rk-g li{border-top:1px solid var(--line)}
.svtvs--rank .rk-g a{display:grid;grid-template-columns:34px 44px minmax(0,1fr) auto 44px;gap:12px;align-items:center;padding:8px 10px;border:1px solid transparent;border-radius:var(--svt-radius-inner,8px);color:inherit;text-decoration:none}
.svtvs--rank .rk-g a:hover .rk-g__name{text-decoration:underline}
.svtvs--rank .rk-g__pos{font-size:16px;font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.svtvs--rank .rk-g li:first-child .rk-g__pos{color:var(--svt-added,#3B6633)}
/* number one is the site green here too, the way its card is */
.svtvs--rank .rk-g li:first-child{border-top-color:transparent}
.svtvs--rank .rk-g li:first-child a{background:#EDF2E9;border-color:#4A7C40}
.svtvs--rank .rk-g__img{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:4px}
.svtvs--rank .rk-g__img img{max-width:100%;max-height:100%;width:auto;height:auto}
.svtvs--rank .rk-g__name{min-width:0}
.svtvs--rank .rk-g__name b{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.2}
.svtvs--rank .rk-g__name small{display:block;font-size:13px;font-weight:500;color:#4A576B;line-height:1.3}
.svtvs--rank .rk-g__price{font-size:13.5px;line-height:1;color:var(--body);font-variant-numeric:tabular-nums}
.svtvs--rank .rk-g__score{display:flex;justify-content:flex-end}
/* the signature ring at list size; svt-vs.js fills it on first view like every other ring */
.svtvs--rank .rk-g .rk-g__score .svtdial.svt-midial--card{--svt-ring-sz:44px;--sz:44px;width:44px;height:44px;flex:0 0 auto}

/* shared */
.svtvs--rank .rk-g a:focus-visible{outline:2px solid var(--svt-click,#4974c4);outline-offset:2px}
/* the glance list folds on phones only: three rows, the rest behind one control */
/* the fold controls: the checkbox is fixed, so clicking the label never scrolls the page back
   to the top of the panel (Michael, 2026-09-17) */
.svtvs--rank .rk-gr{position:fixed;top:0;left:0;opacity:0;width:1px;height:1px;pointer-events:none}
.svtvs--rank .rk-listmore.rk-gmore{display:none}

/* field strip */
.svtvs--rank .rk-field{padding:26px 28px 20px}
.svtvs--rank .rk-strip{position:relative;height:var(--rk-h,90px);margin:8px 6px 0}
.svtvs--rank .rk-band{position:absolute;top:0;bottom:22px;background:rgba(18,33,59,.035);border-left:1px dashed var(--line)}
.svtvs--rank .rk-band span{position:absolute;top:4px;left:6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.55;white-space:nowrap}
.svtvs--rank .rk-dot{position:absolute;z-index:1;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#C9C3B8;bottom:calc(26px + var(--y,0) * 11px)}
.svtvs--rank .rk-dot.is-on{background:var(--a,#C8842B)}
.svtvs--rank .rk-dot.is-1{background:#4A7C40}
.svtvs--rank .rk-dot.has-lab{z-index:2}
.svtvs--rank .rk-dot b{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;line-height:1;white-space:nowrap;color:var(--ink);background:var(--card,#fff);padding:1px 3px;border-radius:3px}
.svtvs--rank .rk-dot b.is-1{color:var(--svt-added,#3B6633)}
/* the drop: with JS, every dot starts on the same line above the chart (--rk-from is its own distance
   to that line) and falls to its place, fading in as it goes and settling with a bounce. It falls under
   gravity - slow at the top, fastest at the floor. The order is left to right, each stack from the
   bottom up (--d, from the template), and every dot carries its own jitter (--j, also from the
   template) on both its start and its fall, so they land one at a time rather than in a line. The
   whole field is down inside a second and a half. The list's span and the labels follow. */
.svtvs--js.svtvs--rank .rk-field .rk-dot{--rk-from:calc(-1 * (var(--rk-h,90px) - 26px - var(--y,0) * 11px + 26px));opacity:0;transform:translateY(var(--rk-from))}
.svtvs--js.svtvs--rank .rk-field.is-seen .rk-dot{animation:rk-drop cubic-bezier(.45,.03,.75,.3) both;animation-duration:calc(.5s + var(--j,.5) * .34s);animation-delay:calc(var(--d,0) * 5ms + var(--j,.5) * 150ms)}
.svtvs--js.svtvs--rank .rk-field .rk-dot b,.svtvs--js.svtvs--rank .rk-field .rk-span{opacity:0;transition:opacity .35s ease}
.svtvs--js.svtvs--rank .rk-field.is-seen .rk-dot b,.svtvs--js.svtvs--rank .rk-field.is-seen .rk-span{opacity:1;transition-delay:calc(var(--rk-n,60) * 5ms + .75s)}
@keyframes rk-drop{0%{opacity:0;transform:translateY(var(--rk-from))}22%{opacity:1}68%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.33,0,.5,1)}80%{transform:translateY(-5px)}90%{transform:translateY(0);animation-timing-function:cubic-bezier(.33,0,.5,1)}95%{transform:translateY(-2px)}100%{opacity:1;transform:translateY(0)}}
.svtvs--rank .rk-axis{position:absolute;left:0;right:0;bottom:0;height:20px;border-top:1px solid var(--line)}
.svtvs--rank .rk-axis span{position:absolute;top:4px;transform:translateX(-50%);font-size:12px;line-height:1;opacity:.7;font-variant-numeric:tabular-nums}
.svtvs--rank .rk-span{position:absolute;bottom:22px;height:3px;background:var(--a,#C8842B);border-radius:2px}
/* the chart's key: the two figures and what the dots mean, in place of a paragraph */
.svtvs--rank .rk-keys--cap{justify-content:center;margin:14px 0 2px}
.svtvs--rank .rk-keys__dot{width:10px;height:10px;border-radius:50%;background:#C9C3B8}
.svtvs--rank .rk-keys__dot--on{background:var(--a,#C8842B)}
.svtvs--rank .rk-cap{font-size:13.5px;margin:14px 0 0;text-align:center}

/* the list: each item is the product card (.pvp-alt, svt-pvp.css) */
.svtvs--rank .rk-list{display:grid;gap:14px}
/* the list folds: five cards on a wide screen, three on a phone, the rest behind one control */
.svtvs--rank .rk-listr{position:fixed;top:0;left:0;opacity:0;width:1px;height:1px;pointer-events:none}
.svtvs--rank .rk-listr:not(:checked) ~ .rk-list .rk-item:nth-child(n+6){display:none}
.svtvs--rank .rk-listmore{display:flex;box-sizing:border-box;align-items:center;justify-content:center;gap:7px;margin:16px auto 0;padding:9px 18px;width:fit-content;border:1px solid #D6D1C7;border-radius:var(--svt-radius-control,8px);background:var(--card,#fff);font-size:13.5px;font-weight:700;line-height:1.2;color:var(--ink,#12213B);cursor:pointer;transition:border-color .2s,background .2s,color .2s,transform .2s}
.svtvs--rank .rk-listmore:hover{border-color:var(--svt-click,#4974C4);background:var(--b-soft,#EAF0FB);color:var(--svt-click,#4974C4);transform:translateY(-1px)}
.svtvs--rank .rk-listmore:after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.svtvs--rank .rk-listr:checked ~ .rk-listmore:after{transform:translateY(2px) rotate(225deg)}
.svtvs--rank .rk-listmore__s,.svtvs--rank .rk-listr:checked ~ .rk-listmore .rk-listmore__o{display:none}
.svtvs--rank .rk-listr:checked ~ .rk-listmore .rk-listmore__s{display:inline}
.svtvs--rank .rk-listmore__n{display:none}
.svtvs--rank .rk-listr:focus-visible ~ .rk-listmore{outline:2px solid var(--svt-click,#4974C4);outline-offset:2px}
/* the brands on the list, each to everything that brand sells */
.svtvs--rank .rk-brands{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.svtvs--rank .rk-brands a{display:inline-flex;align-items:baseline;gap:5px;padding:7px 12px;border:1px solid #D6D1C7;border-radius:var(--svt-radius-control,8px);background:var(--card,#fff);font-size:13px;line-height:1.2;color:var(--ink,#12213B);text-decoration:none;transition:border-color .2s,background .2s,color .2s,transform .2s}
.svtvs--rank .rk-brands a:hover,.svtvs--rank .rk-brands a:focus-visible{border-color:var(--svt-click,#4974C4);background:var(--b-soft,#EAF0FB);color:var(--svt-click,#4974C4);transform:translateY(-1px)}
.svtvs--rank .rk-brands b{font-weight:700}
.svtvs--rank .rk-brands span{color:#4A576B;font-variant-numeric:tabular-nums}
.svtvs--rank .rk-brands__w{margin-left:0}
.svtvs--rank .rk-brands svg{align-self:center;margin-left:3px}
.svtvs--rank .rk-brands a:hover span,.svtvs--rank .rk-brands a:focus-visible span{color:inherit}
.svtvs--rank .rk-brands svg{width:13px;height:13px;transition:transform .2s}
.svtvs--rank .rk-brands a:hover svg,.svtvs--rank .rk-brands a:focus-visible svg{transform:translateX(3px)}
.svtvs--rank .rk-item.pvp-alt{gap:14px;padding:16px 20px}
.svtvs--rank .rk-top{grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center}
/* the score block sits beside the product, not out at the card's edge */
@media (min-width:701px) and (max-width:1099px){
 .svtvs--rank .rk-top{grid-template-columns:72px minmax(0,250px) auto;justify-content:start;gap:22px}
}
/* wide screens: one top row - photo, name, score block, then the two buttons on the right -
   and the criteria and reasons under it. The top row's children join the card's grid. */
@media (min-width:1100px){
 .svtvs--rank .rk-item.pvp-alt{display:grid;grid-template-columns:72px minmax(0,260px) auto minmax(0,1fr);column-gap:24px;row-gap:14px;align-items:center}
 .svtvs--rank .rk-item .rk-top{display:contents}
 .svtvs--rank .rk-item .rk-imgwrap{grid-column:1;grid-row:1}
 .svtvs--rank .rk-item .rk-top > .pvp-alt__body{grid-column:2;grid-row:1}
 .svtvs--rank .rk-item .rk-top > .rk-blend,.svtvs--rank .rk-item .rk-top > .svt-scoreclus{grid-column:3;grid-row:1}
 .svtvs--rank .rk-item > .pvp-alt__foot{grid-column:4;grid-row:1;justify-self:end;align-self:center;margin:0;padding:0;border:0;flex-wrap:nowrap;gap:10px}
 .svtvs--rank .rk-item > .pvp-alt__foot .pvp-alt__buy{min-width:128px}
 .svtvs--rank .rk-item > .pvp-alt__foot .pvp-alt__go{white-space:nowrap}
 .svtvs--rank .rk-item > .rk-body{grid-column:1 / -1;grid-row:2}
}
/* Wide enough for it: the score block starts where the reasons under it start, so the card has one
   line down its middle. The name track is what is left of that column after the photo and the gaps
   (the body below is 5fr / 7fr with a 28px gap, and both grids measure the same width). */
@media (min-width:1200px){
 .svtvs--rank .rk-item.pvp-alt{grid-template-columns:72px minmax(0,calc((100% - 28px) * 5 / 12 - 92px)) auto minmax(0,1fr)}
}
.svtvs--rank .rk-imgwrap{position:relative}
.svtvs--rank .rk-item .rk-img{width:72px;height:72px}
.svtvs--rank .rk-item .rk-img img{width:62px;height:62px}
.svtvs--rank .rk-pos{position:absolute;top:-7px;left:-7px;z-index:2;min-width:24px;height:24px;display:grid;place-items:center;padding:0 6px;border-radius:var(--svt-radius-chip,4px);background:var(--ink,#12213B);color:#fff;font-size:13px;font-weight:700;line-height:1}
.svtvs--rank .rk-name{margin:0;font-size:18px;line-height:1.25}
.svtvs--rank .rk-name .pvp-alt__name{font-size:inherit}
/* the brand is the line that reads first; the model sits under it (Michael, 2026-09-17) */
.svtvs--rank .pvp-alt__name .pvp-n{display:block}
.svtvs--rank .pvp-alt__name .rk-bn{display:block;font-weight:700;color:var(--ink,#12213B);line-height:1.2}
.svtvs--rank .pvp-alt__name .pvp-m{display:block;margin-top:1px;font-size:.78em;font-weight:500;color:#4A576B;line-height:1.3}
.svtvs--rank .pvp-alt .pvp-alt__price{font-family:var(--svt-font-sans,sans-serif);font-weight:700;font-variant-numeric:tabular-nums}
/* names are two links: brand to its brand page, model to its product page */
.svtvs--rank .pvp-alt__name a,.svtvs--rank .rk-tbl__name a{color:inherit;text-decoration:none}
.svtvs--rank .pvp-alt__name a:hover,.svtvs--rank .pvp-alt__name a:focus-visible{color:var(--svt-click,#4974c4);text-decoration:underline;text-underline-offset:2px}
/* the row's photo and name are one link to the product; hovering lights the brand line */
.svtvs--rank .rk-tbl__t:hover b,.svtvs--rank .rk-tbl__t:focus-visible b{color:var(--svt-click,#4974c4);text-decoration:underline;text-underline-offset:2px}
.svtvs--rank .rk-tbl__img:hover,.svtvs--rank .rk-tbl__img:focus-visible{border-color:var(--svt-click,#4974c4)}
/* desktop: the score block at the product page's size (62px ring, 200px bars), not the tile's */
@media (min-width:701px){
 .svtvs--rank .rk-top .rk-blend.woocommerce .products.grid_woo .product .svt-loop-scores .radial-progress{--svt-ring-sz:62px;--sz:62px;width:62px!important;height:62px!important}
 .svtvs--rank .rk-top .rk-blend.woocommerce .products.grid_woo .product .svt-loop-scores .radial-progress .inset .percentage{font-size:26px!important}
 .svtvs--rank .rk-top .rk-blend.woocommerce .products.grid_woo .product .svt-loop-scores .svt-loop-parts{flex:0 0 200px!important;width:200px!important}
 .svtvs--rank .rk-top .rk-blend.woocommerce .products.grid_woo .product .svt-loop-scores .svt-loop-part-lbl{font-size:11px!important}
 .svtvs--rank .rk-top .rk-blend.woocommerce .products.grid_woo .product .svt-loop-scores .svt-loop-part-ico{width:13px!important;height:13px!important}
}
/* the product page's icons: solid marks in brass, whole (the tiles' 16px mask clipped them at 13px) */
.svtvs--rank .rk-top .rk-blend.woocommerce .products.grid_woo .product .svt-loop-scores--blend .svt-loop-part-ico{background-color:var(--svt-brass,#C8842B)!important;-webkit-mask-size:contain!important;mask-size:contain!important}
.svtvs--rank .rk-top .rk-blend.woocommerce .products.grid_woo .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}
.svtvs--rank .rk-top .rk-blend.woocommerce .products.grid_woo .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}
@media (max-width:700px){
 .svtvs--rank .rk-top .rk-blend.woocommerce .products.grid_woo .product .svt-loop-scores--blend .svt-loop-part-ico{width:12px!important;height:12px!important}
}
.svtvs--rank .rk-chip{display:inline-block;padding:3px 7px;border-radius:var(--svt-radius-chip,4px);background:var(--b-soft,#EAF0FB);color:var(--b,#4974C4);font-size:12px;font-weight:700;line-height:1.3}
.svtvs--rank .rk-chip--tie{background:var(--a-soft,#FBF1E2);color:#8a5a17}
/* the category tiles' score block; the wrappers only carry its stylesheet's scope */
.svtvs--rank .rk-blend.woocommerce,.svtvs--rank .rk-blend.woocommerce .products.grid_woo,.svtvs--rank .rk-blend.woocommerce .products.grid_woo .product{display:block;float:none;width:auto;min-height:0;margin:0;padding:0;border:0;background:none;box-shadow:none}
/* rehub-child sets .products margin-top and .product padding with !important for the tiles */
.svtvs--rank .rk-blend.woocommerce .products.grid_woo{margin:0!important}
.svtvs--rank .rk-blend.woocommerce .products.grid_woo .product{padding:0!important}
.svtvs--rank .rk-blend .products .product .svt-loop-scores{margin:0!important;padding:0!important}
.svtvs--rank .rk-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;padding:12px 0 0;border-top:1px solid color-mix(in srgb,var(--line,#E6E2DA) 80%,transparent)}
.svtvs--rank .rk-lab{font-size:11px;line-height:1.3;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin:0 0 8px}
.svtvs--rank .rk-crit{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:2px 10px;align-items:center;margin:0 0 7px}
.svtvs--rank .rk-crit span{font-size:13px;line-height:1.25}
.svtvs--rank .rk-crit b{grid-row:span 2;font-size:14px;font-weight:700;line-height:1;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.svtvs--rank .rk-crit i{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.svtvs--rank .rk-crit i:after{content:"";display:block;height:100%;width:0;background:var(--a,#C8842B);border-radius:3px;transition:width calc(var(--wn,1) * .9s) linear .15s}
.svtvs--rank .in .rk-crit i:after{width:var(--w)}
.svtvs--rank .rk-crit--na b{opacity:.45;font-weight:400}
.svtvs--rank .rk-why{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.svtvs--rank .rk-why li{position:relative;padding-left:20px;font-size:14px;line-height:1.5;color:#4A576B}
.svtvs--rank .rk-why li:before{content:"";position:absolute;left:2px;top:7px;width:8px;height:8px;border-radius:50%;border:2px solid var(--a,#C8842B)}
.svtvs--rank .rk-why .rk-why--wrong:before{border-color:#B4533A;border-radius:2px}
.svtvs--rank .rk-why .rk-why--mix:before{border-color:var(--b,#4974C4)}
.svtvs--rank .rk-whyr,.svtvs--rank .rk-whymore{display:none}
.svtvs--rank .rk-item .pvp-alt__foot{justify-content:flex-end;gap:14px}
.svtvs--rank .rk-item .pvp-alt__buy{margin-left:0;min-width:140px}
/* number one: the site's winner green */
.svtvs--rank .rk-item--first{border:2px solid #4A7C40;box-shadow:0 6px 22px rgba(59,102,51,.12)}
.svtvs--rank .rk-item--first .rk-pos{background:#4A7C40}
.svtvs--rank .rk-item--first .rk-img{background:#fff}
.svtvs--rank .rk-item--first .rk-name{font-size:21px}
.svtvs--rank .rk-role{display:inline-flex;align-items:center;gap:6px;color:var(--svt-added,#3B6633)}
.svtvs--rank .rk-role:before{content:"";width:8px;height:8px;border-radius:50%;background:#4A7C40}
/* the fold's checkbox is the panel's first child, so the first question drew the divider that
   :first-child was meant to suppress. And on a wide screen the fold starts after five. */
.svtvs--rank .vsfaq__item:first-of-type{border-top:0}
/* the fold's own control is styled for phones in svt-vs.css, so on a wide screen it printed as
   two bare labels at once. Here it is the site's "show more" control, the same one the list and
   the glance use, and the checkbox is fixed so opening it does not scroll the page (2026-09-17). */
.svtvs--rank .vsfaq-more__r{position:fixed;top:0;left:0;opacity:0;width:1px;height:1px;pointer-events:none}
@media (min-width:701px){
 .svtvs--rank .vsfaq--fold .vsfaq__item:nth-of-type(n+6){display:none}
 .svtvs--rank .vsfaq--fold .vsfaq-more__r:checked ~ .vsfaq__item{display:block}
 .svtvs--rank .vsfaq--fold .vsfaq-more{display:flex;align-items:center;justify-content:center;gap:7px;margin:16px auto 0;padding:9px 18px;width:fit-content;border:1px solid #D6D1C7;border-radius:var(--svt-radius-control,8px);background:var(--card,#fff);font-size:13.5px;font-weight:700;line-height:1.2;color:var(--ink,#12213B);cursor:pointer;transition:border-color .2s,background .2s,color .2s,transform .2s}
 .svtvs--rank .vsfaq--fold .vsfaq-more:hover{border-color:var(--svt-click,#4974C4);background:var(--b-soft,#EAF0FB);color:var(--svt-click,#4974C4);transform:translateY(-1px)}
 .svtvs--rank .vsfaq--fold .vsfaq-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}
 .svtvs--rank .vsfaq--fold .vsfaq-more__r:checked ~ .vsfaq-more:after{transform:translateY(2px) rotate(225deg)}
 .svtvs--rank .vsfaq--fold .vsfaq-more__shut{display:none}
 .svtvs--rank .vsfaq--fold .vsfaq-more__r:checked ~ .vsfaq-more .vsfaq-more__open{display:none}
 .svtvs--rank .vsfaq--fold .vsfaq-more__r:checked ~ .vsfaq-more .vsfaq-more__shut{display:inline}
 .svtvs--rank .vsfaq--fold .vsfaq-more__r:focus-visible ~ .vsfaq-more{outline:2px solid var(--svt-click,#4974C4);outline-offset:2px}
 .svtvs--rank .vsfaq-more .vsfaq-more__p{display:none}
}
@media (max-width:700px){
 .svtvs--rank .vsfaq-more .vsfaq-more__w{display:none}
}
.svtvs--rank .rk-next{text-align:center;font-size:14px;margin:18px 0 0}
.svtvs--rank .rk-next a{color:var(--svt-click,#4974c4);font-weight:700}

/* decisive criteria table */
.svtvs--rank .rk-dec{padding:26px 28px;--rk-c0:var(--a,#C8842B);--rk-c1:var(--a,#C8842B);--rk-c2:var(--a,#C8842B)}
/* one line of key, in place of a paragraph and four cards */
.svtvs--rank .rk-key{margin:0 0 16px;font-size:13px;line-height:1.5;color:#4A576B;text-wrap:pretty}
/* the legend: one card per criterion, then one for the two derived columns. It carries what the
   paragraph used to spell out, and it gives each column its colour. */
.svtvs--rank .rk-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;list-style:none;margin:16px 0 18px;padding:0}
.svtvs--rank .rk-legend__c{position:relative;padding:10px 12px 10px 14px;border:1px solid var(--line);border-radius:var(--svt-radius-inner,8px);background:var(--card,#fff)}
.svtvs--rank .rk-legend__c:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 3px 3px 0;background:var(--line)}
.svtvs--rank .rk-legend--0:before{background:var(--rk-c0)}
.svtvs--rank .rk-legend--1:before{background:var(--rk-c1)}
.svtvs--rank .rk-legend--2:before{background:var(--rk-c2)}
.svtvs--rank .rk-legend--k:before{background:var(--ink,#12213B)}
.svtvs--rank .rk-legend__c b{display:block;font-size:13px;line-height:1.25;color:var(--ink,#12213B)}
.svtvs--rank .rk-legend__c span{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:#4A576B}
.svtvs--rank .rk-legend--k{grid-column:span 2}
/* the score ring in a cell: the site's ring, painted still, with a light core so the number reads */
.svtvs--rank .rk-cring{--svt-ring-sz:38px;--sz:38px;display:block;margin:0 auto}
.svtvs--rank .rk-cring .inset{background:var(--card,#fff)!important;background-color:var(--card,#fff)!important}
.svtvs--rank .rk-tbl .rk-tbl__c .rk-cring .inset .percentage{color:var(--ink,#12213B)!important;font-size:15px!important;font-weight:700!important;line-height:1!important}
/* the 3-criteria score: a bar and the figure, so a column of numbers becomes a shape */
.svtvs--rank .rk-tbl__s{white-space:nowrap}
.svtvs--rank .rk-tbl__s i{display:inline-block;vertical-align:middle;width:56px;height:6px;margin-right:8px;border-radius:3px;background:var(--line);position:relative;overflow:hidden}
.svtvs--rank .rk-tbl__s i:after{content:"";position:absolute;top:0;bottom:0;left:0;width:0;border-radius:3px;background:var(--ink,#12213B);transition:width calc(var(--wn,1) * .9s) linear .15s}
.svtvs--rank .in .rk-tbl__s i:after{width:var(--w)}
.svtvs--rank .rk-tbl__s b{font-weight:700;color:var(--ink,#12213B);font-variant-numeric:tabular-nums}
/* the best on these three is marked by its green scores and its 1 in the last column - the row
   itself is not lit, because it is not the best overall (Michael, 2026-09-17).
   First overall is outlined in the site green here as it is everywhere else on the page, and it
   pops and glows with the rest of the winning marks once the bars have settled. */
.svtvs--rank .rk-tbl tbody tr.is-first td{box-shadow:inset 0 1px 0 #4A7C40,inset 0 -1px 0 #4A7C40}
.svtvs--rank .rk-tbl tbody tr.is-first td:first-child{box-shadow:inset 1px 0 0 #4A7C40,inset 0 1px 0 #4A7C40,inset 0 -1px 0 #4A7C40}
.svtvs--rank .rk-tbl tbody tr.is-first td:last-child{box-shadow:inset -1px 0 0 #4A7C40,inset 0 1px 0 #4A7C40,inset 0 -1px 0 #4A7C40}
/* the key: the marks themselves, not a paragraph about them (Michael, 2026-09-17) */
.svtvs--rank .rk-keys{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;list-style:none;margin:0 0 16px;padding:0}
.svtvs--rank .rk-keys li{display:flex;align-items:center;gap:6px;font-size:12.5px;line-height:1.2;color:#4A576B}
.svtvs--rank .rk-keys__n{font-weight:700;color:var(--ink,#12213B);font-variant-numeric:tabular-nums}
.svtvs--rank .rk-keys .rk-heat{min-width:28px;padding:2px 0;font-size:12.5px;text-align:center}
.svtvs--rank .rk-keys .rk-move-up,.svtvs--rank .rk-keys .rk-move-dn{font-size:11px}
.svtvs--rank .rk-keys .rk-move-up + .rk-move-dn{margin-left:-4px}
.svtvs--rank .rk-dec__why{font-size:14px;margin:0 0 6px;text-wrap:pretty}
.svtvs--rank .rk-dec__dis{font-size:14px;margin:0 0 6px;text-wrap:pretty}
.svtvs--rank .rk-dec__key{font-size:13px;margin:0 0 18px;opacity:.75;text-wrap:pretty}
.svtvs--rank .rk-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
/* every heading starts on the same line; a criterion's range hangs under it (Michael, 2026-09-17) */
.svtvs--rank .rk-tbl th{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:0 6px 10px;vertical-align:top;opacity:.7;line-height:1.25}
/* each criterion's range under its heading, so the table carries it instead of the paragraph above */
.svtvs--rank .rk-tbl th i{display:block;margin:3px 0 0;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
/* a thumbnail on every row and a bar under every score: the shape reads before the numbers do */
.svtvs--rank .rk-tbl__name{display:flex;align-items:center;gap:12px}
.svtvs--rank .rk-tbl__img{flex:0 0 auto;width:56px;height:56px;border-radius:8px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;padding:4px;box-sizing:border-box}
.svtvs--rank .rk-tbl__t{min-width:0}
.svtvs--rank .rk-tbl__t b{display:block;font-size:14.5px;font-weight:700;line-height:1.25;color:var(--ink,#12213B)}
.svtvs--rank .rk-tbl__m{display:block;font-size:13px;font-weight:500;line-height:1.3;color:#4A576B}
.svtvs--rank .rk-tbl__img img{max-width:100%;max-height:100%;width:auto;height:auto}
.svtvs--rank .rk-tbl td:nth-child(2){overflow:hidden}
.svtvs--rank .rk-tbar{display:block;width:64px;max-width:100%;height:4px;margin:6px auto 0;border-radius:2px;background:var(--line);position:relative;overflow:hidden}
.svtvs--rank .rk-tbar:after{content:"";position:absolute;top:0;bottom:0;left:0;width:0;border-radius:2px;background:var(--a,#C8842B);transition:width calc(var(--wn,1) * .9s) linear .15s}
.svtvs--rank .in .rk-tbar:after{width:var(--w)}
.svtvs--rank .rk-tbl__c .rk-heat{display:inline-block;min-width:34px;padding:2px 0;font-size:15px;font-weight:700;color:var(--ink,#12213B)}
.svtvs--rank .rk-tbl__c.is-win .rk-heat{color:var(--svt-added,#3B6633)}
.svtvs--rank .rk-tbl__c.is-win .rk-tbar:after{background:#4A7C40}
.svtvs--rank .rk-tbl .rk-tbl__c.is-win .rk-cring{--svt-ring-fill:#4A7C40}
.svtvs--rank .rk-tbl .rk-tbl__c.is-win .rk-cring .inset .percentage{color:var(--svt-added,#3B6633)!important}
.svtvs--rank .rk-tbl th:nth-child(2){text-align:left}
.svtvs--rank .rk-tbl td{border-top:1px solid var(--line);padding:9px 6px;text-align:center;font-variant-numeric:tabular-nums}
.svtvs--rank .rk-tbl td:nth-child(2){text-align:left;font-family:inherit;color:var(--ink);font-weight:600}
.svtvs--rank .rk-tbl td:nth-child(2) small{display:block;font-weight:400;color:var(--body);font-size:11.5px}
.svtvs--rank .rk-heat{display:inline-block;min-width:30px;padding:4px 0;border-radius:var(--svt-radius-chip,4px);color:var(--ink);font-weight:600}
.svtvs--rank .rk-heat.is-win{background:#EDF2E9;box-shadow:inset 0 0 0 1px #4A7C40;color:var(--svt-added,#3B6633);font-weight:700}
.svtvs--rank .rk-heat--na{background:transparent;opacity:.45;font-weight:400}
/* the table folds to the same rows the list shows - five on a wide screen, three on a phone -
   so the same products are on the page wherever you look (Michael, 2026-09-17) */
.svtvs--rank .rk-tblr{position:fixed;top:0;left:0;opacity:0;width:1px;height:1px;pointer-events:none}
.svtvs--rank .rk-tblr:not(:checked) ~ .rk-tbl tbody tr:nth-child(n+6){display:none}
.svtvs--rank .rk-tblmore{margin-top:14px}
.svtvs--rank .rk-tblr:checked ~ .rk-tblmore:after{transform:translateY(2px) rotate(225deg)}
.svtvs--rank .rk-tblr:checked ~ .rk-tblmore .rk-listmore__o{display:none}
.svtvs--rank .rk-tblr:checked ~ .rk-tblmore .rk-listmore__s{display:inline}
.svtvs--rank .rk-tblr:focus-visible ~ .rk-tblmore{outline:2px solid var(--svt-click,#4974C4);outline-offset:2px}
.svtvs--rank .rk-move-up{color:#2E7D4F}
.svtvs--rank .rk-move-dn{color:#B4533A}

/* findings, cut, movement */
/* findings as cards: the kit's icon in a tinted disc, a number, then the sentence */
.svtvs--rank .rk-finds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.svtvs--rank .rk-find{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:var(--svt-radius-card,12px);padding:16px 18px;font-size:14.5px;line-height:1.5;text-wrap:pretty}
.svtvs--rank .rk-find__i{position:relative;flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--a-soft,#FBF1E2);display:grid;place-items:center}
.svtvs--rank .rk-find__i i{width:24px;height:24px;background-color:var(--a,#C8842B);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
/* the card leads with what it is about, then the finding */
.svtvs--rank .rk-find__t b{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink,#12213B);opacity:.62;margin:0 0 3px}
.svtvs--rank .rk-find--warranty .rk-find__i{background:var(--b-soft,#EAF0FB)}
.svtvs--rank .rk-find--warranty .rk-find__i i{background-color:var(--b,#4974C4)}
.svtvs--rank .rk-find--brands .rk-find__i{background:#EDF2E9}
.svtvs--rank .rk-find--brands .rk-find__i i{background-color:#4A7C40}
.svtvs--rank .rk-find__t{align-self:center;color:#4A576B}
.svtvs--rank .rk-cut{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
/* the price picks are the site's product card from svt-pvp.css, the same card the comparison
   pages use - nothing here redesigns it (Michael, 2026-09-17: "we keep redesigning the same cards
   over and over"). Two rules only: a long model name wraps instead of running under the ring, and
   the ring is set to the card's size because css/svt-score-ring.css prints last and would draw the
   numeral for a 96px ring. */
.svtvs--rank .rk-cutcard .pvp-alt__name .pvp-m{white-space:normal;overflow-wrap:anywhere}
.svtvs--rank .rk-cut .pvp-alt__dial .svtdial.svt-midial--card{--svtvs-dial:54px;--svt-ring-sz:54px;--sz:54px;width:54px;height:54px}
.svtvs--rank .rk-cut .pvp-alt__dial{margin-right:6px}
.svtvs--rank .rk-move{padding:22px 26px}
.svtvs--rank .rk-move p{margin:0;font-size:14.5px}
/* the causes are a row of marks, not a sentence listing them (Michael, 2026-09-17) */
.svtvs--rank .rk-move__lead b{color:var(--ink,#12213B)}
.svtvs--rank .rk-causes{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:12px 0 0;padding:0}
.svtvs--rank .rk-causes li{display:flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--line);border-radius:var(--svt-radius-chip,4px);background:var(--card,#fff);font-size:13px;line-height:1.3;color:#4A576B}
.svtvs--rank .rk-causes li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a,#C8842B);flex:0 0 auto}

.svtvs--rank .rk-move__ex{margin:16px 0 0;padding:14px 0 0;border-top:1px dashed var(--line)}
.svtvs--rank .rk-move__ex ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.svtvs--rank .rk-move__ex li{font-size:14px;line-height:1.5}
.svtvs--rank .rk-moves{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.svtvs--rank .rk-moves li{font-size:14px;line-height:1.5}
.svtvs--rank .is-boxed img{border-radius:6px}
.svtvs--rank .rk-below{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.svtvs--rank .rk-below li{background:var(--card);border:1px solid var(--line);border-radius:var(--svt-radius-card,12px);padding:12px 16px;font-size:14px}
.svtvs--rank .rk-below a{color:var(--ink);font-weight:700}
.svtvs--rank .rk-below span{display:block;font-size:13px;line-height:1.4;opacity:.8;margin-top:2px}

/* the winner's green lands last: every ring and bar has finished (900ms) before the winning
   marks pop once and glow, so the eye is pulled to them at the end (Michael, 2026-09-17) */
@keyframes rk-win{0%{transform:none;box-shadow:0 0 0 0 rgba(74,124,64,0)}
 14%{transform:scale(var(--rk-pop,1.03));box-shadow:0 0 0 6px rgba(74,124,64,.20)}
 30%{transform:none;box-shadow:0 0 0 11px rgba(74,124,64,0)}
 46%{transform:scale(calc(1 + (var(--rk-pop,1.03) - 1) * .6));box-shadow:0 0 0 5px rgba(74,124,64,.14)}
 62%{transform:none;box-shadow:0 0 0 10px rgba(74,124,64,0)}
 100%{transform:none;box-shadow:0 0 0 0 rgba(74,124,64,0)}}
.svtvs--rank .in .rk-g li:first-child a{animation:rk-win 1.7s ease-out 1.15s 1 both}
.svtvs--rank .in .rk-tbl .rk-heat.is-win{--rk-pop:1.10;display:inline-block;animation:rk-win 1.7s ease-out 1.15s 1 both}
.svtvs--rank .in .rk-item--first .rk-pos{--rk-pop:1.12;animation:rk-win 1.7s ease-out 1.15s 1 both}
.svtvs--rank .in .rk-tbl tbody tr.is-first{animation:rk-win 1.7s ease-out 1.15s 1 both}

/* the /best/ hub */
/* hub cards (archive-svt_best.php). The hub loads svt-vs-hub.css, not svt-vs.css, so every token carries its fallback */
.svt-best-hub .rk-hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px;margin:0}
.svt-best-hub .rk-hubcard{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center;background:var(--svt-card,#fff);border:1px solid var(--svt-hairline,#E5E1D8);border-radius:var(--svt-radius-card,12px);box-shadow:0 1px 2px rgba(18,33,59,.04);padding:16px;color:inherit;text-decoration:none;transition:border-color .16s ease}
.svt-best-hub .rk-hubcard:hover,.svt-best-hub .rk-hubcard:focus-visible{border-color:var(--svt-click,#4974c4)}
.svt-best-hub .rk-hubcard__img{width:88px;height:88px;border-radius:10px;background:#fff;border:1px solid var(--svt-hairline,#E5E1D8);display:flex;align-items:center;justify-content:center;padding:6px}
.svt-best-hub .rk-hubcard__img img{max-width:100%;max-height:100%;width:auto;height:auto}
.svt-best-hub .rk-hubcard__eye{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#C8842B}
.svt-best-hub .rk-hubcard__t{display:block;font-size:17px;font-weight:700;color:var(--svt-ink,#12213B);line-height:1.25;margin:2px 0 4px}
.svt-best-hub .rk-hubcard__s{display:block;font-size:13px;line-height:1.4;color:var(--svt-slate,#79746A)}
.svt-best-hub .rk-hubfoot{margin:28px 0 0}
.svt-best-hub .rk-hubfoot a{color:var(--svt-click,#4974C4)}
@media (max-width:700px){.svt-best-hub .rk-hubcard{grid-template-columns:64px minmax(0,1fr);padding:12px}.svt-best-hub .rk-hubcard__img{width:64px;height:64px}.svt-best-hub .rk-hubcard__t{font-size:16px}}
@media (prefers-reduced-motion:reduce){.svt-best-hub .rk-hubcard{transition:none}}

@media (max-width:900px){
 .svtvs--rank .rk-g{grid-template-rows:none;grid-auto-flow:row}
 .svtvs--rank .rk-cut{grid-template-columns:1fr}
 .svtvs--rank .rk-cutcard .pvp-alt__foot{justify-content:flex-end;gap:10px}
 .svtvs--rank .rk-cutcard .pvp-alt__buy{margin-left:0}
}
@media (max-width:700px){
 .svtvs--rank .rk-eyed{display:block}
 .svtvs--rank .rk-eyed:before{content:none}
 .svtvs--rank .sec{margin-top:44px}
 /* phones: the brand row scrolls sideways rather than stacking five deep before the list */
 /* phones: the names alone, wrapped and centred - a row that scrolls sideways reads as a page
    cut off at the edge (Michael, 2026-09-17) */
 .svtvs--rank .rk-brands{gap:6px;margin:0 0 14px}
 .svtvs--rank .rk-brands a{padding:6px 10px;font-size:12.5px;white-space:nowrap}
 .svtvs--rank .rk-brands__w{display:none}
 .svtvs--rank .rk-list{gap:10px}
 .svtvs--rank .rk-listr:not(:checked) ~ .rk-list .rk-item:nth-child(n+4){display:none}
 .svtvs--rank .rk-listmore__w{display:none}
 .svtvs--rank .rk-listmore__n{display:inline}
 .svtvs--rank .rk-listmore{width:100%;margin-top:12px}
 .svtvs--rank .rk-item.pvp-alt{padding:12px 12px 12px;gap:10px}
 .svtvs--rank .rk-top{grid-template-columns:64px minmax(0,1fr);gap:4px 12px;align-items:start}
 .svtvs--rank .rk-lab{margin:0 0 6px}
 .svtvs--rank .rk-body{padding-top:10px}
 /* phones: one reason shows; the rest wait behind one control (the FAQ pattern on product pages) */
 .svtvs--rank .rk-whybox{position:relative}
 .svtvs--rank .rk-whyr{display:block;position:fixed;top:0;left:0;opacity:0;width:1px;height:1px;pointer-events:none}
 .svtvs--rank .rk-whyr:not(:checked) ~ .rk-why li:nth-child(n+2){display:none}
 .svtvs--rank .rk-whymore{display:inline-flex;margin:4px 0 0 20px;font-size:13px;line-height:1.4;font-weight:700;color:var(--svt-click,#4974C4);cursor:pointer}
 .svtvs--rank .rk-whymore__s,.svtvs--rank .rk-whyr:checked ~ .rk-whymore .rk-whymore__o{display:none}
 .svtvs--rank .rk-whyr:checked ~ .rk-whymore .rk-whymore__s{display:inline}
 .svtvs--rank .rk-whyr:focus-visible ~ .rk-whymore{outline:2px solid var(--svt-click,#4974C4);outline-offset:2px;border-radius:4px}
 .svtvs--rank .rk-item .rk-img{width:64px;height:64px}
 .svtvs--rank .rk-item .rk-img img{width:54px;height:54px}
 .svtvs--rank .rk-top .rk-blend,.svtvs--rank .rk-top .svt-scoreclus{grid-column:2}
 .svtvs--rank .rk-name{font-size:17px}
 .svtvs--rank .rk-item--first .rk-name{font-size:19px}
 .svtvs--rank .rk-body{grid-template-columns:1fr;gap:12px}
 .svtvs--rank .rk-crits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 .svtvs--rank .rk-crits .rk-lab{grid-column:1 / -1;margin:0}
 .svtvs--rank .rk-crit{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;margin:0;align-items:end}
 .svtvs--rank .rk-crit span{font-size:11.5px}
 .svtvs--rank .rk-crit b{grid-row:auto}
 .svtvs--rank .rk-crit i{grid-column:1 / -1}
 .svtvs--rank .rk-why li{font-size:13.5px;line-height:1.45}
 .svtvs--rank .rk-whyr:not(:checked) ~ .rk-why li:first-child{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
 .svtvs--rank .rk-whyr:not(:checked) ~ .rk-why li:first-child:only-child{display:block;-webkit-line-clamp:none}
 /* phones: the two buttons are equal halves of the row, not one small and one wide with a
    gap of white between them (Michael, 2026-09-17) */
 .svtvs--rank .rk-item .pvp-alt__foot{flex-wrap:nowrap;justify-content:stretch;gap:10px}
 .svtvs--rank .rk-item .pvp-alt__go{flex:1 1 0;min-width:0;justify-content:center;padding-left:8px;padding-right:8px}
 .svtvs--rank .rk-item .pvp-alt__buy{flex:1 1 0;min-width:0;max-width:none;margin-left:0}
 .svtvs--rank .rk-field,.svtvs--rank .rk-glance{padding:14px 14px 8px}
 /* two rows of two at this width; the date is in the eyebrow at the top of the page, so the
    fifth figure is not repeated here */
 .svtvs--rank .rk-facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:9px;margin:0 0 12px;padding:0 0 12px}
 .svtvs--rank .rk-facts li{padding:0 8px;font-size:12.5px}
 .svtvs--rank .rk-facts li:nth-child(odd){border-left:0}
 .svtvs--rank .rk-facts li:nth-child(5){display:none}
 .svtvs--rank .rk-dec,.svtvs--rank .rk-move{padding:16px}
 /* the three criteria are named on every row of the table below, so the subheading does not
    spend three lines naming them again here (Michael, 2026-09-17) */
 .svtvs--rank .sec--dec > header p{display:none}
 .svtvs--rank .rk-dec__why,.svtvs--rank .rk-dec__dis,.svtvs--rank .rk-move p{font-size:14px;line-height:1.55}
 .svtvs--rank .rk-g a{grid-template-columns:30px 40px minmax(0,1fr) 40px;gap:10px}
 .svtvs--rank .rk-gr:not(:checked) ~ .rk-g li:nth-child(n+4){display:none}
 .svtvs--rank .rk-listmore.rk-gmore{display:flex;width:100%;margin:12px 0 4px;padding:8px 14px;font-size:13px}
 .svtvs--rank .rk-gr:checked ~ .rk-gmore .rk-listmore__o{display:none}
 .svtvs--rank .rk-gr:checked ~ .rk-gmore .rk-listmore__s{display:inline}
 .svtvs--rank .rk-gr:checked ~ .rk-gmore:after{transform:translateY(2px) rotate(225deg)}
 .svtvs--rank .rk-gr:focus-visible ~ .rk-gmore{outline:2px solid var(--svt-click,#4974C4);outline-offset:2px}
 .svtvs--rank .rk-g .rk-g__score .svtdial.svt-midial--card{--svt-ring-sz:40px;--sz:40px;width:40px;height:40px}
 .svtvs--rank .rk-g__img{width:40px;height:40px}
 .svtvs--rank .rk-g__price{display:none}
 .svtvs--rank .rk-g__name{font-size:14px}
 .svtvs--rank .rk-band span{font-size:9px;left:3px}
 /* the field on phones: 0.1-point columns (--xp, --yp from the template), smaller dots, only the
    number one labelled - 2 and 3 sit on top of each other at this width */
 .svtvs--rank .rk-strip{height:var(--rk-hp,var(--rk-h,90px));margin:8px 2px 0}
 .svtvs--rank .rk-dot{left:var(--xp)!important;width:8px;height:8px;margin-left:-4px;bottom:calc(26px + var(--yp,0) * 10px)}
 .svtvs--js.svtvs--rank .rk-field .rk-dot{--rk-from:calc(-1 * (var(--rk-hp,var(--rk-h,90px)) - 26px - var(--yp,0) * 10px + 24px))}
 /* no dot labels at this width: they have nowhere to sit without covering a dot or the edge */
 .svtvs--rank .rk-dot b{display:none}
 .svtvs--rank .rk-finds{grid-template-columns:1fr}
 .svtvs--rank .rk-find{gap:12px;padding:14px;font-size:14px}
 .svtvs--rank .rk-find__i{width:40px;height:40px}
 .svtvs--rank .rk-find__i i{width:21px;height:21px}
 /* the table on phones: each product is its own block - place, photo, name and its rank on one line,
    then one labelled row per criterion with its bar. No headings, nothing to scroll sideways. */
 .svtvs--rank .rk-tbl,.svtvs--rank .rk-tbl tbody{display:block}
 .svtvs--rank .rk-tbl thead{display:none}
 .svtvs--rank .rk-tbl tbody tr.is-first{border-color:#4A7C40}
 .svtvs--rank .rk-tbl tbody tr.is-first td,.svtvs--rank .rk-tbl tbody tr.is-first td:first-child,.svtvs--rank .rk-tbl tbody tr.is-first td:last-child{box-shadow:none}
 .svtvs--rank .rk-tbl tbody tr{display:grid;grid-template-columns:22px 56px minmax(0,1fr) auto;column-gap:10px;row-gap:6px;align-items:center;margin:10px 0 0;padding:12px 10px 14px;border:1px solid var(--line);border-radius:var(--svt-radius-inner,8px)}
 .svtvs--rank .rk-tbl td{display:block;border:0;padding:0;text-align:left}
 .svtvs--rank .rk-tbl .rk-tbl__pos{grid-column:1;grid-row:1;font-weight:700;color:var(--ink);font-size:14px}
 .svtvs--rank .rk-tbl .rk-tbl__name{display:contents}
 .svtvs--rank .rk-tbl__img{grid-column:2;grid-row:1;width:56px;height:56px;margin:0}
 .svtvs--rank .rk-tbl .rk-tbl__t{grid-column:3;grid-row:1;min-width:0}
 .svtvs--rank .rk-tbl .rk-tbl__t b{font-size:15.5px}
 .svtvs--rank .rk-tbl .rk-tbl__m{font-size:12.5px}
 .svtvs--rank .rk-tbl .rk-tbl__cr{grid-column:4;grid-row:1;text-align:right;font-weight:700;color:var(--ink);font-size:13.5px;white-space:nowrap}
 .svtvs--rank .rk-tbl td.rk-tbl__c{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:baseline;margin:2px 0 0}
 .svtvs--rank .rk-tbl td.rk-tbl__c:before{content:attr(data-l);font-size:12.5px;line-height:1.2;color:#4A576B;text-align:left}
 .svtvs--rank .rk-cring{display:none}
 .svtvs--rank .rk-tbl td.rk-tbl__c .rk-heat{display:inline-block;font-size:13.5px;min-width:30px;padding:1px 6px;text-align:center}
 .svtvs--rank .rk-tbar{display:block}
 .svtvs--rank .rk-legend{grid-template-columns:1fr;gap:8px;margin:12px 0 14px}
 .svtvs--rank .rk-legend--k{grid-column:auto}
 .svtvs--rank .rk-tbl td.rk-tbl__c .rk-tbar{grid-column:1 / -1;width:100%;margin:5px 0 0}
 .svtvs--rank .rk-tbl .rk-hide-s{display:none}
 .svtvs--rank .rk-tblr:not(:checked) ~ .rk-tbl tbody tr:nth-child(n+4){display:none}
 .svtvs--rank .rk-tblmore{width:100%}
}
@media (prefers-reduced-motion:reduce){
 .svtvs--rank .rk-tbar:after{transition:none}
 .svtvs--rank .rk-listmore,.svtvs--rank .rk-listmore:after,.svtvs--rank .vsfaq-more,.svtvs--rank .vsfaq-more:after{transition:none}
 .svtvs--rank .rk-listmore:hover,.svtvs--rank .vsfaq-more:hover{transform:none}
 .svtvs--js.svtvs--rank .rk-field .rk-dot,.svtvs--js.svtvs--rank .rk-field.is-seen .rk-dot{animation:none;opacity:1;transform:none}
 .svtvs--js.svtvs--rank .rk-field .rk-dot b,.svtvs--js.svtvs--rank .rk-field .rk-span{opacity:1;transition:none}
 .svtvs--rank .rk-crit i:after{transition:none}
 .svtvs--rank .rk-brands a,.svtvs--rank .rk-brands svg{transition:none}
 .svtvs--rank .rk-brands a:hover{transform:none}
 .svtvs--rank .in .rk-g li:first-child a,.svtvs--rank .in .rk-tbl .rk-heat.is-win,.svtvs--rank .in .rk-item--first .rk-pos,.svtvs--rank .in .rk-tbl tbody tr.is-first{animation:none}
}