/* SVT - answer pages (/answers/). Block 78, SVT Draft - Search and Routing 0.7 Part 7.
   The page is the ranking page's chrome (svt-best.css, .svtvs--rank) and its product card
   (svt-pvp.css); this file holds only what an answer adds, scoped to .svtvs--ans and the hub's
   .svt-ans-hub. Text tokens are the site's ink and body greys on cream and white (Content
   Standards Part 9): no raw brand colour as text, no opacity on text. */

/* the lines under the answer: the scope notes and the "no data on file" counts */
.svtvs--ans .ans-line{max-width:720px;margin:10px auto 0;font-size:14.5px;line-height:1.55;color:var(--body,#4A576B);text-align:center;text-wrap:pretty}
.svtvs--ans .hero .rk-answer{font-size:19px;font-weight:600;color:var(--ink,#12213B)}

/* the glance panel carries the figures and which fields were read */
.svtvs--ans .ans-glance{padding:16px 22px 14px}
.svtvs--ans .ans-glance .rk-facts{margin-bottom:12px}
.svtvs--ans .ans-read{margin:0;font-size:13.5px;line-height:1.5;color:var(--body,#4A576B);text-align:center;text-wrap:pretty}
.svtvs--ans .ans-read a{color:var(--svt-click-ink,#35589C);font-weight:700}

/* a breakdown: label, bar, count. Text-valued breakdowns drop the bar. */
.svtvs--ans .ans-bdpanel{padding:18px 24px}
.svtvs--ans .ans-bd{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.svtvs--ans .ans-bd li{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) 44px;gap:14px;align-items:center;font-size:14px;line-height:1.3}
.svtvs--ans .ans-bd--text li{grid-template-columns:minmax(0,240px) minmax(0,1fr)}
.svtvs--ans .ans-bd__l{color:var(--ink,#12213B);font-weight:600;min-width:0;overflow-wrap:anywhere}
.svtvs--ans .ans-bd__l a{color:var(--svt-click-ink,#35589C);text-decoration:underline;text-underline-offset:2px}
.svtvs--ans .ans-bd__bar{display:block;height:8px;border-radius:4px;background:var(--line,#E6E2DA);overflow:hidden}
.svtvs--ans .ans-bd__bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--a,#C8842B);transition:width .9s ease .15s}
.svtvs--ans .in .ans-bd__bar i{width:var(--w)}
.svtvs--ans .ans-bd__v{text-align:right;font-weight:700;color:var(--ink,#12213B);font-variant-numeric:tabular-nums}
.svtvs--ans .ans-bd__t{color:var(--body,#4A576B)}

/* the FTC line sits above the first product, centred like the rest of the section intro */
.svtvs--ans .ans-rows .svt-disclosure{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--body,#4A576B);text-align:center}
.svtvs--ans .ans-rows .svt-disclosure a{color:var(--svt-click-ink,#35589C)}

/* the matching value on a card (a filter life, a country) */
.svtvs--ans .ans-val{margin-top:6px}

/* the cards fold: nine on a wide screen, three on a phone, the rest behind one control */
.svtvs--ans .ans-rr{position:fixed;top:0;left:0;opacity:0;width:1px;height:1px;pointer-events:none}
.svtvs--ans .ans-rr:not(:checked) ~ .rk-cut .rk-cutcard:nth-child(n+10){display:none}
.svtvs--ans .ans-rr:checked ~ .ans-more:after{transform:translateY(2px) rotate(225deg)}
.svtvs--ans .ans-rr:checked ~ .ans-more .rk-listmore__o{display:none}
.svtvs--ans .ans-rr:checked ~ .ans-more .rk-listmore__s{display:inline}
.svtvs--ans .ans-rr:focus-visible ~ .ans-more{outline:2px solid var(--svt-click,#4974C4);outline-offset:2px}
.svtvs--ans .rk-cut .pvp-alt__foot{justify-content:flex-end;gap:10px}
.svtvs--ans .rk-cut .pvp-alt__buy{margin-left:0}

/* the ranked lists are link chips, the brand row's control */
.svtvs--ans .ans-lists{justify-content:flex-start}
/* with script the cards open twelve at a time; the control shows how many come next */
.svtvs--ans .rk-cut .rk-cutcard.ans-hid{display:none}
.svtvs--ans .ans-more.is-open:after{transform:translateY(2px) rotate(225deg)}
.svtvs--ans .ans-more.is-open .rk-listmore__o{display:none}
.svtvs--ans .ans-more.is-open .rk-listmore__s{display:inline}
.svtvs--ans .ans-more:focus-visible{outline:2px solid var(--svt-click,#4974C4);outline-offset:2px}

/* what this means: three short points, not a paragraph */
.svtvs--ans .ans-mean{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.svtvs--ans .ans-mean li{padding:14px 16px;border:1px solid color-mix(in srgb,var(--line,#E6E2DA) 80%,transparent);border-left:3px solid var(--a,#C8842B);border-radius:var(--svt-radius-inner,8px);background:var(--card,#fff);font-size:14.5px;line-height:1.5;color:var(--body,#4A576B);text-wrap:pretty}
.svtvs--ans .ans-mean b{display:block;margin-bottom:2px;font-size:15px;font-weight:700;color:var(--ink,#12213B)}

/* related questions: the question is the link, its answer under it */
.svtvs--ans .ans-rel a{color:var(--svt-click-ink,#35589C);text-decoration:underline;text-underline-offset:2px}
.svtvs--ans .ans-rel span{color:var(--body,#4A576B)}

/* the rank line on a card is the site's compact one (svt-rank.css); here it sits under the price */
.svtvs--ans .rk-cutcard .svt-rank--compact{margin:3px 0 0;font-size:12px}

/* the ranked lists: a card per list, its top three in pictures, the whole card one link */
.svtvs--ans .ans-rlists{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
.svtvs--ans .ans-rlist{display:grid;gap:8px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--line,#E6E2DA) 80%,transparent);border-radius:var(--svt-radius-card,12px);background:var(--card,#fff);box-shadow:0 1px 2px rgba(18,33,59,.04);color:inherit;text-decoration:none;transition:border-color .16s ease,transform .16s ease}
.svtvs--ans .ans-rlist:hover,.svtvs--ans .ans-rlist:focus-visible{border-color:var(--svt-click,#4974C4);transform:translateY(-1px)}
.svtvs--ans .ans-rlist__imgs{display:flex;gap:8px}
.svtvs--ans .ans-rlist__img{position:relative;width:64px;height:64px;border:1px solid var(--line,#E6E2DA);border-radius:var(--svt-radius-inner,8px);background:#fff;display:flex;align-items:center;justify-content:center;padding:4px;box-sizing:border-box}
.svtvs--ans .ans-rlist__img img{max-width:100%;max-height:100%;width:auto;height:auto}
.svtvs--ans .ans-rlist__img b{position:absolute;top:-6px;left:-6px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px;border-radius:var(--svt-radius-chip,4px);background:var(--ink,#12213B);color:#fff;font-size:11.5px;font-weight:700;line-height:1}
.svtvs--ans .ans-rlist__img:first-child b{background:#4A7C40}
.svtvs--ans .ans-rlist__t{font-size:17px;font-weight:700;line-height:1.25;color:var(--ink,#12213B)}
.svtvs--ans .ans-rlist__s{font-size:13px;line-height:1.45;color:var(--body,#4A576B)}
.svtvs--ans .ans-rlist__go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--svt-click-ink,#35589C)}
.svtvs--ans .ans-rlist__go svg{width:13px;height:13px;transition:transform .2s}
.svtvs--ans .ans-rlist:hover .ans-rlist__go svg{transform:translateX(3px)}

/* the ask box on the hub: type a question, matching answers come up under it */
.svt-ans-hub .ans-ask{position:relative;max-width:720px;margin:6px 0 28px}
.svt-ans-hub .ans-ask__lab{display:block;margin:0 0 8px;font-size:15px;font-weight:700;color:var(--svt-ink,#12213B)}
.svt-ans-hub .ans-ask__in{width:100%;box-sizing:border-box;height:52px;padding:0 18px;border:2px solid var(--svt-click,#4974C4);border-radius:var(--svt-radius-control,8px);background:#fff;font-size:17px;color:var(--svt-ink,#12213B)}
.svt-ans-hub .ans-ask__in:focus{outline:3px solid color-mix(in srgb,var(--svt-click,#4974C4) 30%,transparent);outline-offset:1px}
.svt-ans-hub .ans-ask__res{list-style:none;margin:8px 0 0;padding:0;border:1px solid var(--svt-hairline,#E5E1D8);border-radius:var(--svt-radius-card,12px);background:#fff;box-shadow:0 6px 18px rgba(18,33,59,.08);overflow:hidden}
.svt-ans-hub .ans-ask__res li+li{border-top:1px solid var(--svt-hairline,#E5E1D8)}
.svt-ans-hub .ans-ask__res a{display:block;padding:12px 16px;color:inherit;text-decoration:none}
.svt-ans-hub .ans-ask__res a:hover,.svt-ans-hub .ans-ask__res a:focus-visible{background:var(--b-soft,#EAF0FB)}
.svt-ans-hub .ans-ask__res b{display:block;font-weight:700;font-size:15.5px;line-height:1.3;color:var(--svt-click-ink,#35589C)}
.svt-ans-hub .ans-ask__res span{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--svt-slate-ink,#655F55)}
.svt-ans-hub .ans-ask__none{margin:10px 0 0;font-size:14px;color:var(--svt-slate-ink,#655F55)}
.svt-ans-hub .ans-ask__none a{color:var(--svt-click-ink,#35589C);font-weight:700}

.svt-ans-hub .ans-hub__fam{margin:22px 0 10px;font-size:15px;font-weight:700;line-height:1.3;color:var(--svt-ink,#12213B)}
.svt-ans-hub .ans-hub__fam:first-of-type{margin-top:4px}
.svt-ans-hub .ans-hub__fam span{margin-left:6px;font-weight:600;color:var(--svt-slate-ink,#655F55);font-variant-numeric:tabular-nums}

/* Block 109: the hub folds. Categories closed, each with its picture; inside a
   category the topics are chips that open their own section; one control opens
   or closes everything. */
.svt-ans-hub .ans-jump{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:10px;list-style:none;margin:0;padding:0}
.svt-ans-hub .ans-jump a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:14px;padding:10px 14px 10px 10px;border:1px solid var(--svt-hairline,#E5E1D8);border-radius:var(--svt-radius-card,12px);background:#fff;color:inherit;text-decoration:none;transition:border-color .16s ease,transform .16s ease}
.svt-ans-hub .ans-jump a:hover,.svt-ans-hub .ans-jump a:focus-visible{border-color:var(--svt-click,#4974C4);transform:translateY(-1px)}
.svt-ans-hub .ans-jump__img,.svt-ans-hub .ans-gimg{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;border-radius:var(--svt-radius-inner,8px);background:#F6F3EC;overflow:hidden}
.svt-ans-hub .ans-jump__img img,.svt-ans-hub .ans-gimg img{max-width:88%;max-height:88%;width:auto;height:auto;object-fit:contain}
.svt-ans-hub .ans-jump a:after{content:"";width:8px;height:8px;margin-right:4px;border-right:2px solid var(--svt-slate-ink,#655F55);border-bottom:2px solid var(--svt-slate-ink,#655F55);transform:translateY(-2px) rotate(45deg)}
.svt-ans-hub .ans-jump__txt{display:grid;gap:2px;min-width:0}
.svt-ans-hub .ans-jump__t{font-size:16px;font-weight:700;line-height:1.25;color:var(--svt-click-ink,#35589C)}
.svt-ans-hub .ans-jump__n{font-size:13px;font-weight:600;color:var(--svt-slate-ink,#655F55);font-variant-numeric:tabular-nums}
.svt-ans-hub .ans-tools{display:flex;justify-content:flex-end;margin:22px 0 10px}
.svt-ans-hub .ans-all{appearance:none;border:1px solid var(--svt-hairline,#E5E1D8);border-radius:var(--svt-radius-control,8px);background:#fff;padding:8px 14px;font:inherit;font-size:14px;font-weight:700;color:var(--svt-click-ink,#35589C);cursor:pointer}
.svt-ans-hub .ans-all:hover,.svt-ans-hub .ans-all:focus-visible{border-color:var(--svt-click,#4974C4)}
.svt-ans-hub .svt-vs-hub__ghead .ans-gimg{width:52px;height:52px;margin-right:14px}
.svt-ans-hub .svt-vs-hub__ghead{display:flex;align-items:center}
.svt-ans-hub .svt-vs-hub__ghead .svt-vs-hub__gtitle{flex:1 1 auto;min-width:0}
.svt-ans-hub .ans-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px;padding:0;list-style:none}
.svt-ans-hub .ans-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--svt-hairline,#E5E1D8);border-radius:999px;background:#fff;font-size:14px;font-weight:600;line-height:1.2;color:var(--svt-ink,#12213B);text-decoration:none;transition:border-color .16s ease,background .16s ease}
.svt-ans-hub .ans-chip span{font-weight:600;color:var(--svt-slate-ink,#655F55);font-variant-numeric:tabular-nums}
.svt-ans-hub .ans-chip:hover,.svt-ans-hub .ans-chip:focus-visible{border-color:var(--svt-click,#4974C4)}
.svt-ans-hub .ans-all[hidden]{display:none}
.svt-ans-hub .ans-chip.is-open{border-color:var(--svt-click,#4974C4);background:var(--b-soft,#EAF0FB);color:var(--svt-click-ink,#35589C)}
.svt-ans-hub .ans-fam{border-top:1px solid var(--svt-hairline,#E5E1D8)}
.svt-ans-hub .ans-fam:last-of-type{border-bottom:1px solid var(--svt-hairline,#E5E1D8)}
.svt-ans-hub .ans-fam>summary{display:flex;align-items:center;gap:8px;padding:13px 2px;cursor:pointer;list-style:none;scroll-margin-top:90px}
.svt-ans-hub .ans-fam>summary::-webkit-details-marker{display:none}
.svt-ans-hub .ans-fam>summary .ans-hub__fam{margin:0;flex:1 1 auto}
.svt-ans-hub .ans-fam>summary:after{content:"";width:8px;height:8px;border-right:2px solid var(--svt-slate-ink,#655F55);border-bottom:2px solid var(--svt-slate-ink,#655F55);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.svt-ans-hub .ans-fam[open]>summary:after{transform:translateY(2px) rotate(225deg)}
.svt-ans-hub .ans-fam>.rk-hubgrid{padding:2px 0 18px}
.svt-ans-hub .svt-vs-hub__group{scroll-margin-top:80px}
@media (max-width:700px){
 .svt-ans-hub .ans-jump__img{width:48px;height:48px}
 .svt-ans-hub .svt-vs-hub__ghead .ans-gimg{width:44px;height:44px;margin-right:10px}
 .svt-ans-hub .ans-tools{justify-content:stretch}
 .svt-ans-hub .ans-all{width:100%}
}
@media (prefers-reduced-motion:reduce){
 .svt-ans-hub .ans-jump a,.svt-ans-hub .ans-fam>summary:after{transition:none}
 .svt-ans-hub .ans-jump a:hover{transform:none}
}

@media (max-width:700px){
 .svtvs--ans .hero .rk-answer{font-size:17px}
 .svtvs--ans .ans-bd li{grid-template-columns:minmax(0,1fr) 40px;row-gap:5px}
 .svtvs--ans .ans-bd--text li{grid-template-columns:1fr}
 .svtvs--ans .ans-bd__bar{grid-column:1 / -1;grid-row:2}
 .svtvs--ans .ans-bdpanel,.svtvs--ans .ans-glance{padding:14px}
 .svtvs--ans .ans-rr:not(:checked) ~ .rk-cut .rk-cutcard:nth-child(n+4){display:none}
 .svtvs--ans .ans-more{width:100%}
 .svtvs--ans .ans-mean{grid-template-columns:1fr;gap:8px}
 .svtvs--ans .ans-glance .rk-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .svtvs--ans .ans-glance .rk-facts li:nth-child(5){display:block}
}
@media (prefers-reduced-motion:reduce){
 .svtvs--ans .ans-bd__bar i{transition:none}
 .svtvs--ans .ans-rlist,.svtvs--ans .ans-rlist__go svg{transition:none}
 .svtvs--ans .ans-rlist:hover{transform:none}
}