/* eyebagpatches.com — comparison-portal look ("A · blue + orange") on top of the shared shop.css */
:root{
--p:#0a5bd8;--pd:#063e96;--pl:#e8f0fd;--pt:#bcd3fb;--hero-t:#dbe7ff;
--cta:#ff9f1a;--ctad:#dc8410;--ctat:#14213d;
--ink:#14213d;--mute:#56637b;--line:#dde3ec;--bg:#f4f6f9;--soft:#eef2f7;--fav:#fff8ec;--tag:#e8f0fd;--tagt:#063e96;
--acc:#0a5bd8;--acc-ink:#fff;--radius:12px;
--font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--head:var(--font)}
body{background:var(--bg);font-size:16px;-webkit-font-smoothing:antialiased}
body.aud-women .only-men,body.aud-men .only-women{display:none}
h1,h2,h3{letter-spacing:-.02em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.show-s{display:none}

/* ---------- top bar + header ---------- */
.pbar{background:var(--pd);color:var(--pt);font-size:12.5px}
.pbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:32px;gap:12px}
.pbar a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.phead{background:var(--p);color:#fff;position:relative;z-index:20}
.phead .wrap{display:flex;align-items:center;height:64px;gap:34px}
.plogo{font-weight:800;font-size:21px;letter-spacing:-.025em;display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:#fff}
.plogo i{font-style:normal;background:var(--cta);color:var(--ctat);padding:1px 6px;border-radius:5px;font-size:12.5px;font-weight:800}
.pnav{display:flex;gap:24px;font-weight:600;font-size:14.5px;align-self:stretch}
.pnav a{color:#fff;text-decoration:none;opacity:.9;display:flex;align-items:center;white-space:nowrap}
.pnav a:hover{opacity:1}
.pnav a.on{opacity:1;box-shadow:inset 0 -3px 0 var(--cta)}
.pmenu{display:none;margin-left:auto;position:relative}
.pmenu summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:9px;border:1.5px solid rgba(255,255,255,.4);display:grid;place-items:center}
.pmenu summary::-webkit-details-marker{display:none}
.pmenu summary span{display:block;width:18px;height:2px;background:#fff;box-shadow:0 6px 0 #fff,0 -6px 0 #fff}
.pmenu[open] summary span{box-shadow:none;transform:rotate(45deg)}
.pmenu[open] summary span::after{content:"";display:block;width:18px;height:2px;background:#fff;transform:rotate(-90deg)}
.pmenu nav{position:absolute;right:0;top:50px;width:240px;background:#fff;border-radius:12px;box-shadow:0 16px 40px -12px rgba(10,30,70,.45);padding:8px;display:grid}
.pmenu nav a{color:var(--ink);text-decoration:none;font-weight:600;padding:11px 12px;border-radius:8px}
.pmenu nav a.on,.pmenu nav a:hover{background:var(--pl);color:var(--p)}

/* ---------- hero + finder ---------- */
.hero{background:linear-gradient(180deg,var(--p) 0,var(--p) 58%,var(--bg) 58%);padding:30px 0 8px}
.hero .crumbs{color:var(--pt);padding:0 0 10px}
.hero h1{color:#fff;font-size:42px;letter-spacing:-.03em;line-height:1.08;font-weight:800;max-width:820px}
.lede{color:var(--hero-t);font-size:17px;line-height:1.5;margin:12px 0 26px;max-width:660px}
.finder{background:#fff;border-radius:14px;box-shadow:0 14px 40px -14px rgba(10,30,70,.35);padding:24px 26px 20px}
.finder h2{font-size:21px;margin-bottom:16px}
.fields{display:grid;grid-template-columns:1.05fr 1fr 1fr auto;gap:16px;align-items:end}
.lbl{display:block;font-size:12px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.who{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.who a{height:58px;border:1.5px solid var(--line);background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:16px;color:var(--ink);text-decoration:none;transition:border-color .15s,background-color .15s}
.who a:hover{border-color:var(--pt)}
.who .gico{height:28px;width:auto;color:var(--mute)}
.who a[aria-selected="true"]{border-color:var(--p);background:var(--pl);color:var(--p);box-shadow:inset 0 0 0 1px var(--p)}
.who a[aria-selected="true"] .gico{color:var(--p)}
.finder select{appearance:none;-webkit-appearance:none;font:inherit;width:100%;height:58px;border:1.5px solid var(--line);border-radius:10px;padding:0 38px 0 14px;font-weight:600;font-size:15.5px;color:var(--ink);cursor:pointer;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2356637b' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center}
.finder select:focus-visible,.who a:focus-visible,.go:focus-visible,.tabs a:focus-visible{outline:3px solid var(--pt);outline-offset:2px}
.go{background:var(--cta);color:var(--ctat);font-weight:800;font-size:17px;height:58px;padding:0 30px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 3px 0 var(--ctad);white-space:nowrap;text-decoration:none}
.go:hover{filter:brightness(1.04)}
.trust{display:flex;gap:8px 22px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mute);flex-wrap:wrap;align-items:center}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cta)}
.trust a{color:var(--p);font-weight:600;text-underline-offset:2px}

/* ---------- comparison table ---------- */
.cmp{padding:40px 0 20px;scroll-margin-top:8px}
.cmp-h{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:14px}
.cmp-h h2{font-size:28px;line-height:1.15}
.pcount{color:var(--mute);font-size:14px;margin:4px 0 0}
.tabs{display:flex;background:#fff;border:1px solid var(--line);border-radius:9px;padding:3px}
.tabs a{padding:8px 18px;border-radius:7px;font-weight:700;font-size:14px;color:var(--mute);text-decoration:none}
.tabs a[aria-selected="true"]{background:var(--p);color:#fff}
.ptable{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pth,.prow{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1.05fr) minmax(0,1.5fr) minmax(0,1fr) 64px 164px;gap:18px;align-items:center;padding:14px 20px}
.pth{background:#fafbfc;font-size:11.5px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);padding-top:11px;padding-bottom:11px}
.prow{border-bottom:1px solid var(--line);font-size:14px;scroll-margin-top:20px}
.prow:last-child{border-bottom:0}
.prow[hidden]{display:none}
.prow.fav{background:linear-gradient(90deg,var(--fav) 30%,#fff 95%);box-shadow:inset 4px 0 0 var(--cta)}
.c-prod{display:flex;gap:14px;align-items:center;min-width:0}
.pk{flex:0 0 84px;width:84px;height:72px;background:#f5f6f8;border-radius:8px;display:grid;place-items:center;overflow:hidden}
.pk img{max-width:88%;max-height:88%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.pk .ph{font-size:11px;padding:6px;background:var(--pl);color:var(--pd)}
.pb{display:block;font-size:12.5px;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.pn{display:block;font-weight:700;font-size:15.5px;line-height:1.3;margin-top:1px;color:var(--ink);text-decoration:none}
.pn:hover{color:var(--p);text-decoration:underline}
.fav-b{display:inline-block;background:var(--cta);color:var(--ctat);font-size:10.5px;font-weight:800;padding:3px 7px;border-radius:4px;margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em}
.best{display:inline-block;font-size:12.5px;font-weight:700;padding:5px 9px;border-radius:6px;background:var(--tag);color:var(--tagt);line-height:1.25}
.c-acts{line-height:1.45}
.c-fmt{font-weight:600}
.c-tier .tier{font-weight:800;font-size:15px;letter-spacing:.06em}.c-tier .tier-w{display:none}
.tier i{color:#c9ced8}
.k{display:none}
.pbtn{display:block;text-align:center;background:var(--p);color:#fff;font-weight:700;padding:12px 8px;border-radius:8px;font-size:14px;text-decoration:none}
.pbtn:hover{background:var(--pd)}
.pbtn.fav{background:var(--cta);color:var(--ctat);box-shadow:0 2px 0 var(--ctad)}
.pbtn.fav:hover{filter:brightness(1.04)}
.plink{display:block;text-align:center;font-size:13px;color:var(--p);font-weight:600;margin-top:7px;text-underline-offset:2px}
.pempty{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;text-align:center;color:var(--mute);margin:12px 0 0}
.tnote{font-size:13px;color:var(--mute);margin:14px 0 0}
.disclosure{font-size:12.5px;color:var(--mute);margin:8px 0 0;max-width:860px}
.disclosure a{color:var(--mute);text-decoration:underline}

/* ---------- how we compare ---------- */
.how{padding:34px 0 6px}
.how h2,.sec h2{font-size:24px;margin-bottom:14px}
.hsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hstep{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.hstep b{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--pl);color:var(--p);margin-bottom:12px}
.hstep svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hstep h3{font-size:15.5px;margin-bottom:4px}
.hstep p{font-size:13.5px;color:var(--mute);margin:0}

/* ---------- sections, notes, article, faq, guides ---------- */
.sec{padding:34px 0}
.sec .intro{color:var(--mute);margin:-6px 0 18px;max-width:680px}
.sec h2 .aud-tag{font:600 13px/1 var(--font);color:var(--p);margin-left:8px;vertical-align:middle;letter-spacing:0}
.notes{grid-template-columns:1fr}
@media(min-width:900px){.notes{grid-template-columns:1fr 1fr}}
.note{border-radius:12px;border-color:var(--line);scroll-margin-top:20px}
.note:target{box-shadow:0 0 0 3px var(--pt)}
.note-img img,.note-img .ph{background:#f5f6f8}
.note .gtk{color:var(--ink)}
.badge{background:var(--tag);color:var(--tagt);font-weight:700}
.badge.pick{background:var(--cta);color:var(--ctat)}
.pc-cta{background:var(--p);border-color:var(--p);color:#fff;border-radius:8px;font-weight:700}
.pc-cta:hover{background:var(--pd);filter:none}
.pc-cta.solid{background:var(--cta);border-color:var(--cta);color:var(--ctat);box-shadow:0 2px 0 var(--ctad)}
/* favourite note: the shop link is the orange button, the review link a quiet outline */
.note:has(.badge.pick) .note-cta a[href^="/"]{background:#fff;border-color:var(--line);color:var(--p);box-shadow:none}
.note:has(.badge.pick) .note-cta a[target="_blank"]{background:var(--cta);border-color:var(--cta);color:var(--ctat);box-shadow:0 2px 0 var(--ctad)}
.facts dt{color:var(--mute)}
#buyers-guide .article,.inner .article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 34px;max-width:860px}
.article{max-width:860px}
.article h2{font-size:23px}
.article a{color:var(--p)}
.article p,.article li{font-size:16.5px}
.article table{border-collapse:collapse;width:100%;font-size:14.5px;margin:10px 0 18px;display:block;overflow-x:auto}
.article th,.article td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.article thead th{font-size:12.5px;color:var(--mute);background:#fafbfc;text-transform:uppercase;letter-spacing:.04em}
.pick-line{border:1px solid #ffd79e;border-left:4px solid var(--cta);background:var(--fav);border-radius:10px;padding:14px 16px;margin:26px 0;font-size:15.5px}
.pick-line span{display:inline}
.pick-line small{color:var(--mute)}
.faq{border:0;max-width:none;display:grid;gap:10px}
@media(min-width:900px){#faq .faq{grid-template-columns:1fr 1fr;align-items:start}}
.faq details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 18px}
.faq summary{padding:16px 30px 16px 0}
.faq summary::after{border-color:var(--p);right:4px}
.faq details[open]{border-color:var(--pt)}
.faq p{color:var(--ink);padding-bottom:16px}
.article .faq details{background:#fbfcfd}
.rows{border:0;background:none;max-width:none;display:grid;gap:10px}
@media(min-width:720px){.rows{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){#guides .rows{grid-template-columns:repeat(3,1fr)}}
.rows li+li{border:0}
.rows a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;height:100%}
.rows a:hover{background:#fff;border-color:var(--p)}
.rows b{color:var(--ink)}
.rows i{border-color:var(--p)}
.mini{border-radius:12px}
.src{color:var(--mute)}
.meta,.meta a{color:var(--mute)}

/* ---------- inner pages (review, guides, legal): blue band behind the first card ---------- */
main.inner{background:linear-gradient(180deg,var(--p) 0,var(--p) 180px,var(--bg) 180px);padding-bottom:30px}
.inner .crumbs{color:var(--pt);padding:18px 0 14px}
.inner .crumbs a{color:#fff}
.inner .article{box-shadow:0 14px 40px -18px rgba(10,30,70,.35)}
.inner .article .head{padding-top:0}
.inner .article .head h1{font-size:clamp(28px,4vw,38px);font-weight:800;letter-spacing:-.03em}
.inner .sec{padding:30px 0 10px}
/* review page */
.rv-top{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin:0 0 18px;box-shadow:0 14px 40px -18px rgba(10,30,70,.35)}
@media(min-width:900px){.rv-top{padding:28px}}
.rv-info h1{font-size:clamp(26px,3.6vw,34px);font-weight:800;letter-spacing:-.03em}
.rv-info .sub{color:var(--ink)}
.rv-btn{border-radius:10px;font-weight:800;padding:14px 24px}
.rv-dots button.on{border-color:var(--p)}
.vd{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 28px;margin:0 0 18px}
.vd-side{background:var(--pl)}
.ts i b{background:var(--p)}
.rv .article{margin-top:0;box-shadow:none}
.rv-cmp tr.is-pick th,.rv-cmp tr.is-pick td,.tbl tr.is-pick th,.tbl tr.is-pick td{background:var(--fav)}
.rv-cmp .t-prod a{color:var(--p)}
.expect li::before{border-color:var(--p)}
.rv-bar .rv-btn{border-radius:8px}

/* ---------- footer ---------- */
.pfoot{background:var(--pd);color:var(--pt);font-size:13.5px;padding:34px 0 30px;margin-top:30px}
.pfoot a{color:#fff;text-decoration:none;opacity:.9}
.pfoot a:hover{opacity:1;text-decoration:underline}
.pf-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr .7fr;gap:26px;margin-bottom:22px}
.pf-cols nav{display:flex;flex-direction:column;gap:8px}
.pf-cols b{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.pf-brand p{margin:10px 0 0;max-width:300px}
.pfoot .plogo{opacity:1}
.pf-disc{border-top:1px solid rgba(255,255,255,.15);padding-top:14px;margin:0 0 6px;font-size:12.5px;max-width:none}
.pf-disc+.pf-disc{border:0;padding-top:0}
.pf-disc a{text-decoration:underline}

/* ---------- responsive ---------- */
@media(max-width:1020px){
 .pnav{gap:18px;font-size:14px}
 .fields{grid-template-columns:1fr 1fr}.f-who{grid-column:1/-1}.go{grid-column:1/-1}
 .pth{display:none}
 .ptable{background:none;border:0;border-radius:0;display:grid;gap:12px;overflow:visible}
 .prow{grid-template-columns:1fr 1fr;gap:12px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
 .prow:last-child{border-bottom:1px solid var(--line)}
 .prow.fav{border-color:var(--cta);box-shadow:none;background:linear-gradient(180deg,var(--fav),#fff 45%)}
 .c-prod{grid-column:1/-1}
 .prow>div:not(.c-prod):not(.c-cta){border-top:1px solid var(--line);padding-top:10px}
 .k{display:block;font-size:11px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
 .c-best{order:1}.c-fmt,.c-tier{order:2}.c-acts{grid-column:1/-1;order:3}.c-cta{grid-column:1/-1;order:5}
 .hsteps{grid-template-columns:1fr 1fr}
 .pf-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){.pnav{display:none}.pmenu{display:block}}
@media(max-width:720px){
 .hide-s{display:none}.show-s{display:inline}
 .hero{padding-top:22px;background:linear-gradient(180deg,var(--p) 0,var(--p) 330px,var(--bg) 330px)}
 .hero h1{font-size:31px}.lede{font-size:15.5px;margin-bottom:20px}
 .finder{padding:18px 16px}
 .fields{grid-template-columns:1fr;gap:14px}
 .trust{font-size:13px;gap:6px 16px}
 .cmp-h{flex-direction:column;align-items:flex-start}.cmp-h h2{font-size:24px}
 .c-best{grid-column:1/-1}
 .pk{flex-basis:76px;width:76px;height:66px}
 .hsteps{grid-template-columns:1fr}
 #buyers-guide .article,.inner .article{padding:22px 18px}
 .vd{padding:20px 18px}
 .rv-top{padding:16px}
 .pf-cols{grid-template-columns:1fr}
 main.inner{background:linear-gradient(180deg,var(--p) 0,var(--p) 150px,var(--bg) 150px)}
}
.article>h2:first-child,.rv .article>h2:first-child{margin-top:0}