:root{--maxw:1280px;--danger:#C0392B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--danger:#E5715F}}
:root[data-theme="dark"]{--danger:#E5715F}
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}
select option{background:var(--surface);color:var(--ink)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{max-width:100%;overflow-x:clip}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-property:opacity,color,background-color,border-color!important;scroll-behavior:auto!important}html .card{transition-property:opacity,color,background-color,border-color!important}}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:22px;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(1100px 460px at 88% -22%, color-mix(in srgb,var(--accent) 15%, transparent), transparent 62%)}
.hero-in{padding-block:52px 30px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.hero-h{font-family:var(--f-disp);font-weight:800;font-size:clamp(30px,5.2vw,54px);line-height:1.02;letter-spacing:-.035em;margin:0;max-width:15ch;text-wrap:balance}
.hero-sub{font-size:clamp(15px,1.9vw,18px);color:var(--muted);margin:0;max-width:52ch;line-height:1.55}
.hero-stats{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;font-family:var(--f-mono);font-size:12px;color:var(--muted);letter-spacing:.02em;padding-top:2px}
.hero-stats .stat b{color:var(--ink);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.strip-head{display:flex;align-items:center;gap:10px;padding:14px 0 9px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);justify-content:center}
.strip-head::before,.strip-head::after{content:"";height:1px;width:38px;background:var(--line)}
.hero-strip{min-height:178px;overflow:hidden;padding:6px 0 16px;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.strip-track{display:flex;gap:12px;padding-right:12px;width:max-content;animation:stripScroll linear infinite}
@media (hover:hover) and (pointer:fine){.hero-strip:hover .strip-track{animation-play-state:paused}}
.hero-strip:has(:focus-visible) .strip-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce),(hover:none){.hero-strip{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:22px;overscroll-behavior-x:contain;-webkit-mask-image:none;mask-image:none}.strip-track{animation:none;padding-inline:22px}.ftile{scroll-snap-align:start}}
@media (hover:none){.hero-strip{scrollbar-width:none}.hero-strip::-webkit-scrollbar{display:none}}
@keyframes stripScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fimg{box-sizing:border-box;width:100%;height:100%;object-fit:contain;padding:11% 10% 12%;display:block;filter:drop-shadow(0 10px 12px rgba(20,16,10,.18));transition:transform .4s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){.ftile:hover .fimg{transform:scale(1.06)}}
.ftile{position:relative;flex:0 0 auto;width:154px;aspect-ratio:1;background:radial-gradient(120% 90% at 50% 18%,var(--studio-a) 0%,var(--studio-b) 100%);border:none;border-radius:16px;padding:0;cursor:pointer;overflow:hidden}
.ftile canvas{width:100%;height:100%;display:block;transition:transform .3s}
@media (hover:hover) and (pointer:fine){.ftile:hover canvas{transform:scale(1.04)}}
.fstamp{position:absolute;left:8px;bottom:8px;font-family:var(--f-mono);font-size:9.5px;color:#fff;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.4);padding:2px 6px;backdrop-filter:blur(2px)}
@media(max-width:560px){.ftile{width:124px}.hero-strip{min-height:146px}.hero-in{padding-block:32px 22px}}
.btn.oauth{width:100%;justify-content:center;background:var(--ground);color:var(--ink);border:1px solid var(--line-2);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.oi{font-family:var(--f-mono);font-weight:700}
.ordiv{display:flex;align-items:center;gap:10px;color:var(--faint);font-family:var(--f-mono);font-size:11px;margin:4px 0 12px}
.ordiv:before,.ordiv:after{content:"";flex:1;height:1px;background:var(--line)}
.masthead{border-bottom:1.5px solid var(--line-2)}
.mast-top{border-top:5px solid var(--line-2)}
.mast-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding-block:14px 12px}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;flex-wrap:wrap}
.brand b{font-family:var(--f-disp);font-weight:800;font-size:29px;line-height:.9;letter-spacing:-.03em}
.brand .tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:3px}
.mast-tools{display:flex;align-items:center;gap:8px;flex:none;position:relative}
.selwrap{position:relative}
.selwrap svg{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:11px;height:11px;color:var(--muted);pointer-events:none}
select.mini,.theme-btn,.auth-btn{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);padding:7px 22px 7px 9px;appearance:none}
.theme-btn{padding:7px 9px;width:34px;display:grid;place-items:center}
.theme-btn svg{width:14px;height:14px}
.auth-btn{padding:7px 12px;white-space:nowrap}
.auth-btn[data-in="1"]{background:var(--fill);color:var(--fill-ink);border-color:var(--fill);max-width:170px;overflow:hidden;text-overflow:ellipsis}
.menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;min-width:180px;z-index:50;box-shadow:0 14px 38px rgba(20,30,60,.20);padding:5px;overflow:hidden}
.menu button{display:block;width:100%;text-align:left;font-family:var(--f-disp);font-weight:500;font-size:13px;color:var(--ink);padding:9px 12px;background:none;border:none;border-radius:8px;cursor:pointer;transition:background-color .13s ease}
.menu button:hover{background:var(--surface-2)}
/* toolbar uses display:contents so its children stick page-wide (a sticky .toolbar box is broken by the html/body overflow-x:clip). PC: both search + filters stick; mobile: only search. */
.toolbar{display:contents}
.toolbar .deck{position:sticky;top:0;z-index:32;background:var(--ground)}
.toolbar .subdeck{position:sticky;top:var(--deck-h,92px);z-index:31;background:var(--ground)}
/* owner 9 Nov 2026: "make it extremely tiny" */
.gate-optin{display:flex;align-items:center;gap:3px;justify-content:center;font-size:8.5px;line-height:1.2;color:var(--muted);opacity:.85;margin:0 0 1px;cursor:pointer}
@media(hover:hover){.gate-optin:hover{opacity:.85}}
.gate-optin input{width:8px;height:8px;margin:0;accent-color:var(--ink);flex:none;cursor:pointer}
.deck{border-bottom:1.5px solid var(--line-2);background:var(--ground);position:sticky;top:0;z-index:30}
.deck .wrap{display:flex;align-items:stretch;gap:0}
.search{flex:1;position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:2px;width:16px;height:16px;color:var(--muted)}
.search input{width:100%;border:none;background:transparent;color:var(--ink);font-family:var(--f-body);font-size:15px;padding:14px 12px 14px 26px}
.search input:focus{outline:none}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.search input::placeholder{color:var(--faint)}
.filters-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-block:10px}
.fsel{position:relative}
.fsel>svg{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:11px;height:11px;color:var(--muted);pointer-events:none}
.fsel select{font-family:var(--f-mono);font-size:11.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:7px 24px 7px 10px;appearance:none;max-width:180px}
.starcount{font-family:var(--f-mono);font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.starcount:empty{display:none}
.cviews{font-family:var(--f-mono);font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tag:empty{display:none}
.subdeck{border-bottom:1px solid var(--line)}
.subdeck .wrap{display:flex;align-items:center;gap:14px;padding-block:10px;flex-wrap:wrap}
.saved-chip{font-family:var(--f-mono);font-size:11.5px;padding:6px 12px;background:var(--surface);color:var(--muted);border:1px solid var(--line);border-radius:var(--radius);display:flex;align-items:center;gap:6px}
.saved-chip[aria-pressed="true"]{background:var(--fill);color:var(--fill-ink);border-color:var(--fill)}
.saved-chip svg{width:12px;height:12px}
.sort-fsel{margin-left:auto}
.icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--muted);flex:none;text-decoration:none;font-size:16px;transition:border-color .15s}
.icon-btn img{width:18px;height:18px;object-fit:contain;border-radius:4px}
.icon-btn:hover{border-color:var(--line-2)}
.eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.spacer{flex:1 1 auto;min-width:6px}
.count{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
main{padding-block:26px 64px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:520px){.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}
.card{background:var(--surface);text-align:left;display:flex;flex-direction:column;position:relative;transition:background .12s;cursor:pointer}
@media(hover:hover){.card:hover .thumb canvas{transform:scale(1.03)}}
.thumb{position:relative;aspect-ratio:1/1;overflow:hidden;border-bottom:1px solid var(--line)}
.thumb canvas{width:100%;height:100%;display:block;transition:transform .3s ease}
.fav{position:absolute;bottom:9px;right:9px;width:30px;height:30px;display:grid;place-items:center;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(2px);color:#fff;border-radius:2px}
.fav svg{width:15px;height:15px}
.card .body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.code{font-family:var(--f-mono);font-size:10px;color:var(--faint);letter-spacing:.03em}
.title{font-size:13px;font-weight:500;line-height:1.34;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.68em}
.price-row{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:6px;border-top:1px solid var(--line);flex-wrap:wrap}
.price{font-family:var(--f-mono);font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.subprice{font-family:var(--f-mono);font-size:10.5px;color:var(--faint);white-space:nowrap}
.price-row .cat{margin-left:auto;white-space:nowrap}
.cat{font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-left:auto}
.dbody{display:flex;flex-direction:column}
.gmain{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line)}
.gmain canvas{width:100%;height:100%;display:block}
.gtabs{display:flex;gap:8px;margin-top:12px;width:fit-content}
.gtab{font-family:var(--f-body);font-size:13px;font-weight:500;min-height:36px;padding:0 14px;background:transparent;color:var(--ink);border:1px solid var(--line-2);border-radius:999px;transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .16s var(--ease)}
.gtab[aria-pressed="true"]{background:var(--fill);color:var(--fill-ink);border-color:var(--fill)}
@media (pointer:coarse),(max-width:560px){.gtab{min-height:44px}} /* 44px on tablets too (DESIGN.md rule 10) */
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:9px}
@keyframes galFade{from{opacity:0}to{opacity:1}}
.gmain .pimg,.gmain canvas{animation:galFade .28s ease}
.thumbs .qcthumb{animation:galFade .2s var(--ease)}
.thumbs canvas{width:100%;aspect-ratio:1;border:1px solid var(--line);cursor:pointer;display:block}
.d-titlerow{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.d-title{font-family:var(--f-disp);font-weight:700;font-size:24px;line-height:1.12;margin:0;text-wrap:balance}
.d-brand{font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.d-fav{flex:none;width:38px;height:38px;border:1px solid var(--line-2);background:var(--ground);display:grid;place-items:center;color:var(--ink)}
.d-fav svg{width:17px;height:17px}
.d-fav[aria-pressed="true"]{background:var(--fill);color:var(--fill-ink);border-color:var(--fill)}
.d-fav[aria-pressed="true"] svg{fill:var(--fill-ink)}
.d-price{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.d-price .p{font-family:var(--f-mono);font-weight:600;font-size:22px;font-variant-numeric:tabular-nums}
.d-price .u{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tag{font-family:var(--f-mono);font-size:10.5px;padding:4px 9px;border:1px solid var(--line);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.sec-label{font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.variants{display:flex;flex-wrap:wrap;gap:7px}
.variant{font-size:12.5px;font-family:var(--f-disp);font-weight:500;padding:7px 13px;border:1px solid var(--line);border-radius:999px;display:flex;gap:8px;align-items:center;color:var(--ink)}
.variant.swatch-only{padding:6px}
.variant .vp{font-weight:600}
.variant .sw{width:12px;height:12px;border-radius:50%;border:1px solid rgba(120,130,150,.35);flex:none}
.agents{display:flex;flex-direction:column;gap:7px}
.agent{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;padding:13px 15px;font-weight:600;font-size:14px}
.agent.primary{background:var(--fill);color:var(--fill-ink)}
.btn{font-family:var(--f-mono);font-size:12px;font-weight:600;padding:9px 16px;border:1px solid var(--fill);background:var(--fill);color:var(--fill-ink)}
.btn.ghost{background:var(--ground);color:var(--ink);border-color:var(--line-2)}
.empty{text-align:center;padding:80px 20px;color:var(--muted)}
.empty .clear-btn{margin:16px auto 0;display:inline-flex}.clear-btn[hidden]{display:none!important}
.empty b{display:block;font-family:var(--f-disp);font-weight:700;font-size:22px;color:var(--ink);margin-bottom:6px}
footer{border-top:1.5px solid var(--line-2);padding:22px 0 44px;color:var(--muted);font-size:12.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
footer .mono{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
@media(max-width:560px){
.mast-row{flex-wrap:wrap;gap:10px 12px}
.brand b{font-size:24px}
.mast-tools{width:100%;justify-content:space-between}
.auth-btn[data-in="1"]{max-width:130px}
.subdeck .wrap{gap:10px}
.hero-h{letter-spacing:-.02em}
}
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(10,10,10,.55);padding:20px}
.sheet{background:var(--surface);border:1.5px solid var(--line-2);width:min(400px,100%);padding:22px}
.sheet h3{font-family:var(--f-disp);font-weight:700;font-size:22px;margin:0 0 6px}
.sheet p{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.sheet input{width:100%;font-family:var(--f-body);font-size:15px;border:1px solid var(--line-2);background:var(--ground);color:var(--ink);padding:11px 12px;margin-bottom:10px}
.sheet .btn{width:100%;justify-content:center;text-align:center}
.auth-status{font-family:var(--f-mono);font-size:11.5px;margin:12px 0 0;min-height:1em}
.sheet-x{position:absolute}
/* ===== Puro Classico redesign ===== */
select.mini,.theme-btn,.auth-btn,.fsel select,.saved-chip,.btn,.sheet input,.chip{border-radius:var(--radius)}
/* tools dropdown */
.tools-nav{position:relative}
.tools-btn{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);padding:7px 12px;white-space:nowrap}
.tools-btn svg{width:11px;height:11px;transition:transform .15s}
.tools-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.tools-menu{position:absolute;top:calc(100% + 6px);left:0;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;min-width:196px;z-index:60;box-shadow:0 14px 38px rgba(20,30,60,.20);padding:5px}
.tools-menu a{display:block;text-decoration:none;font-family:var(--f-mono);font-size:12px;color:var(--ink);padding:9px 12px;border-radius:7px}
.tools-menu a:hover{background:var(--surface-2)}
/* supported-agents strip */
.agents-strip{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding-top:6px}
.agents-strip .lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-right:2px}
.agent-logos{display:flex;align-items:center}
.agent-logo{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);object-fit:contain;padding:5px;margin-left:-9px;box-shadow:0 2px 7px rgba(20,30,60,.14)}
.agent-logo:first-child{margin-left:0}
.tp-badge{display:inline-flex;align-items:center;gap:8px;margin-top:16px;text-decoration:none;color:var(--ink);font-size:13px;width:fit-content;opacity:.92;transition:opacity .15s}
.tp-stars{color:#00b67a;letter-spacing:1px;font-size:15px;line-height:1}
.tp-badge b{font-weight:800}
.tp-label{color:var(--muted);font-size:11px}
.tp-badge:hover{opacity:1}
.hero-cta{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:13px 26px;border:none;border-radius:999px;
background:var(--accent);color:#fff;font-family:var(--f-disp);font-weight:700;font-size:15.5px;letter-spacing:-.01em;cursor:pointer;
box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 40%,transparent);transition:transform .15s ease,box-shadow .15s ease,background .15s ease;animation:rise .42s ease both;animation-delay:.14s}
.hero-cta svg{width:18px;height:18px;transition:transform .18s ease}
.hero-cta:hover{background:color-mix(in srgb,var(--accent) 90%,#000)}
@media(hover:hover){.hero-cta:hover svg{transform:translateX(4px)}}
.hero-cta:active{transform:translateY(0)}
.brand-line{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:1px}
.prating{color:#e0a416;font-size:11.5px;letter-spacing:1px;white-space:nowrap}
.tools-sep{height:1px;background:var(--line);margin:7px 8px 4px}
.tools-label{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);padding:2px 14px 5px}
.tools-feature{display:flex;flex-direction:column;gap:1px}
.tools-feature span{font-size:11px;color:var(--muted);font-weight:400}
.theme-btn svg{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
@media(hover:hover){.theme-btn:hover svg{transform:rotate(-20deg) scale(1.08)}}
/* ===== refined masthead controls, quiet, seamless, premium ===== */
.mast-row{align-items:center;padding-block:15px 14px;gap:20px}
.mast-tools{gap:2px}
.mast-tools .tools-btn,
.mast-tools select.mini{font-family:var(--f-disp);font-size:13px;font-weight:550;letter-spacing:-.01em;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:10px;height:36px;line-height:1;display:flex;align-items:center;cursor:pointer;transition:background-color .16s ease,color .16s ease}
.mast-tools .tools-btn{gap:6px;padding:0 12px}
.mast-tools select.mini{padding:0 30px 0 12px;appearance:none;-webkit-appearance:none}
.mast-tools .tools-btn:hover,
.mast-tools .selwrap:hover select.mini,
.mast-tools select.mini:focus-visible{background:var(--surface-2)}
.mast-tools .tools-btn svg{width:12px;height:12px;color:var(--muted);transition:transform .18s ease}
.mast-tools .tools-btn[aria-expanded="true"]{background:var(--surface-2)}
.mast-tools .selwrap{display:flex}
.mast-tools .selwrap svg{right:11px;width:12px;height:12px;color:var(--faint)}
.mast-div{width:1px;height:22px;background:var(--line);margin:0 8px;flex:none;align-self:center}
.mast-tools .auth-btn{font-family:var(--f-disp);font-size:13px;font-weight:650;letter-spacing:-.01em;color:var(--ground);background:var(--ink);border:none;border-radius:999px;height:36px;padding:0 18px;white-space:nowrap;cursor:pointer;transition:opacity .16s ease,transform .12s ease}
@media(hover:hover){.mast-tools .auth-btn:hover{opacity:.85}}
.mast-tools .auth-btn:active{transform:scale(.96)}
.mast-tools .auth-btn[data-in="1"]{background:var(--fill);color:var(--fill-ink);max-width:170px;overflow:hidden;text-overflow:ellipsis}
.mast-tools .icon-btn,
.mast-tools .theme-btn{width:36px;height:36px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer;padding:0;transition:background-color .16s ease,color .16s ease}
.mast-tools .icon-btn:hover,
.mast-tools .theme-btn:hover{background:var(--surface-2);color:var(--ink)}
.mast-tools .icon-btn img{width:18px;height:18px;object-fit:contain;border-radius:5px}
.mast-tools .theme-btn svg{width:16px;height:16px}
@media(max-width:640px){.mast-div{display:none}.mast-tools{gap:1px}}
@media(max-width:560px){.mast-tools .csel,.mast-tools .selwrap{display:none}.mast-tools{gap:8px}.mast-row{padding-block:8px}.mast-tools .auth-btn{height:38px;padding:0 18px;font-size:14px}.tools-btn{font-size:14px}}
/* custom masthead dropdowns styled like the Tools menu */
.selwrap>select.mini{display:none}
.selwrap>svg{display:none}
.csel{position:relative;display:flex}
.cselbtn{font-family:var(--f-disp);font-size:13px;font-weight:550;letter-spacing:-.01em;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:10px;height:36px;display:flex;align-items:center;gap:6px;padding:0 10px 0 12px;cursor:pointer;transition:background-color .16s ease}
.cselbtn:hover,.cselbtn[aria-expanded="true"]{background:var(--surface-2)}
.cselbtn svg{width:12px;height:12px;color:var(--muted);transition:transform .18s ease}
.cselbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.cselmenu{position:absolute;top:calc(100% + 6px);left:0;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 14px 38px rgba(20,30,60,.20);padding:5px;min-width:172px;max-height:64vh;overflow:auto;z-index:80}
.cselitem{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;border:none;border-radius:8px;padding:9px 12px;font-family:var(--f-disp);font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background-color .13s ease}
.cselitem:hover{background:var(--surface-2)}
.cselitem.sel{font-weight:650}
.cselitem .ck{width:13px;flex:none;color:var(--accent);font-size:11px;line-height:1}
.cselmenu.cm-right{left:auto;right:0}
.cselmenu{overscroll-behavior:contain}.cselmenu.cm-portal{z-index:1000}
.cselsearch{position:sticky;top:-5px;margin:-5px -5px 4px;padding:6px 6px 5px;background:var(--surface);border-bottom:1px solid var(--line);z-index:1}
.cselsearch input{width:100%;box-sizing:border-box;height:34px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface-2);color:var(--ink);font:500 16px/1 var(--f-disp);padding:0 10px;outline:none}
@media (hover:hover) and (pointer:fine){.cselsearch input{font-size:14px}}
.cselsearch input:focus{border-color:var(--accent)}
.cselnone{padding:10px 12px;font-size:13px;color:var(--muted)}
.cselitem .cseln{margin-left:auto;padding-left:14px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cselitem[hidden]{display:none}
/* filter selects -> custom dropdowns (bordered pill button, same styled menu) */
.fsel>select{display:none!important}
.fsel>svg{display:none!important}
.fselbtn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:600;font-size:12.5px;letter-spacing:-.01em;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;height:34px;padding:0 10px 0 13px;cursor:pointer;max-width:200px;transition:border-color .14s ease,background-color .14s ease}
.fselbtn .csellbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fselbtn .cselchev{width:12px;height:12px;color:var(--muted);flex:none;margin-left:auto;transition:transform .18s ease}
.fselbtn[aria-expanded="true"] .cselchev{transform:rotate(180deg)}
.agent-more{width:34px;height:34px;border-radius:50%;background:var(--fill);color:var(--fill-ink);display:grid;place-items:center;font-family:var(--f-mono);font-size:10.5px;font-weight:700;margin-left:-9px;border:2px solid var(--surface)}
/* bigger search */
.deck{background:var(--ground);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;padding-block:16px}
.deck .wrap{display:flex;align-items:stretch;gap:12px}
.search{flex:1;position:relative;display:flex;align-items:center;background:var(--surface);border:1.5px solid var(--line-2);border-radius:14px;padding-left:18px}
.search svg{position:static;width:21px;height:21px;color:var(--muted);flex:none}
.search input{width:100%;border:none;background:transparent;color:var(--ink);font-size:18px;padding:17px 16px}
.deck .sortwrap{border:1.5px solid var(--line-2);border-radius:14px;background:var(--surface);padding-right:4px}
.deck select.sort{font-size:13px;padding:0 30px 0 16px}
/* cleaner cards */
.grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;background:transparent;border:none}
@media(max-width:520px){.grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(20,30,60,.05);transition:transform .16s,box-shadow .16s,border-color .16s;content-visibility:auto;contain-intrinsic-size:auto 300px}
.thumb{border-bottom:1px solid var(--line)}
.thumb .pimg,.gmain .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stamp{border-radius:999px;background:rgba(20,30,60,.55);border-color:rgba(255,255,255,.4)}
.qc{border-radius:999px}
.fav{border-radius:999px;background:rgba(20,30,60,.42)}
.card .body{padding:12px 13px 14px}
/* entry auth gate */
.gate{position:fixed;inset:0;z-index:90;display:grid;place-items:center;place-items:safe center;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:rgba(12,18,32,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:20px}
@media(max-height:500px){.gate .gate-card{padding:18px 22px}.gate-progress,.gate-progress-cap{display:none}}
.gate-card{background:var(--surface);border:1px solid var(--line);border-radius:26px;width:min(400px,calc(100vw - 32px));max-width:100%;padding:34px 30px;text-align:center;box-shadow:0 30px 80px rgba(10,15,30,.32),0 2px 10px rgba(10,15,30,.12)}
.gate-logo{font-family:var(--f-disp);font-weight:800;font-size:27px;letter-spacing:-.035em;margin-bottom:16px}
.gate-logo span{color:var(--accent)}
.gate-card h2{font-family:var(--f-disp);font-weight:700;font-size:21px;margin:0 0 8px;line-height:1.15}
.gate-card p{font-size:14px;color:var(--muted);margin:0 0 22px;line-height:1.5}
.gate-card .btn{width:100%;justify-content:center;text-align:center;padding:14px;border-radius:14px;margin-bottom:10px;font-size:13.5px;gap:10px}
.oi-img{width:18px;height:18px;object-fit:contain;border-radius:4px}
.set-row{display:flex;flex-direction:column;gap:5px;text-align:left;margin-bottom:13px}
.set-row label{font-size:11.5px;color:var(--muted);font-family:var(--f-mono);letter-spacing:.03em}
.set-row input,.set-row select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:14px;font-family:var(--f-body)}
.set-row input:focus,.set-row select:focus{outline:none;border-color:var(--accent)}
.gate-guest{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0 12px;background:none;border:none;color:var(--muted);font-family:var(--f-body);font-size:13.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gate-guest:hover{color:var(--ink)}
/* tool pages */
.page{max-width:820px;margin:0 auto;padding:38px 22px 80px}
.page-back{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);text-decoration:none;display:inline-block;margin-bottom:18px}
.page-back:hover{color:var(--ink)}
.page h1,.page .ph{font-family:var(--f-disp);font-weight:800;font-size:clamp(26px,4vw,38px);letter-spacing:-.03em;margin:0 0 8px}
.page .lead{font-size:16px;color:var(--muted);margin:0 0 26px;line-height:1.55;max-width:60ch}
.wb-grid{display:block}
.wb-grid-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.wb-feat{position:relative;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:26px 24px;margin:0 0 6px;background:var(--surface);border:2px solid var(--fill);border-radius:20px;box-shadow:0 10px 34px rgba(99,102,241,.16)}
.wb-feat-badge{position:absolute;top:-11px;left:24px;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fill-ink);background:var(--fill);padding:5px 12px;border-radius:999px}
.wb-feat .wb-logo{width:54px;height:54px;border-radius:12px}
.wb-feat-main{flex:1;min-width:200px}
.wb-feat .wb-name{font-size:23px}
.wb-feat .wb-bonus{font-size:14.5px;min-height:0;margin-top:4px}
.wb-feat .wb-btn{margin-top:0;font-size:15px;padding:13px 24px;background:var(--fill);color:var(--fill-ink)}
.wb-more-label{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:26px 0 12px}
.wb-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px;background:var(--surface);border:1.5px solid var(--line-2);border-radius:16px}
.wb-logo{width:40px;height:40px;border-radius:9px;object-fit:contain;background:#fff}
.wb-name{font-family:var(--f-disp);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.01em}
.wb-bonus{font-size:13.5px;color:var(--muted);line-height:1.45;flex:1;min-height:38px}
.wb-btn{margin-top:6px;display:inline-block;padding:10px 18px;font-family:var(--f-disp);font-weight:650;font-size:14px;color:var(--ground);background:var(--ink);border-radius:999px;text-decoration:none;cursor:pointer}
.wb-btn.wb-soon{background:var(--surface-2);color:var(--faint);cursor:default}
.tut-step{display:flex;gap:16px;align-items:flex-start;margin:0 0 26px}
.tut-n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--ground);font-family:var(--f-disp);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.tut-step h3{margin:2px 0 6px}
.tut-step .body{margin:0 0 8px}
.tool-box{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:18px}
.tool-box label{display:block;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-bottom:8px}
.tool-in{width:100%;font-family:var(--f-body);font-size:15px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--ground);color:var(--ink);padding:13px 14px}
.tool-out{margin-top:14px;font-family:var(--f-mono);font-size:13px;word-break:break-all;white-space:pre-line;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--ink);line-height:1.6}
.tool-out.empty{color:var(--faint)}
.row-btns{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.page h3{font-family:var(--f-disp);font-weight:700;font-size:18px;margin:28px 0 8px}
.page .body,.page li{font-size:15px;color:color-mix(in srgb,var(--ink) 88%,var(--muted));line-height:1.65}
.page ul{padding-left:20px}
/* ---- price range slider ---- */
.price-ctrl{position:relative}
.price-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap}
.price-pop{position:absolute;z-index:40;top:44px;left:0;width:250px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(8,14,30,.28);padding:14px 16px 18px}
.pp-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:12px}
.pp-clear{background:none;border:none;color:var(--accent);font:inherit;font-size:12.5px;cursor:pointer;padding:0}
.pp-vals{display:flex;justify-content:space-between;font-weight:600;font-size:14px;color:var(--ink);margin-bottom:8px}
.pp-slider{position:relative;height:26px}
.pp-track{position:absolute;left:0;right:0;top:11px;height:4px;border-radius:3px;background:var(--surface-2)}
.pp-fill{position:absolute;top:11px;height:4px;border-radius:3px;background:var(--accent)}
.pp-slider input[type=range]{position:absolute;left:0;top:2px;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;height:22px}
.pp-slider input[type=range]:focus{outline:none}
.pp-slider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--ink)}
.pp-slider input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--ink)}
.pp-slider input[type=range]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;height:18px;width:18px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer;margin-top:0}
.pp-slider input[type=range]::-moz-range-thumb{pointer-events:auto;height:16px;width:16px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);cursor:pointer}
.pp-slider input[type=range]::-webkit-slider-runnable-track{height:22px;background:none}
.pp-slider input[type=range]::-moz-range-track{height:22px;background:none}
/* ---- drawer share button ---- */
.dshare{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;margin-right:8px}
.dshare svg{width:17px;height:17px}
.dshare:hover,.dshare.ok{border-color:var(--accent);color:var(--accent)}
/* ---- similar row ---- */
.similar-wrap{margin-top:4px}
.similar-row{display:grid;grid-auto-flow:column;grid-auto-columns:132px;gap:12px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x proximity}
.sim-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:8px;cursor:pointer;color:var(--ink)}
.sim-card:hover{border-color:var(--accent)}
.sim-thumb{display:block;aspect-ratio:1;border-radius:7px;background:var(--surface-2);overflow:hidden}
.sim-thumb img,.sim-thumb canvas{width:100%;height:100%;object-fit:cover;display:block}
.sim-t{font-size:12px;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sim-p{font-size:12px;color:var(--muted)}
/* ---- report link ---- */
.report-row{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tut-pop{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,10,20,.66);opacity:0;transition:opacity .22s ease}
.tut-pop.show{opacity:1}
.tut-card{position:relative;width:min(640px,100%);max-height:min(86vh,820px);overflow:auto;background:var(--ground);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:30px 26px 24px;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.tut-card h2{margin:0 0 6px;font-family:var(--f-disp);font-size:24px}
.tut-card .lead{margin:0 0 22px;color:var(--muted);font-size:14.5px}
.tut-card .tut-step{margin-bottom:18px}
.tut-x{position:sticky;top:0;float:right;margin:-14px -10px 0 8px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;z-index:2}
.tut-x:hover{background:var(--surface-2)}
.optin-toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:60;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;max-width:min(92vw,560px);padding:13px 18px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-pop);font-size:14px;transition:transform .28s ease,opacity .28s ease;opacity:0}
.optin-toast.show{transform:translate(-50%,0);opacity:1}
.optin-toast .ot-msg{font-weight:600}
.optin-toast .ot-btns{display:flex;gap:8px}
.optin-toast button{border:0;border-radius:999px;min-height:40px;padding:0 16px;font-weight:600;font-size:13px;cursor:pointer;transition:opacity .15s,transform .15s}
.optin-toast button:active{transform:scale(.96)}
.optin-toast #ot-yes{background:var(--fill);color:var(--fill-ink)}
@media(hover:hover){.optin-toast #ot-yes:hover{opacity:.88}}
.optin-toast #ot-no{background:transparent;color:var(--muted);border:1px solid var(--line-2)}
.report-link{background:none;border:none;color:var(--muted);font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer;padding:0}
.report-link:hover{color:var(--danger)}
.report-link:disabled{opacity:.5;cursor:default;text-decoration:none}
.report-status{font-size:12.5px;color:var(--accent)}
/* report box (8 Nov 2026): slides open, one tap on a reason sends the report */
.report-why{flex-basis:100%;display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s cubic-bezier(.22,1,.36,1),opacity .2s ease-out}
.report-why.on{grid-template-rows:1fr;opacity:1}
.report-why .rw-in{min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.report-why .rw-q{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.report-why .rw-opts{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 4px}
.report-why .rw-opt{appearance:none;display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s,border-color .15s,color .15s,opacity .2s,transform .1s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){.report-why .rw-opt:hover{background:var(--hover,rgba(127,127,127,.12))}}
.report-why .rw-opt:active{transform:scale(.96)}
.report-why .rw-opt.sel{background:var(--fill);color:var(--fill-ink);border-color:var(--fill)}
.report-why.busy .rw-opt:not(.sel){opacity:.35}
.report-why.busy .rw-opt{pointer-events:none}
.report-status{transition:opacity .2s}
.report-status:empty{opacity:0}
@media (pointer:coarse){.report-why .rw-opt{min-height:40px}}
@media (prefers-reduced-motion:reduce){.report-why,.report-why .rw-opt{transition:none}}
.report-gone{display:flex;gap:6px;align-items:flex-start;margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--muted)}
/* ---- toast ---- */
.pc-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);background:var(--fill);color:var(--fill-ink);padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9999}
.pc-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ---- blog ---- */
.blog-eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.post{border-top:1px solid var(--line);padding:22px 0}
.post h2{font-size:20px;font-weight:700;letter-spacing:-.015em;margin:0 0 8px}
.post .body{color:var(--muted);max-width:70ch;line-height:1.7}
/* gate progress + agent links */
.gate-progress{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-bottom:9px}
.gate-progress-bar{display:block;height:100%;width:52%;border-radius:999px;background:linear-gradient(90deg,var(--accent),#6f93dd);animation:gateFill 1.05s cubic-bezier(.22,1,.36,1) both}
@keyframes gateFill{from{width:8%}to{width:52%}}
.gate-progress-cap{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted);margin-bottom:16px;text-align:center}
.oi-img{flex:0 0 auto}
.agent-logo[data-href]{cursor:pointer;transition:border-color .15s,transform .15s}
@media(hover:hover){.agent-logo[data-href]:hover{border-color:var(--accent);transform:translateY(-1px)}}
/* uniform filter controls */
.price-btn{font-family:var(--f-mono)!important;font-size:11.5px!important;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:7px 10px!important;height:auto!important;line-height:1.25;gap:6px}
.price-btn svg{width:11px;height:11px}
.sort{max-width:none}
/* gate inline email */
.gate-email{display:flex;gap:9px;margin-top:2px}
.gate-email input{flex:1 1 auto;min-width:0;height:50px;padding:0 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:14.5px;transition:border-color .18s,box-shadow .18s,background .18s}
.gate-email input::placeholder{color:var(--faint)}
.gate-email input:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.gate-email .btn{flex:0 0 auto;width:auto;white-space:nowrap;height:50px;padding:0 20px;border:none;border-radius:14px;font-weight:700;color:#fff;background:var(--accent);box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 34%,transparent);transition:opacity .15s ease,transform .12s ease}
@media(hover:hover){.gate-email .btn:hover{opacity:.88}} /* the ink pill's hover, like the hero button (brightness did nothing on ink) */
.gate-email .btn:active{transform:scale(.98)}
.gate-email input.err{border-color:#e5484d;background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,#e5484d 16%,transparent)}
.gate-email-status{font-size:12.5px;color:var(--accent);text-align:center;margin:10px 0 0;min-height:1.1em}
.gate-email-status.err{color:#e5484d}
/* ---- drawer polish + transparent-image fixes ---- */
.gmain{border-radius:14px;background:#f2f5fa}
.gmain .pimg{object-fit:contain;padding:10px}
.thumb{background:#f2f5fa}
.thumbs canvas,.thumbs img.pthumb{border-radius:9px}
.gmain:has(.pimg) canvas,.thumb:has(.pimg) canvas{display:none!important}
.d-fav{width:46px;height:46px;border-radius:13px;transition:background .15s,border-color .15s,color .15s,transform .12s}
.d-fav svg{width:20px;height:20px}
@media(hover:hover){.d-fav:hover{border-color:var(--accent);color:var(--accent)}}
.d-fav:active{transform:scale(.96)}
.d-fav[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--fill-ink)}
.d-fav[aria-pressed="true"] svg{fill:currentColor;stroke:currentColor}
.mast-tools .tools-btn,.mast-tools .auth-btn{font-family:var(--f-disp);font-size:13px}.mast-tools .auth-btn{font-weight:600}
/* footer links: no underline */
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
/* real logo images */
.brand-img{display:block;height:26px;width:94px;background-color:var(--ink);-webkit-mask:url(/cdn-cgi/image/width=400,format=auto/logo-wordmark.png) left center/contain no-repeat;mask:url(/cdn-cgi/image/width=400,format=auto/logo-wordmark.png) left center/contain no-repeat}
.gate-logo-img{display:block;height:34px;width:122px;margin:0 auto 2px;background-color:var(--ink);-webkit-mask:url(/cdn-cgi/image/width=400,format=auto/logo-wordmark.png) center/contain no-repeat;mask:url(/cdn-cgi/image/width=400,format=auto/logo-wordmark.png) center/contain no-repeat}
/* filter controls: cohesive + slightly thicker */
.fsel select,.price-btn,.saved-chip,.sort,#sort{font-family:var(--f-mono)!important;font-size:12px!important;font-weight:600!important;height:34px!important;padding-top:0!important;padding-bottom:0!important;display:inline-flex;align-items:center}
.fsel select{padding:0 26px 0 12px!important}
/* ===== product PAGE (was modal) ===== */
.overlay{display:none!important}
.drawer{position:fixed;inset:0;width:100%;height:100%;max-height:100%;background:var(--ground);border:none;border-radius:0;box-shadow:none;transform:none;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .16s ease,visibility 0s linear .16s;display:flex;flex-direction:column;overflow:hidden;z-index:80}
.drawer.open{opacity:1;pointer-events:auto;transform:none;visibility:visible;transition:opacity .16s ease}
.p-top{display:flex;align-items:center;gap:14px;padding:11px 20px;border-bottom:1px solid var(--line);flex:none;background:color-mix(in srgb,var(--ground) 86%,transparent);backdrop-filter:saturate(1.3) blur(10px);position:static}
.p-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:12.5px;font-weight:600;color:var(--ink);background:none;border:none;cursor:pointer;padding:6px 8px;border-radius:9px}
.p-back svg{width:18px;height:18px}
.p-back:hover{background:var(--surface-2);color:var(--accent)}
.p-top .code{margin-right:auto}
.p-top-actions{display:flex;align-items:center;gap:10px}
.p-top-actions .d-jump{width:min(320px,44vw);margin:0}
.dbody{overflow-y:auto;min-height:0;max-width:1120px;margin:0 auto;width:100%;padding:28px 22px 96px}
.dbody>*+*{margin-top:28px}
.d-grid{display:grid;grid-template-columns:1fr;gap:28px}
.d-info{display:flex;flex-direction:column;gap:18px}
@media(min-width:860px){.d-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}.d-media{position:sticky;top:80px}.d-grid.no-media{grid-template-columns:1fr}}
.d-grid.no-media .d-media{display:none}
/* buy dropdown */
.buy-dd{position:relative;display:flex}
.buy-dd .agent.primary{flex:1;justify-content:center;border-radius:14px 0 0 14px}
.buy-dd .agent.primary:only-child{border-radius:14px} /* agent hubs: one button, no menu caret beside it */
.buy-dd-caret{flex:0 0 auto;width:50px;border:none;border-left:1px solid color-mix(in srgb,var(--fill-ink) 22%,transparent);background:var(--fill);color:var(--fill-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:0 14px 14px 0}
.buy-dd-caret svg{width:16px;height:16px}
.buy-dd-caret:hover{filter:brightness(1.12)}
.buy-dd-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(8,14,30,.28);overflow:hidden;z-index:20}
.buy-dd-item{display:flex;align-items:center;gap:11px;padding:13px 16px;color:var(--ink);text-decoration:none;border:0;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;width:100%;background:none;cursor:pointer;font-family:inherit;text-align:left}
.buy-dd-item:last-child{border-bottom:none}
.buy-dd-item:hover{background:var(--surface-2);color:var(--accent)}
.agent-ic{width:22px;height:22px;border-radius:6px;object-fit:contain;background:#fff;padding:2px;flex:none;box-shadow:0 1px 3px rgba(8,14,30,.14)}
.agent .agent-name{flex:0 1 auto}
.buy-dd-item .agent-name{flex:1}
.af-row{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 14px}.af-chip,.af-clear{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;font:inherit;font-size:13px;cursor:pointer;transition:background-color .15s ease,transform .15s ease}.af-chip{border:0;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--ink)}.af-chip:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}.af-chip svg{width:13px;height:13px;color:var(--accent)}.af-clear{border:1px solid var(--line-2);background:transparent;color:var(--muted)}.af-clear:hover{color:var(--ink)}.af-chip:active,.af-clear:active{transform:scale(.96)}
.buy-hint{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border-radius:12px;font-size:12.5px;line-height:1.35;color:var(--ink);text-decoration:none;background:color-mix(in srgb,var(--accent) 10%,transparent);transition:background-color .15s ease}.buy-hint:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}.buy-hint span{flex:1;min-width:0}.buy-hint svg{width:16px;height:16px;flex:none;color:var(--accent)}
.agent-badge{font-family:var(--f-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.agent.primary .agent-badge{background:var(--brand-red);color:#fff}
#pp-grid{margin-top:4px}
.pp-search{margin:8px 0 12px}
.pp-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
/* gallery favourite overlay */
.gallery-fav{position:absolute;top:12px;right:12px;z-index:3;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:0 4px 14px rgba(8,14,30,.22)}
.gallery-fav svg{width:20px;height:20px}
/* qc checker thumbnails */
.qc-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:12px}
.qc-thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#f2f5fa}
/* infinite scroll: never let the footer/sentinel become the scroll anchor, or each appended chunk drags the page down with it and the loader runs away */
main ~ *,#grid-sentinel,#empty,footer,footer *{overflow-anchor:none}
/* product page: keep the main top menu visible */
body.pp-open .masthead{background:var(--ground)}
body.pp-open .drawer{height:auto;bottom:0}
/* product page has its own header, hide the catalog search/filter toolbar (both PC + mobile) */
body.pp-open .toolbar{display:none!important}
/* mobile: filters scroll away like PC; only the search bar stays sticky (display:contents lets .deck stick page-wide instead of only while .toolbar is on screen) */
@media(max-width:560px){.toolbar .subdeck{position:static}
/* mobile filters: one tidy horizontal-scroll row instead of an uneven wrap */
.subdeck .wrap.filters-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:8px;padding-block:12px;padding-inline:22px;scroll-padding-inline:22px;overscroll-behavior-x:contain}
.subdeck{position:relative}.subdeck::after{content:'';position:absolute;right:0;top:0;bottom:0;width:20px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--ground))}
.subdeck .wrap.filters-row::-webkit-scrollbar{display:none}
.subdeck .wrap.filters-row>*{flex:0 0 auto}
.filters-row .spacer{display:none}
.fselbtn{height:36px;font-size:13px}
.saved-chip{height:36px}}
@media(max-width:560px){body.pp-open{overflow:hidden}body.pp-open .masthead{display:none}body.pp-open .drawer{position:fixed;inset:0;height:100dvh;bottom:0}body.pp-open .drawer .dbody{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}}
/* phones: the filters under "Browse all finds" in the product view scroll sideways in one row, like the main filter row */
@media(max-width:560px){.pp-filters{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;margin-inline:-22px;padding:2px 22px}.pp-filters::-webkit-scrollbar{display:none}.pp-filters>*{flex:0 0 auto}}
/* ---- MyCNBox welcome-bonus popup (added) ---- */
.pcwb-ov{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(12,16,28,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .25s ease}
.pcwb-ov.on{opacity:1;visibility:visible}
.pcwb-card{position:relative;width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);padding:34px 26px 26px;box-shadow:0 24px 60px rgba(10,16,40,.30);transform:translateY(14px) scale(.98);transition:transform .28s ease;text-align:center;max-height:88vh;max-height:88dvh;overflow:auto;overscroll-behavior:contain}
.pcwb-ov.on .pcwb-card{transform:none}
.pcwb-x{position:absolute;top:5px;right:5px;width:44px;height:44px;border:none;background:transparent;color:var(--muted);font-size:22px;cursor:pointer;line-height:1;border-radius:8px}
.pcwb-x:hover{background:var(--line);color:var(--ink)}
.pcwb-badge{display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.pcwb-amt{font-size:46px;font-weight:800;color:var(--ink);line-height:1;margin:2px 0}
.pcwb-h{font-size:18px;font-weight:700;color:var(--ink);margin:12px 0 6px}
.pcwb-p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 20px}
.pcwb-btn{display:block;width:100%;padding:14px 18px;border-radius:var(--radius);background:var(--fill);color:var(--fill-ink);font-size:15px;font-weight:600;text-decoration:none;border:none;cursor:pointer;box-sizing:border-box}
.pcwb-btn:hover{opacity:.92}
.pcwb-more{display:inline-block;margin-top:14px;padding:6px 4px;background:none;border:none;font:inherit;font-size:12.5px;color:var(--muted);text-decoration:underline;cursor:pointer}
.pcwb-agents{max-height:0;overflow:hidden;transition:max-height .32s ease;text-align:left;margin-top:8px}
.pcwb-agents.open{max-height:460px;overflow:auto}
.pcwb-agent{display:flex;align-items:center;gap:10px;padding:11px 2px;border-top:1px solid var(--line)}
.pcwb-agent .nm{font-size:13px;font-weight:600;color:var(--ink)}
.pcwb-agent .bn{font-size:11.5px;color:var(--muted);line-height:1.4}
.pcwb-agent .go{margin-left:auto;flex:none;font-size:12px;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap;padding:6px 11px;border:1px solid var(--line);border-radius:10px}
.pcwb-agent .go:hover{background:var(--line)}
.pc-mycnbox-btn{font-family:var(--f-body);font-size:12.5px;font-weight:600;color:#fff;background:#E1301F;border:none;border-radius:10px;padding:8px 12px;cursor:pointer;white-space:nowrap;line-height:1}
@media(max-width:640px){.pcwb-amt{font-size:40px}.pcwb-card{padding:30px 20px 22px}.pc-mycnbox-btn{font-size:11px;padding:7px 9px}}
/* ---- QC photos on listings (added) ---- */
.thumb{position:relative}
.qc-badge{position:absolute;left:8px;bottom:8px;z-index:2;font-family:var(--f-mono);font-size:9.5px;background:rgba(12,16,28,.74);color:#fff;padding:3px 7px;border-radius:6px;letter-spacing:.02em;pointer-events:none}
.pc-qclb{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;background:rgba(8,10,18,.88);padding:24px;cursor:zoom-out}
.pc-qclb.on{display:flex}
.gmain .pimg{cursor:zoom-in}
.pc-qclb img{max-width:96vw;max-height:92vh;max-height:92dvh;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.pc-qclb-x{position:fixed;top:14px;right:18px;width:38px;height:38px;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:24px;border-radius:10px;cursor:pointer;line-height:1}
/* ---- mobile polish (added) ---- */
@media(max-width:560px){
/* Masthead: MyCNBox CTA drops to its own full-width row so the tools row isn't crowded */
.mast-tools{flex-wrap:wrap;gap:8px;row-gap:8px}
.pc-mycnbox-btn{order:9;flex:0 0 100%;width:100%;height:42px;padding:0 14px;font-size:13.5px;border-radius:12px;display:flex;align-items:center;justify-content:center;letter-spacing:.01em}
.mast-tools .auth-btn{height:40px}
.mast-tools .icon-btn,.mast-tools .theme-btn{width:40px;height:40px}
.tools-btn{min-height:40px;display:inline-flex;align-items:center}
}
footer .seo-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;padding-top:22px;padding-bottom:6px}footer .seo-links b{display:block;font-size:13px;margin-bottom:6px;color:var(--ink)}footer .seo-links a{display:block;font-size:13px;color:var(--muted);text-decoration:none;padding:2px 0}footer .seo-links a:hover{color:var(--ink)}footer .seo-disc{font-size:11.5px;color:var(--muted);padding-bottom:18px}
/* ================= premium restyle (added) ================= */
.thumb{aspect-ratio:4/5;height:auto;background:radial-gradient(120% 90% at 50% 18%,var(--studio-a) 0%,var(--studio-b) 100%);border-bottom:0;overflow:hidden}
.thumb .pimg{box-sizing:border-box;object-fit:contain;padding:10% 9% 12%;filter:drop-shadow(0 12px 14px rgba(20,16,10,.16));transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.card .body{padding:14px 15px 15px;gap:6px}
.brand-line{font-size:10px;letter-spacing:.16em;color:var(--muted);font-weight:600;margin-bottom:0}
.card .title{font-size:14px;font-weight:500;line-height:1.38;letter-spacing:-.005em;color:var(--ink)}
.card a.title{text-decoration:none}
.price-row{border-top:0;padding-top:8px;gap:7px;align-items:baseline}
.card .price{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.subprice{font-size:11px;color:var(--faint)}
.price-row .cat{display:none}
.fav{top:10px;right:10px;bottom:auto;width:32px;height:32px;background:rgba(255,255,255,.78);border:1px solid rgba(0,0,0,.06);color:#1b2233;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 8px rgba(0,0,0,.10);opacity:.92;transition:opacity .2s,transform .2s}
.card:hover .fav{opacity:1}
@media (hover:hover) and (pointer:fine){.fav:hover{transform:scale(1.06)}}
.fav[aria-pressed="true"] svg{fill:currentColor}
.qc-badge{left:10px;bottom:10px;background:rgba(14,18,28,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:10px;padding:4px 8px;border-radius:999px;letter-spacing:.03em}
/* ---- top bar ---- */
.masthead{border-bottom:1px solid var(--line)!important;background:color-mix(in srgb,var(--ground) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);position:relative;z-index:45}
@media(min-width:561px){
.mast-row{min-height:64px;align-items:center}
.mast-tools{gap:10px;align-items:center}
.mast-tools .mast-div{display:none}
.tools-btn{font-size:13.5px;font-weight:500;height:36px;padding:0 12px;border-radius:999px;color:var(--ink)}
.tools-btn:hover{background:var(--surface-2)}
/* language / currency / agent as one tidy segmented pill */
.mast-tools .selwrap{height:36px;display:flex;align-items:center;border:1px solid var(--line);background:var(--surface);margin:0}
.mast-tools .selwrap + .selwrap{margin-left:-11px;border-left:0}
.mast-tools .tools-nav + .selwrap{border-radius:999px 0 0 999px;padding-left:4px}
.mast-tools .selwrap:nth-of-type(4),.mast-tools .selwrap:last-of-type{border-radius:0 999px 999px 0;padding-right:4px}
.mast-tools .selwrap select.mini{font-size:12.5px;color:var(--muted);height:34px;padding:0 22px 0 12px;background:transparent;border:0}
.mast-tools .selwrap select.mini:hover{color:var(--ink)}
.mast-tools .selwrap + .selwrap select.mini{border-left:1px solid var(--line)}
.pc-mycnbox-btn{height:36px;padding:0 16px;font-size:13px;font-weight:600;border-radius:999px;background:linear-gradient(180deg,#EA3B28,#C92617);box-shadow:0 6px 16px rgba(225,48,31,.28),inset 0 1px 0 rgba(255,255,255,.18);letter-spacing:.005em}
.pc-mycnbox-btn:hover{opacity:1;filter:brightness(1.06)}
.mast-tools .auth-btn{height:36px;padding:0 16px;font-size:13px;font-weight:600;border-radius:999px}
.mast-tools .icon-btn,.mast-tools .theme-btn{width:36px;height:36px;border:1px solid var(--line);background:var(--surface)}
.mast-tools .icon-btn:hover,.mast-tools .theme-btn:hover{background:var(--surface-2)}
}
@media(max-width:560px){
.thumb .pimg{padding:9% 8% 11%}
.card .body{padding:11px 12px 12px}
.card .title{font-size:13.5px}
.card .price{font-size:15px}
.fav{width:30px;height:30px;top:8px;right:8px}
.pc-mycnbox-btn{background:linear-gradient(180deg,#EA3B28,#C92617);box-shadow:0 6px 16px rgba(225,48,31,.25);border-radius:12px;font-weight:600}
}
.brand-img{height:32px;width:118px}
@media(max-width:560px){.brand-img{height:28px;width:104px}}
@media(max-width:560px){
.mast-row{flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:10px;padding-block:10px}
.mast-tools{display:contents}
.brand{margin-right:auto}
.mast-tools .icon-btn{display:none}
.mast-tools .tools-btn{padding:0 8px}
.pc-mycnbox-btn{order:9;flex:0 0 100%}
}
@media(max-width:560px){.grid{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.card{border-radius:14px}}
.card .thumb{flex:none}
/* tablet / phone-landscape masthead: let the tools wrap instead of running off-screen */
@media(min-width:561px) and (max-width:899px){
.mast-tools{flex:1 1 0;min-width:0;flex-wrap:wrap;justify-content:flex-end;row-gap:8px}
.pc-mycnbox-btn{order:9}
}
@media(max-width:560px){
/* guests can switch language / currency / agent: the three pickers get their own masthead row */
.mast-tools .selwrap{display:block;order:8;flex:1 1 28%;min-width:0}
.mast-tools .selwrap .csel{display:flex}
.mast-tools .selwrap .cselbtn{width:100%;min-width:0;height:40px;justify-content:space-between;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:0 10px;font-size:13px}
.mast-tools .selwrap .csellbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* inputs at 16px so iOS Safari doesn't auto-zoom on focus */
.sheet input,.sheet select,.gate-email input,.tool-in,.set-row input,.set-row select{font-size:16px}
}
@media(max-width:480px){.gate-email{flex-direction:column}.gate-email .btn{width:100%}}
@media(max-width:380px){.mast-row{column-gap:4px}}
/* keep product-page content clear of the notch / home indicator (viewport-fit=cover) */
.dbody{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right));padding-bottom:calc(96px + env(safe-area-inset-bottom))}
/* ================= polish pass, 17 Oct 2026 ================= */
/* hero is on screen at once: its entrance animation stalled at opacity 0 while the catalogue was being built, so phones saw an empty hero for seconds */
.hero-h,.hero-sub,.hero-stats,.hero-cta{animation:none!important;opacity:1;transform:none}
/* filter row: one height, one radius, calm borders; the open one is clearly marked */
.fselbtn,.saved-chip,.price-btn{border-radius:999px!important;border:1px solid var(--line)!important;background:var(--surface)!important;transition:border-color .15s,background .15s}
/* dropdown menus: a proper floating panel */
.cselmenu{border-radius:14px!important;border:1px solid var(--line)!important;box-shadow:0 18px 48px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.18)!important;overscroll-behavior:contain}
.cselitem{border-radius:9px}
.cselsearch input{border-radius:10px}
/* search field: clear focus */
.search:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
/* cards: titles never run past two lines, prices line up */
.card .title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.76em}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* phone masthead: logo, tools, sign in, settings, theme on ONE row; language / currency / agent open from the settings button */
.set-btn{display:none;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);align-items:center;justify-content:center;padding:0;cursor:pointer;flex:none}
.set-btn svg{width:18px;height:18px}
.set-btn[aria-expanded="true"]{color:var(--ink);border-color:var(--accent)}
@media(max-width:560px){
.set-btn{display:inline-flex}
.mast-tools .selwrap{display:none!important}
.masthead.set-open .mast-tools .selwrap{display:block!important}
.mast-tools .theme-btn{display:none}
.masthead.set-open .mast-tools .selwrap{order:8;flex:1 1 calc(33% - 22px);min-width:84px}
.masthead.set-open .mast-tools .theme-btn{display:inline-flex;order:9}
.pc-mycnbox-btn{order:10!important}
.mast-row{row-gap:8px;padding-block:8px}
.pc-mycnbox-btn{height:40px!important;font-size:13.5px}
.hero-in{padding-block:28px 18px;gap:14px}
.hero-cta{margin-top:12px}
.tp-badge{margin-top:6px}
.strip-head{padding-top:8px}
}
/* ================= design system, 17 Oct 2026: calm, neutral, editorial ================= */
:root{--studio-a:#F3F2EF;--studio-b:#E9E7E2;--img-edge:oklch(0 0 0 / .06);--sh-1:0 1px 2px rgba(17,17,16,.05),0 4px 14px rgba(17,17,16,.05);--sh-pop:0 24px 60px rgba(17,17,16,.16),0 2px 8px rgba(17,17,16,.08)}
:root[data-theme="dark"]{--studio-a:#EEEDEA;--studio-b:#E2E0DB;--img-edge:oklch(1 0 0 / .06);--sh-1:0 1px 2px rgba(0,0,0,.4);--sh-pop:0 28px 70px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--studio-a:#EEEDEA;--studio-b:#E2E0DB;--img-edge:oklch(1 0 0 / .06);--sh-1:0 1px 2px rgba(0,0,0,.4);--sh-pop:0 28px 70px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4)}}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:var(--f-body);font-feature-settings:"cv11","ss01";letter-spacing:-.006em;background:var(--ground)}
h1,h2,h3,.hero-h{text-wrap:balance} p{text-wrap:pretty}
.count,.price,.subprice,.hero-stats{font-variant-numeric:tabular-nums}
/* masthead: quiet glass bar with one hairline */
.mast-tools .tools-btn,.tools-btn{color:var(--ink);font-weight:500}
@media(min-width:561px){
.mast-tools .selwrap{background:transparent!important;border-color:var(--line)!important}
.mast-tools .auth-btn{background:var(--fill);color:var(--fill-ink);font-weight:600}
.mast-tools .icon-btn,.mast-tools .theme-btn{background:transparent!important;border-color:var(--line)!important}
}
/* hub pages: the spreadsheet comes first, the hero shrinks to a heading */
html.hub .hero-stats,html.hub .tp-badge,html.hub .agents-strip,html.hub .hero-cta,html.hub .strip-head,html.hub .hero-strip{display:none!important}
html.hub .hero-in{padding-block:28px 22px!important;gap:10px!important}
html.hub .hero-h{font-size:clamp(28px,4.2vw,44px)!important;max-width:none}
html.hub .hero-sub{font-size:16px!important}
html.agent-lock .mast-tools .selwrap:has(#agent){display:none!important}
.hub-bc{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;font-size:13px;color:var(--faint);margin:0 0 2px}
.hub-bc a{color:var(--muted);text-decoration:none}.hub-bc a:hover{color:var(--ink)}
.hub-seo{max-width:var(--maxw,1280px);margin:0 auto;padding:40px 24px 8px;border-top:1px solid var(--line)}
.hub-seo h2{font-family:var(--f-code)!important;font-size:11.5px;font-weight:500!important;letter-spacing:.14em!important;text-transform:uppercase;margin:0 0 14px;color:var(--muted)}
.hub-seo .hub-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.hub-seo .hub-chips a{border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none}
.hub-seo .hub-chips a:hover{background:var(--surface-2)}
.hub-seo details{border-bottom:1px solid var(--line);padding:14px 0;max-width:760px}
.hub-seo summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}.hub-seo summary::-webkit-details-marker{display:none}.hub-seo summary::after{content:"+";font-weight:400;font-size:20px;line-height:1;color:var(--muted);transition:transform .2s}.hub-seo details[open] summary::after{transform:rotate(45deg)}.hub-seo details:first-of-type{border-top:1px solid var(--line)}.hub-seo h2+details{margin-top:4px}
.hub-seo details p{margin:10px 0 0;color:var(--muted);font-size:14.5px;line-height:1.6}
/* footer: one top bar, five even columns aligned to the top, a quiet disclaimer */
footer{padding:0 0 40px!important;margin-top:48px}
footer>.wrap:first-child{display:flex!important;align-items:center!important;gap:12px 22px;padding-top:28px;padding-bottom:28px;border-bottom:1px solid var(--line)}
footer>.wrap:first-child span:not(.mono):not(.spacer){color:var(--muted);font-size:13.5px}
footer .mono{font-size:11px!important;letter-spacing:.1em!important;color:var(--faint)!important}
footer a.mono:hover{color:var(--ink)!important}
footer .seo-links{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:36px 28px;align-items:start!important;padding-top:40px!important;padding-bottom:36px!important}
footer .seo-links>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
footer .seo-links b{font-size:11.5px!important;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)!important;margin:0 0 14px!important}
footer .seo-links a{display:block;font-size:14px;line-height:1.35;color:var(--muted);padding:5px 0;transition:color .15s}
footer .seo-links a:hover{color:var(--ink)}
footer .seo-disc{border-top:1px solid var(--line);padding-top:24px;margin:0 auto;font-size:12.5px;line-height:1.65;color:var(--faint)}
@media(max-width:980px){footer .seo-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){footer .seo-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}footer>.wrap:first-child{flex-wrap:wrap}}
/* no coloured strip above the masthead */
.mast-top{display:none!important}
/* the old native-select chevron sat on top of the label ("English" with an arrow through it): the custom button draws its own */
.mast-tools .selwrap>svg{display:none!important}
.mast-tools .selwrap .cselbtn{gap:6px;padding:0 14px!important}
.mast-tools .selwrap .cselchev{position:static!important;transform:none!important;width:11px!important;height:11px!important;flex:none;opacity:.55;margin:0!important}
@media(min-width:561px){.mast-tools .selwrap .cselbtn{background:transparent!important;color:var(--muted)!important;height:34px}.mast-tools .selwrap .cselbtn:hover,.mast-tools .selwrap .cselbtn[aria-expanded="true"]{color:var(--ink)!important;background:transparent!important}}
.pc-mycnbox-btn{background:var(--brand-red)!important;box-shadow:none!important;font-weight:600;letter-spacing:-.005em}
.pc-mycnbox-btn:hover{background:var(--brand-red-hover)!important;filter:none}
/* hero: editorial headline, one strong action */
.hero-h{font-family:var(--f-disp);font-weight:700;font-size:clamp(34px,5.6vw,64px);line-height:1.02;letter-spacing:-.045em;max-width:14ch}
.hero-sub{color:var(--muted);font-size:clamp(15px,1.6vw,18px);line-height:1.55;max-width:46ch}
.hero-stats{font-family:var(--f-body);font-size:13px;color:var(--muted);gap:22px}
.hero-stats .stat b{font-size:15px;font-weight:600;color:var(--ink)}
.hero-cta{background:var(--fill)!important;color:var(--fill-ink)!important;font-weight:600;font-size:15px;padding:14px 26px;box-shadow:none!important;transition:transform .15s ease,opacity .15s ease}
@media(hover:hover){.hero-cta:hover{opacity:.88}} /* a tap on a phone does not leave it faded (DESIGN.md rule 8) */
.hero-cta:active{transform:scale(.96)}
.tp-badge{font-size:13px;color:var(--muted)}
.agents-strip .lbl,.strip-head{font-family:var(--f-body);font-size:11px;letter-spacing:.14em;font-weight:500;color:var(--faint)}
.strip-head::before,.strip-head::after{background:var(--line)}
.ftile{border-radius:14px;box-shadow:inset 0 0 0 1px var(--img-edge)}
/* search + filters */
.toolbar .deck,.toolbar .subdeck,.deck{background:color-mix(in srgb,var(--ground) 92%,transparent)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)!important}
.search{background:var(--surface)!important;border:1px solid var(--line-2)!important;border-radius:14px!important;box-shadow:var(--sh-1)}
.search input{font-size:16px!important;padding:15px 14px!important;letter-spacing:-.01em}
.search svg{color:var(--faint)}
.search:focus-within{border-color:var(--ink)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 8%,transparent)!important}
.fselbtn,.saved-chip,.price-btn{height:36px!important;font-family:var(--f-body)!important;font-size:13px!important;font-weight:500!important;letter-spacing:-.005em;color:var(--ink)!important;background:transparent!important;border:1px solid var(--line-2)!important;padding:0 14px!important}
.fselbtn:hover,.saved-chip:hover,.price-btn:hover{background:var(--surface-2)!important;border-color:var(--line-2)!important}
.fselbtn[aria-expanded="true"],.price-btn[aria-expanded="true"],.saved-chip[aria-pressed="true"]{background:var(--fill)!important;color:var(--fill-ink)!important;border-color:var(--fill)!important}
.fselbtn svg,.price-btn svg{color:currentColor;opacity:.6}
.count{font-family:var(--f-body);font-size:12.5px;color:var(--faint)}
.cselmenu{background:var(--surface)!important;border:1px solid var(--line)!important;box-shadow:var(--sh-pop)!important;border-radius:14px!important;padding:6px!important}
.cselitem{font-family:var(--f-body)!important;font-size:13.5px!important;font-weight:450;border-radius:8px!important;padding:9px 10px!important;color:var(--ink)}
.cselitem:hover{background:var(--surface-2)!important}
.cselitem.sel{font-weight:600}
.cselitem .ck{color:var(--accent)}
.cselsearch input{background:var(--surface-2)!important;border:1px solid transparent!important;border-radius:8px!important}
.cselsearch input:focus{border-color:var(--line-2)!important;outline:none}
/* product grid: no boxes, the photo is the card (editorial shop layout) */
.card .thumb{background:radial-gradient(120% 90% at 50% 20%,var(--studio-a),var(--studio-b))!important}
/* card photos (28 Oct 2026): the zoom takes 200 ms like every other hover (DESIGN.md rule 8), and lazily loaded photos fade
in instead of popping (card() adds .ld until the photo has loaded; the first 8 cards never get it) */
.card .thumb .pimg{transition:opacity .2s var(--ease),transform .2s var(--ease)}
.card .thumb .pimg.ld{opacity:0}
@media (hover:hover){.card:hover .thumb .pimg{transform:scale(1.03)}}
.card .body{padding:12px 2px 0!important;gap:4px!important;background:transparent!important}
.brand-line{font-family:var(--f-body)!important;font-size:11px!important;letter-spacing:.08em!important;font-weight:600!important;color:var(--muted)!important;text-transform:uppercase}
.card .title{font-size:14px!important;font-weight:500!important;line-height:1.4!important;color:var(--ink)!important;letter-spacing:-.01em;min-height:2.8em}
.price-row{padding-top:4px!important;border:0!important}
.card .price{font-size:15px!important;font-weight:600!important;letter-spacing:-.01em}
.subprice{color:var(--faint)!important;font-size:12px!important}
.fav{background:color-mix(in srgb,#fff 88%,transparent)!important;border:0!important;box-shadow:0 1px 3px rgba(0,0,0,.12)!important;color:#111!important}
.fav:active{transform:scale(.96)}
.qc-badge{background:rgba(17,17,16,.72)!important;font-family:var(--f-body);font-weight:500}
@supports selector(:has(a)){.card:has(a.title:focus-visible){outline:2px solid var(--ink);outline-offset:4px}.card a.title:focus-visible{outline:none}}
/* product page: same studio backdrop as the grid, similar finds as quiet tiles */
.drawer{background:var(--ground)!important}
.gmain{background:radial-gradient(120% 90% at 50% 20%,var(--studio-a),var(--studio-b))!important;border-radius:18px!important;border:0!important;box-shadow:inset 0 0 0 1px var(--img-edge)}
.sim-card{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;text-align:left}
.sim-thumb{background:radial-gradient(120% 90% at 50% 20%,var(--studio-a),var(--studio-b))!important;border-radius:12px!important;box-shadow:inset 0 0 0 1px var(--img-edge)}
.sim-t{font-family:var(--f-body)!important;font-size:12.5px!important;font-weight:500!important;color:var(--ink)!important;letter-spacing:-.005em}
.sim-p{font-family:var(--f-body)!important;font-weight:600!important;font-size:12.5px!important;color:var(--ink)!important}
.sec-label{font-family:var(--f-body)!important;font-size:11px!important;letter-spacing:.12em!important;font-weight:500!important;color:var(--faint)!important}
/* footer */
footer{border-top:1px solid var(--line)!important;color:var(--muted)}
footer .mono{font-family:var(--f-body);letter-spacing:.08em}
/* v7 design layer (25 Oct 2026): "qualit.ly + modern Apple". Near-black ground with hairline borders, Instrument Sans,
JetBrains Mono for small labels, rounded cards with real gaps, white pill buttons, a floating glass header.
Light theme follows Apple: #F5F5F7 ground, white cards, #1D1D1F ink. Loaded last, so it wins over older layers. */
:root{
--ground:#F5F5F7;--surface:#FFFFFF;--surface-2:#F0F0F2;--ink:#1D1D1F;--muted:#6E6E73;--faint:#6E6E73;
--line:#E3E3E8;--line-2:#D2D2D7;--fill:#1D1D1F;--fill-ink:#FFFFFF;--accent:#0066CC;
--f-disp:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
--f-body:var(--f-disp);
--f-mono:var(--f-body);--f-code:var(--f-body);
--radius:14px;--r-card:18px;--glass:rgba(255,255,255,.72);--glow:rgba(0,113,227,.06);--brand-red:#D9301E;--brand-red-hover:#C42A1A;
--sh-card:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);
--ease:cubic-bezier(.2,.7,.2,1); /* same curve as --ease in ds.css: the one ease-out for every enter, hover and press */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
--ground:#0B0D10;--surface:#121519;--surface-2:#181C21;--ink:#ECEFF2;--muted:#99A2AB;--faint:#7C848D;
--line:#23272E;--line-2:#323840;--fill:#ECEFF2;--fill-ink:#0B0D10;--accent:#8EA6DC;
--glass:rgba(18,21,25,.72);--glow:rgba(142,166,220,.08);--sh-card:none}}
:root[data-theme="dark"]{
--ground:#0B0D10;--surface:#121519;--surface-2:#181C21;--ink:#ECEFF2;--muted:#99A2AB;--faint:#7C848D;
--line:#23272E;--line-2:#323840;--fill:#ECEFF2;--fill-ink:#0B0D10;--accent:#8EA6DC;
--glass:rgba(18,21,25,.72);--glow:rgba(142,166,220,.08);--sh-card:none}
html,body{background:var(--ground)!important}
/* touch (28 Oct 2026): no text inflation in landscape, and a long press on a control does not select its label */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.ftile,.fselbtn,.saved-chip,.price-btn,.gtab,.p-back,.agent,.buy-dd-caret,.hero-cta,.pc-mycnbox-btn,.btn{-webkit-user-select:none;user-select:none}
@media(hover:none){.card{-webkit-user-select:none;user-select:none}} /* mouse users can still copy a name or price */
body{font-family:var(--f-body)!important;-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
h1,h2,h3,.hero h1{font-family:var(--f-disp)!important;font-weight:600!important;letter-spacing:-.035em!important}
/* floating glass header */
.masthead{background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:12px 16px 0;z-index:45}
.masthead .mast-row{background:var(--glass);border:1px solid var(--line);border-radius:20px;-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);box-shadow:var(--sh-card)}
.hero{border:0!important;margin-top:-80px;padding-top:80px;background:radial-gradient(1100px 540px at 50% 0%,var(--glow),transparent 70%)!important}
/* controls: pills */
.mast-tools .cselbtn,.mast-tools .tools-btn{border-radius:999px!important}
.mast-tools .auth-btn{background:var(--fill)!important;color:var(--fill-ink)!important}
.pc-mycnbox-btn{border-radius:999px!important;font-family:var(--f-disp)!important;font-weight:600!important;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.mast-tools .icon-btn,.mast-tools .theme-btn,.mast-tools .set-btn{border:1px solid var(--line)!important;background:transparent!important}
@media(hover:hover){.mast-tools .icon-btn:hover,.mast-tools .theme-btn:hover,.mast-tools .set-btn:hover{background:var(--surface-2)!important;border-color:var(--line-2)!important}}
.mast-tools .set-btn[aria-expanded="true"]{background:var(--surface-2)!important;border-color:var(--line-2)!important}
/* search and filters */
.search{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:14px!important;padding:0 14px;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.search input{font-size:16px!important}
/* grid: real cards with gaps */
.grid{gap:16px!important;background:transparent!important;border:0!important}
.card{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--r-card)!important;overflow:hidden;box-shadow:var(--sh-card);transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .2s ease!important}
@media(hover:hover){.card:hover{transform:translateY(-2px);border-color:var(--line-2)!important}}
.card .thumb{border-bottom:1px solid var(--line)!important}
/* QC photo swipe on phones (28 Oct 2026): the next photo slides in 28 px from the side the finger moved toward */
@keyframes galNext{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes galPrev{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.gmain .pimg.from-next{animation:galNext .2s var(--ease)}
.gmain .pimg.from-prev{animation:galPrev .2s var(--ease)}
.card .brand-line,.card .cat,.card .subprice{font-family:var(--f-code)!important;font-size:11px!important;letter-spacing:.04em!important;font-weight:400!important}
.card .title{font-weight:500!important}
/* theme switch (28 Oct 2026): transitions are off for the frame the theme changes (see the #theme handler); the cross-fade
takes 200 ms (DESIGN.md rule 8) and the moon icon turns in 200 ms without the 500 ms overshoot, the only bouncy curve on the site */
html.theme-swap *,html.theme-swap *::before,html.theme-swap *::after{transition:none!important}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
.theme-btn svg{transition:transform .2s var(--ease)}
.card .price{font-weight:600!important;font-variant-numeric:tabular-nums}
/* product gallery (28 Oct 2026): the photo on show is ringed, and a new main photo fades in over 200 ms instead of 280 ms */
.thumbs .qcthumb-btn.on{outline:2px solid var(--ink);outline-offset:2px}
.gmain .pimg,.gmain canvas{animation-duration:.2s;animation-timing-function:var(--ease)}
/* small mono labels above headings, like qualit.ly */
.v7-eyebrow{display:block;font-family:var(--f-code);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.card .body{padding:12px 14px 14px!important;gap:4px!important}
/* press feedback (DESIGN.md rule 8, 28 Oct 2026): every control answers the finger the moment it lands. The buy button, the
MyCNBox button, the sign-in buttons and the filter pills had no pressed state, and phones painted the grey tap box
instead. Pills and icons shrink to .96, wide buttons to .98. The split buy button shrinks as one piece. */
.buy-dd,.buy-hint,.pc-mycnbox-btn,.btn.oauth,.pcwb-btn,.wb-btn,.chip,.fselbtn,.saved-chip,.price-btn,.cselbtn,.gtab,.mast-tools .tools-btn,.set-btn,.p-back,.dshare,.mast-tools .theme-btn,.mast-tools .icon-btn,.agent,.buy-dd-caret,.buy-dd-item,.fav,.d-fav,.hero-cta,.af-chip,.af-clear,.gate-email .btn,.mast-tools .auth-btn{-webkit-tap-highlight-color:transparent}
.buy-dd{transition:transform .16s var(--ease)}
.buy-hint,.pc-mycnbox-btn,.btn.oauth,.pcwb-btn,.wb-btn,.chip,.fselbtn,.saved-chip,.price-btn,.cselbtn,.mast-tools .tools-btn,.set-btn,.p-back,.dshare,.mast-tools .theme-btn,.mast-tools .icon-btn{transition:transform .16s var(--ease),background-color .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease,filter .15s ease}
.chip:active,.fselbtn:active,.saved-chip:active,.price-btn:active,.cselbtn:active,.gtab:active,.mast-tools .tools-btn:active,.set-btn:active,.p-back:active,.dshare:active,.wb-btn:active,.mast-tools .theme-btn:active,.mast-tools .icon-btn:active{transform:scale(.96)}
.buy-hint:active,.pc-mycnbox-btn:active,.btn.oauth:active,.pcwb-btn:active{transform:scale(.98)} /* the sign-in and bonus buttons are full width */
.buy-dd:has(> .agent.primary:active,> .buy-dd-caret:active){transform:scale(.98)} /* own rule: a browser without :has() drops only this one */
/* product view controls in v7 (28 Oct 2026): pill tags like the variant chips, a round save button on the photo like the card
star, and a rounded settings sheet */
.meta .tag{border-radius:999px;padding:5px 12px;font-size:12.5px;text-transform:none;letter-spacing:0}
.gallery-fav{border-radius:999px;box-shadow:var(--sh-1)}
.sheet{border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-pop)}
/* agent logos in the agent menu (owner, 25 Oct 2026) */
.cselico{width:20px;height:20px;border-radius:6px;object-fit:contain;flex:none;background:#fff;box-shadow:0 0 0 1px var(--line)}
.cselbtn .cselico{width:18px;height:18px;margin-right:2px}
/* menus and popovers (28 Oct 2026): a 150 ms fade and a small scale out of the edge next to their button when they open, so
they read as coming from it. They still close at once. */
.cselmenu,.tools-menu,#acct-menu,.price-pop,.buy-dd-menu{transition:opacity .15s var(--ease),transform .18s var(--ease)}
.cselmenu,.tools-menu,.price-pop{transform-origin:top left}
.cselmenu.cm-right,#acct-menu{transform-origin:top right}
.cselmenu.cm-portal,.buy-dd-menu{transform-origin:top center}
@starting-style{.cselmenu,.tools-menu,#acct-menu,.price-pop,.buy-dd-menu{opacity:0;transform:scale(.97)}}
.cselitem .ck{width:12px}
/* overlays (motion, 28 Oct 2026): the sign-up gate, the MyCNBox bonus popup, the how-to-order popup, the opt-in and copy
toasts and the QC zoom used to pop in: each is un-hidden and gets its on/show class in the same frame, so the browser
never saw a start state. @starting-style gives them one (browsers without it keep the instant open). The bonus popup
also hid instantly on close, because visibility flipped before its fade could show. 200 ms max (DESIGN.md rule 8). */
.gate,.tut-pop,.pc-qclb{transition:opacity .2s var(--ease)}
.gate-card{transition:opacity .2s var(--ease),transform .2s var(--ease)}
.pcwb-ov{transition:opacity .18s var(--ease),visibility 0s linear .18s}
.pcwb-ov.on{transition:opacity .2s var(--ease),visibility 0s}
.pcwb-card{transition:transform .2s var(--ease)}
.optin-toast{transition:transform .2s var(--ease),opacity .2s var(--ease)}
.pc-toast{transition:opacity .2s var(--ease),transform .2s var(--ease)}
.pc-qclb img{transition:opacity .2s var(--ease),transform .2s var(--ease)}
@starting-style{
.gate{opacity:0}
.gate .gate-card{opacity:0;transform:translateY(8px) scale(.97)}
.pcwb-ov.on{opacity:0}
.pcwb-ov.on .pcwb-card{transform:translateY(14px) scale(.98)}
.tut-pop.show{opacity:0}
.optin-toast.show{opacity:0;transform:translate(-50%,140%)}
.pc-toast.show{opacity:0;transform:translateX(-50%) translateY(12px)}
.pc-qclb.on{opacity:0}
.pc-qclb.on img{opacity:0;transform:scale(.96)}
}
/* every floating menu uses the picker panel (28 Oct 2026): hairline border and --sh-pop instead of navy-tinted shadows; the
Tools and account menus also get the picker's radius, padding and item type */
.menu,.tools-menu,.price-pop,.buy-dd-menu{border:1px solid var(--line);box-shadow:var(--sh-pop)}
.tools-menu,.menu{background:var(--surface);border-radius:14px;padding:6px}
.tools-menu a,.menu button{font-family:var(--f-body);font-size:13.5px;border-radius:8px;padding:9px 10px}
.tools-menu .tools-label{padding:2px 10px 5px}
/* skip link (28 Oct 2026): first focus stop in the header, shown only while focused */
.skip-link{position:fixed;left:16px;top:-80px;z-index:200;padding:10px 18px;border-radius:999px;background:var(--fill);color:var(--fill-ink);font-weight:600;font-size:14px;text-decoration:none}
.skip-link:focus{top:16px}
/* touch screens (DESIGN.md rule 10, 28 Oct 2026): 44 px targets without changing how the controls look. The 17 Oct filter rule
(36px, !important) beat the 40px phone rule; the card save star was 30 px and the product view Back link 30 px tall. */
@media (pointer:coarse){
.fselbtn,.saved-chip,.price-btn{height:44px!important}
.price-pop{top:52px} /* under the taller price pill, not on it */
.optin-toast button{min-height:44px}
.fav::after,.dshare::after{content:"";position:absolute;inset:-7px}
.dshare{position:relative}
.p-top{padding-block:6px}
.p-back{min-height:44px;padding:0 10px 0 4px}
.cselitem{min-height:44px}
.pp-slider input[type=range]::-webkit-slider-thumb{width:28px;height:28px;margin-top:-3px}
.pp-slider input[type=range]::-moz-range-thumb{width:26px;height:26px}
}
@media(max-width:560px){.masthead{padding:8px 10px 0}.masthead .mast-row{border-radius:16px}.hero{margin-top:-72px;padding-top:72px}}
/* mid-size screens (561-1180 px): language and currency move behind the globe button, like on phones, so the
header stays on one row instead of wrapping the red button (owner, 25 Oct 2026) */
@media(min-width:561px) and (max-width:1180px){
.set-btn{display:inline-flex}
.mast-tools .selwrap{display:none!important}
.masthead.set-open .mast-row{flex-wrap:wrap}
.masthead.set-open .mast-tools{flex-wrap:wrap}
.masthead.set-open .mast-tools .selwrap{display:flex!important;order:20}
.pc-mycnbox-btn{white-space:nowrap}
}
@media(min-width:561px) and (max-width:860px){.pc-mycnbox-btn{font-size:12.5px!important;padding:0 14px!important}.mast-tools .tools-btn{padding:0 8px!important}}
/* product view on computers: search and filters stay at the top while scrolling the finds below (owner, 26 Oct 2026; phones keep
the normal layout). top:-28px because the panel (.dbody) has 28px top padding and sticky counts from inside it. */
@media(min-width:561px){.pp-sticky{position:sticky;top:-28px;z-index:6;background:var(--ground);padding:12px 22px 0;margin:0 -22px 14px;border-bottom:1px solid var(--line);box-shadow:0 8px 16px -14px rgba(0,0,0,.5)}
.pp-sticky .pp-filters{margin-bottom:12px}}
/* brand and category hubs: the app shows the page's brand or category as a chip above the grid, so that row's space is kept from the
first paint and the finds don't jump 50px when the app starts (CLS 0.09-0.11 on phones, 28 Oct 2026). renderActiveChips() drops the class. */
html.af-pre #af-row[hidden]{display:flex!important;visibility:hidden;min-height:34px}
/* product view: no entrance or exit motion since r7 (30 Oct 2026, the "instant product open" block further down).
The hero marquee underneath stops while a find is open. */
body.pp-open .strip-track{animation-play-state:paused}
/* sign-up gate in v7 (28 Oct 2026): neutral scrim instead of the old navy, the shared popover shadow, pill buttons and an ink
pill for the one filled button (accent is for small highlights only). Copy and timing unchanged. */
.gate{background:color-mix(in srgb,var(--ground) 76%,transparent)}
.gate-card{border-radius:24px;box-shadow:var(--sh-pop)}
.gate-card .btn{border-radius:999px}
.gate-email .btn{background:var(--fill)!important;color:var(--fill-ink)!important;box-shadow:none!important}
/* phones and tablets (28 Oct 2026): the product view keeps the price and the main buy button on screen while that button is out of view,
like .buybar on the /product/ pages (ds.css). Filled in and shown by wireBuyBar(). */
.d-buybar{position:absolute;left:0;right:0;bottom:0;z-index:7;display:flex;align-items:center;gap:16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--ground) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .2s cubic-bezier(.2,.7,.2,1),visibility 0s linear .2s}
.d-buybar.on{transform:none;visibility:visible;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.d-buybar .bb-price{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.d-buybar .bb-price small{display:block;font-size:12px;font-weight:400;letter-spacing:0;color:var(--faint)}
.d-buybar .bb-buy{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border-radius:999px;background:var(--fill);color:var(--fill-ink);font-weight:600;font-size:15px;text-decoration:none;transition:transform .15s}
.d-buybar .bb-buy:active{transform:scale(.96)}
@media(min-width:860px){.d-buybar{display:none}} /* from 860px the buy box sits beside the photo (.d-grid), so phones and tablets get the bar */
/* v8 layer (28 Oct 2026): Apple-grade polish on top of v7. Rationale in DESIGN.md. */
:root{
--ease-out:cubic-bezier(.22,1,.36,1);
--ease-in-out:cubic-bezier(.65,0,.35,1);
--ease-sheet:cubic-bezier(.32,.72,0,1);
--ease-apple:cubic-bezier(.28,.11,.32,1);
--ease-hover:cubic-bezier(0,0,.5,1);
--d-1:120ms;--d-2:200ms;--d-bar:240ms;--d-3:320ms;--d-4:480ms;
--r-card:22px;--card-pad:7px;
--well:#F5F5F7;--studio-a:var(--well);--studio-b:var(--well);
--tile-bg:#FFFFFF;
--photo-edge:oklch(0 0 0 / .1);
--v8-lift:0 16px 28px rgb(0 0 0 / .12);
--glass-fill:rgb(255 255 255 / .8);--glass-solid:rgb(255 255 255 / .92);--glass-rim:rgb(255 255 255 / .7);
--v8-bar-sh:0 1px 2px rgb(0 0 0 / .04),0 8px 24px rgb(0 0 0 / .05);
--glass-float:0 1px 2px rgb(0 0 0 / .05),0 12px 32px rgb(0 0 0 / .1);
--v8-edge:rgb(0 0 0 / .06);
--v8-scrim:rgb(0 0 0 / .4);--v8-sheet-sh:rgb(0 0 0 / .12);
--v8-grabber:rgb(60 60 67 / .3);
--v8-chip:rgb(255 255 255 / .6);
--v8-ring-well:#0066CC;--v8-ring-gap:#FFFFFF;
--v8-mask:#000;
--v8-stat:clamp(28px,1rem + 1.6vw,40px);
--v8-sheet-in:max(12px,env(safe-area-inset-top,0px));
--ink-2:#3A3A3C;--glass-line:rgb(0 0 0 / .08);--v8-badge:rgb(29 29 31 / .78);
}
@media (max-width:560px){:root{--r-card:18px;--card-pad:5px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
--well:#E6E6EA;--studio-a:var(--well);--studio-b:var(--well);--tile-bg:#E6E6EA;
--img-edge:oklch(0 0 0 / .06);--photo-edge:oklch(1 0 0 / .1);--v8-lift:0 14px 20px rgb(0 0 0 / .55);
--glass-fill:rgb(18 21 25 / .8);--glass-solid:rgb(18 21 25 / .88);--glass-rim:rgb(255 255 255 / .07);
--v8-bar-sh:0 0 0 transparent;--glass-float:0 12px 32px rgb(0 0 0 / .5);--v8-edge:rgb(0 0 0 / .45);
--v8-scrim:rgb(0 0 0 / .56);--v8-sheet-sh:rgb(0 0 0 / .5);--v8-grabber:rgb(235 235 245 / .3);--v8-chip:rgb(255 255 255 / .04);--ink-2:#CBD1D7;--glass-line:rgb(255 255 255 / .08)}}
:root[data-theme="dark"]{
--well:#E6E6EA;--studio-a:var(--well);--studio-b:var(--well);--tile-bg:#E6E6EA;
--img-edge:oklch(0 0 0 / .06);--photo-edge:oklch(1 0 0 / .1);--v8-lift:0 14px 20px rgb(0 0 0 / .55);
--glass-fill:rgb(18 21 25 / .8);--glass-solid:rgb(18 21 25 / .88);--glass-rim:rgb(255 255 255 / .07);
--v8-bar-sh:0 0 0 transparent;--glass-float:0 12px 32px rgb(0 0 0 / .5);--v8-edge:rgb(0 0 0 / .45);
--v8-scrim:rgb(0 0 0 / .56);--v8-sheet-sh:rgb(0 0 0 / .5);--v8-grabber:rgb(235 235 245 / .3);--v8-chip:rgb(255 255 255 / .04);--ink-2:#CBD1D7;--glass-line:rgb(255 255 255 / .08)}
:focus-visible{outline-color:var(--accent)}
@supports selector(:has(a)){.card:has(a.title:focus-visible){outline-color:var(--accent)}}
@supports (color:color-mix(in srgb,red,blue)){::selection{background:color-mix(in srgb,var(--accent) 24%,transparent)}}
:where(a,button,summary,[role="button"],.card){touch-action:manipulation}
html{scrollbar-gutter:stable}
html:has(> body.pp-open){overflow:hidden}
html:has(> body.pp-open) > body{overflow-x:clip!important;overflow-y:visible!important}
.masthead .mast-row{background:var(--glass-fill);box-shadow:inset 0 1px 0 var(--glass-rim),var(--v8-bar-sh);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.masthead .mast-row{background:var(--glass-solid)}}
@media (min-width:821px){html:not(.vt-morph) body:not(.pp-open) .masthead:not(.scrolled) .mast-row{view-transition-name:site-header}}
@media (min-width:821px){.masthead .mast-row{min-height:60px;padding-block:10px;border-radius:30px;border-color:var(--glass-line)}}
.toolbar .deck::after,.toolbar .subdeck::before{content:"";position:absolute;left:0;right:0;top:100%;height:18px;background:linear-gradient(var(--v8-edge),transparent);opacity:0;pointer-events:none;transition:opacity var(--d-bar) var(--ease-apple)}
@media (min-width:561px){.toolbar .deck::after{content:none}.toolbar.stuck .subdeck::before{opacity:1}}
@media (max-width:560px){.toolbar .subdeck::before{content:none}.toolbar.stuck .deck::after{opacity:1}}
.fselbtn,.price-btn{padding:0 12px 0 14px!important}
.saved-chip{padding:0 14px 0 12px!important}
.saved-chip.clear-btn{padding:0 14px!important}
.hero .hero-in{gap:20px;padding-block:clamp(40px,6.5vw + 12px,132px) clamp(28px,3vw,56px)}
.hero .v7-eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 -4px;padding:7px 15px 7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--v8-chip);box-shadow:inset 0 1px 0 var(--glass-rim),0 1px 2px oklch(0 0 0 / .05);font-family:var(--f-body);font-size:13px;font-weight:500;line-height:18px;letter-spacing:-.005em;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.hero .v7-eyebrow::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 22%,transparent)}
.hero .v7-eyebrow .eb-n{display:inline-flex;align-items:center;gap:9px;color:var(--muted)}
.hero .v7-eyebrow .eb-n::before{content:"";width:1px;height:12px;background:var(--line-2)}
@media (min-width:735px){.hero .v7-eyebrow{font-size:14px;padding:8px 17px 8px 14px}}
.agents-strip .lbl,.strip-head{font-family:var(--f-code)}
html:not(.hub) .hero .hero-h{font-size:clamp(2.6rem,1.4rem + 5.4vw,5.75rem)}
html:not(.hub) .hero .hero-h{letter-spacing:-.045em!important}
@media (max-width:1068px){html:not(.hub) .hero .hero-h{letter-spacing:-.04em!important}}
@media (max-width:734px){html:not(.hub) .hero .hero-h{letter-spacing:-.035em!important}}
@supports ((-webkit-background-clip:text) or (background-clip:text)) and (color:color-mix(in oklab,red,blue)){@media (min-width:735px){
.hero .hero-h{padding-block:.1em .14em;margin-block:-.1em -.14em;background:linear-gradient(180deg,var(--ink) 35%,color-mix(in oklab,var(--ink) 62%,var(--muted)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .hero-h::selection{-webkit-text-fill-color:var(--ink);color:var(--ink)}
}
}
@media (forced-colors:active){.hero .hero-h{background:none;-webkit-text-fill-color:CanvasText}}
html:not(.hub) .hero .hero-sub{font-size:clamp(1.0625rem,.95rem + .5vw,1.3125rem);line-height:1.42;letter-spacing:-.01em;max-width:36ch}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;margin-top:4px}
.hero .hero-cta{min-height:50px;padding:0 22px 0 26px;gap:8px;font-size:17px;letter-spacing:-.015em}
.hero-actions .hero-cta{margin-top:0}
.hero-link{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 4px;border-radius:8px;font-size:17px;font-weight:500;letter-spacing:-.015em;color:var(--accent);text-decoration:none;text-underline-offset:.2em;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:opacity var(--d-1) linear}
.hero-link svg{width:.85em;height:.85em;flex:none;transition:transform var(--d-2) var(--ease-out)}
.hero-link:active{opacity:.6}
@media (hover:hover) and (pointer:fine){.hero-link:hover{text-decoration:underline}.hero-link:hover svg{transform:translateX(2px)}}
html.hub .hero-actions{display:none}
.hero .hero-stats{flex-wrap:nowrap;align-items:stretch;gap:0;min-height:calc(var(--v8-stat) * 1.08 + 22px);font-size:12.5px;line-height:1.35;letter-spacing:0}
.hero .hero-stats .stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 clamp(18px,3vw,36px)}
.hero .hero-stats .stat+.stat{border-left:1px solid var(--line)}
.hero .hero-stats .stat b{font-size:var(--v8-stat);line-height:1.08;letter-spacing:-.03em}
.hero .tp-badge{margin-top:0}
@media (min-width:561px){
html:not(.hub) .hero .hero-sub{margin-top:-4px}
html:not(.hub) .hero .hero-actions{margin-top:12px}
html:not(.hub) .hero .hero-stats{margin-top:clamp(24px,8px + 2vw,36px)}
}
@media (max-width:560px){
.hero .hero-in{gap:16px}
.hero-actions{flex-direction:column;gap:6px}
.hero .hero-cta,.hero-link{font-size:16px}
}
@keyframes v8-hero-out{to{transform:translate3d(0,-24px,0) scale(.96)}}
@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){
html:not(.hub) .hero .hero-in{transform-origin:50% 30%;animation:v8-hero-out linear both;animation-timeline:scroll(root);animation-range:0% 70vh}
}}
.ftile{border-radius:20px;isolation:isolate}
.fimg{transition:transform 400ms var(--ease-hover)}
@media (hover:hover) and (pointer:fine){.ftile:hover .fimg{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce),(hover:none){.hero-strip{-webkit-mask-image:linear-gradient(90deg,transparent,var(--v8-mask) 22px,var(--v8-mask) calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,var(--v8-mask) 22px,var(--v8-mask) calc(100% - 22px),transparent)}}
.strip-head{position:relative}
.strip-nav{position:absolute;inset-block:0;right:max(22px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:8px;padding-block:inherit}
.strip-nav button{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:color 100ms linear,border-color 100ms linear,opacity var(--d-2) var(--ease-out),transform var(--d-1) var(--ease-out)}
.strip-nav button::before{content:"";position:absolute;inset:-4px;border-radius:inherit}
.strip-nav svg{width:16px;height:16px}
.strip-nav button[aria-disabled="true"]{opacity:.4;cursor:default}
.strip-nav button:not([aria-disabled="true"]):active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.strip-nav button:not([aria-disabled="true"]):hover{color:var(--ink);border-color:var(--line-2)}}
@media (hover:none){.strip-nav{display:none}}
#hero-strip.v8-manual::-webkit-scrollbar{display:none}
@media (max-width:560px){.grid{gap:12px!important}}
@media (min-width:1100px){.grid{gap:20px!important}}
.card{padding:var(--card-pad)}
.card .thumb{border-radius:calc(var(--r-card) - var(--card-pad) - 1px);border-bottom:0!important;box-shadow:inset 0 0 0 1px var(--img-edge);isolation:isolate}
.card .body{padding:12px 8px 8px!important}
.card .brand-line{letter-spacing:.06em!important}
@media (max-width:560px){.card .body{padding:10px 8px 7px!important}}
.ftile,.gmain,.sim-thumb{background:var(--tile-bg)!important}
.sim-thumb,.gmain{isolation:isolate}
:is(.thumb .pimg,.ftile .fimg){filter:none}
:is(.thumb .pimg,.ftile .fimg,.sim-thumb img,.gmain .pimg:not([alt^="QC photo"])){mix-blend-mode:multiply}
.card .fav,.qc-badge{-webkit-backdrop-filter:none;backdrop-filter:none}
.qc-badge{left:8px;bottom:8px;padding:4px 8px;font-family:var(--f-code);font-size:11px;font-weight:500;letter-spacing:.06em;background:var(--v8-badge)!important}
.thumbs .qcthumb-btn img{outline:1px solid var(--photo-edge);outline-offset:-1px}
.thumb .fav:focus-visible,.gmain .gallery-fav:focus-visible{outline-color:var(--v8-ring-well);box-shadow:0 0 0 4px var(--v8-ring-gap)!important}
.thumbs .qcthumb-btn:focus-visible{outline-color:var(--accent)}
.card{transition:transform 300ms var(--ease-hover),filter 300ms var(--ease-hover)!important}
.card .thumb .pimg{transition:opacity var(--d-2) var(--ease),transform 400ms var(--ease-hover)}
.card,.ftile,.sim-card{-webkit-tap-highlight-color:transparent}
.ftile,.sim-card{transition:transform var(--d-1) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.card:hover{transform:translateY(-3px);filter:drop-shadow(var(--v8-lift))}}
.card:active{transform:scale(.985)!important;transition-duration:var(--d-1)!important;transition-delay:80ms!important}
.ftile:active,.sim-card:active{transform:scale(.985);transition-delay:80ms}
@media (hover:hover) and (pointer:fine){.card:hover:active{transform:translateY(-1px) scale(.985)!important}}
.card:has(.fav:active){transform:none!important}
@media (hover:hover) and (pointer:fine){.card:has(.fav:active){transform:translateY(-3px)!important}}
@keyframes v8-card-in{from{opacity:0;transform:translate3d(0,8px,0)}}
#grid .card.v8-enter{animation:v8-card-in 360ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 30ms)}
.overlay{display:block!important;position:fixed;inset:0;z-index:79;background:var(--v8-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--d-2) var(--ease-out),visibility 0s linear var(--d-2)}
.overlay.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--d-3) var(--ease-out),visibility 0s}
body.pp-open .toolbar{display:contents!important}
.dbody{overscroll-behavior:contain}
@media (max-width:859px){.dbody{scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}}
#drawer .p-top{position:relative;background:var(--ground);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 var(--glass-rim)}
#drawer .grabber{display:none}
.d-titlerow{gap:8px}
.d-titlerow .d-brand{order:-1}
.d-title{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.625rem);line-height:1.08;letter-spacing:-.03em!important}
.d-price{margin-top:12px}
.d-price .p{font-size:clamp(1.75rem,1.45rem + .9vw,2.125rem);line-height:1.1;letter-spacing:-.025em}
.d-price .u{font-size:14px}
.sheet h3{letter-spacing:-.022em!important}
#seo h3{letter-spacing:-.012em!important}
.thumbs{display:flex;flex-wrap:wrap;gap:8px}
.thumbs .qcthumb-btn{flex:none;width:56px!important;height:56px;border-radius:12px!important}
.thumbs .qcthumb-btn img{border-radius:12px!important}
.d-buybar{box-shadow:inset 0 1px 0 var(--glass-rim);transition:transform var(--d-2) var(--ease-out),visibility 0s linear var(--d-2)}
.d-buybar.on{transition:transform var(--d-3) var(--ease-sheet)}
@media (min-width:561px){
.drawer,body.pp-open .drawer{inset:0;width:100%;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none}
.drawer{transform:none;transition:opacity var(--d-2) var(--ease-out),visibility 0s linear var(--d-2)}
.drawer.open{transform:none;transition:opacity var(--d-3) var(--ease-out),visibility 0s}
#drawer .p-top{padding-inline:max(20px,calc(50% - 538px))}
#drawer .dbody{max-width:none;padding-inline:max(22px,env(safe-area-inset-left,0px),calc(50% - 538px))}
}
@media (max-width:560px){
.drawer,body.pp-open .drawer{inset:var(--v8-sheet-in) 0 0;height:auto;max-height:none;border:0;border-radius:20px 20px 0 0;box-shadow:0 -8px 32px var(--v8-sheet-sh),0 64px 0 var(--ground)}
.drawer{opacity:1;transform:translate3d(0,100%,0);transition:transform var(--d-3) var(--ease-sheet),visibility 0s linear var(--d-3)}
.drawer.open{transform:none;transition:transform var(--d-4) var(--ease-sheet),visibility 0s}
body.pp-open .masthead{display:block}
#drawer .p-top{padding-top:14px;touch-action:none;-webkit-user-select:none;user-select:none}
#drawer .grabber{display:block;position:absolute;top:5px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--v8-grabber);pointer-events:none}
}
html.v8-instant :is(.drawer,.overlay){transition:none}
::view-transition-group(site-header){animation-duration:220ms;animation-timing-function:var(--ease-in-out)}
:root:active-view-transition .overlay{transition:none}
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.modal{background:var(--v8-scrim);transition:opacity var(--d-2) var(--ease-out)}
.modal .sheet{box-shadow:inset 0 1px 0 var(--glass-rim),var(--sh-pop);transition:opacity var(--d-2) var(--ease-out),transform var(--d-3) var(--ease-out)}
@starting-style{.modal{opacity:0}.modal .sheet{opacity:0;transform:translateY(8px) scale(.96)}}
.pc-toast,.optin-toast{background:var(--glass-solid);color:var(--ink);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--glass-rim),var(--glass-float)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.pc-toast,.optin-toast{background:var(--glass-fill);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}
.optin-toast #ot-no{color:var(--ink)}
#seo>.wrap{padding-block:clamp(56px,4vw + 40px,104px)!important}
#seo h2{font-size:clamp(1.75rem,1.2rem + 2.2vw,3rem)!important;line-height:1.08;margin-bottom:20px!important}
footer>.wrap.foot-bar span:not(.mono):not(.spacer){font-size:12.5px}
footer .seo-links a{font-size:13px}
footer .seo-disc{font-size:12px;line-height:1.5}
@media (pointer:coarse){footer .seo-links a,footer>.foot-bar a{display:flex;align-items:center;min-height:44px;padding-block:0}}
@media (max-width:560px){
footer .seo-links{grid-template-columns:1fr;gap:0;padding-top:8px!important}
footer .seo-links>div{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:20px;padding:14px 0 6px;border-bottom:1px solid var(--line)}
footer .seo-links>div:last-child{border-bottom:0}
footer .seo-links b{flex:0 0 100%;margin:0!important}
}
@keyframes v8-rv{from{opacity:0;transform:translate3d(0,12px,0)}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
.rv{animation:v8-rv linear both;animation-timeline:view();animation-range:cover 0% cover 20vh}
}}
@media print{.rv{animation:none!important}}
.d-buybar .bb-price small,.toolbar .count{color:var(--ink-2)}
@media (max-width:859px){
.d-buybar{left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:560px;margin-inline:auto;gap:14px;padding:8px 7px 8px 20px;border:1px solid var(--glass-line);border-radius:999px;background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 var(--glass-rim),var(--glass-float);transform:translate3d(0,calc(100% + 24px + env(safe-area-inset-bottom,0px)),0)}
.d-buybar .bb-price{font-size:19px;font-weight:600}
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){@media (max-width:859px){.d-buybar{background:var(--glass-fill);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}}
.drawer.v8-dragging .d-buybar{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
html:has(.drawer.v8-dragging) .overlay{transition:none!important}
@media (prefers-contrast:more),(prefers-reduced-transparency:reduce){
.masthead .mast-row,.pc-toast,.optin-toast{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
.toolbar .deck,.toolbar .subdeck,.deck{background:var(--ground)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.d-buybar{background:var(--ground);-webkit-backdrop-filter:none;backdrop-filter:none}
.overlay{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after,html .card{transition-duration:var(--d-1)!important}
.drawer{transform:none}
html :is(.card,.ftile,.sim-card,.card .pimg,.ftile .fimg,.card:has(.fav:active)){transform:none!important}
}
@media (prefers-reduced-motion:reduce) and (max-width:560px){.drawer:not(.open){opacity:0}}
/* r7 item 24 (30 Oct 2026), instant product open: the product view and its scrim appear and go in the frame of the click,
with no fade or rise (the card-to-view photo morph is gone too). Phones keep a 120 ms ease-out slide up for the sheet,
none with reduced motion; closing is instant everywhere. The first main photo (the card's own, class "inst") does not
fade in. html body raises these above the older v8 rules; the drag-to-close gesture's inline transitions still win. */
html body .drawer,html body .drawer.open,html body .overlay,html body .overlay.open{transition:none}
@media (max-width:560px) and (prefers-reduced-motion:no-preference){
html body .drawer.open{transition:transform 120ms var(--ease-out),visibility 0s}
html body .overlay.open{transition:opacity 120ms var(--ease-out),visibility 0s}
}
/* a browser back/forward that already animates the view (html.v8-instant) gets no phone slide on top of it */
html.v8-instant body .drawer.open,html.v8-instant body .overlay.open{transition:none}
html .gmain .pimg.inst{animation:none}
/* 8 Nov 2026 (owner: "when you click on items its not so smooth"): the instant open snapped the view in over the grid in one
frame. Wider screens get a short fade and 8 px rise (160 ms, ease-out, compositor only); phones keep their sheet slide,
reduced motion and browser back/forward stay instant. */
@keyframes pcViewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (min-width:561px) and (prefers-reduced-motion:no-preference){html:not(.v8-instant) body .drawer.open{animation:pcViewIn .16s cubic-bezier(.22,1,.36,1)}}
/* a closed view skips style and layout for its content (the next open or pointerdown build clears pc-cv), so closing
does not restyle the whole product view and its browse grid on the way out */
.drawer.pc-cv:not(.open){content-visibility:hidden}
/* ===================================================================================================================
v9 layer (29 Oct 2026): the rep-find look. Inter only, neutral tokens (white ground, near-black ink, #F5F5F5 muted
wells), 12px radii, black pill buttons, a sticky blurred white header, borderless cards with a QC pill and a Buy pill.
Light, dark and system themes (data-theme on , "manifest.theme" in localStorage). Loaded last: it overrides v7/v8.
Red is no longer used for buttons.
=================================================================================================================== */
:root{
--ground:#FFFFFF;--surface:#FFFFFF;--surface-2:#F5F5F5;--muted-bg:#F5F5F5;
--ink:#0A0A0A;--ink-2:#404040;--muted:#6B6B6B;--faint:#6B6B6B;
--line:#E5E5E5;--line-2:#E5E5E5;--input:#E5E5E5;--ring:#737373;--input-line:#949494;
--fill:#171717;--fill-ink:#FAFAFA;--fill-hover:#262626;--accent:#171717;
--f-disp:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
--f-body:var(--f-disp);--f-mono:var(--f-disp);--f-code:var(--f-disp);
--radius:12px;--r-card:12px;--r-well:8px;--r-pill:999px;--card-pad:10px;
--well:#F5F5F5;--studio-a:var(--well);--studio-b:var(--well);--tile-bg:var(--well);
--sh-sm:0 1px 2px rgba(0,0,0,.05);
--sh-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
--sh-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
--sh-card:none;--sh-1:var(--sh-sm);--sh-pop:var(--sh-lg);
--hdr:rgba(255,255,255,.6);--hdr-solid:#FFFFFF;
--glass:var(--hdr);--glass-fill:rgba(255,255,255,.85);--glass-solid:#FFFFFF;--glass-rim:transparent;--glass-line:var(--line);--glass-float:var(--sh-lg);
--glow:transparent;--v8-bar-sh:none;--v8-chip:var(--surface);--v8-badge:rgba(10,10,10,.8);--v8-scrim:rgba(0,0,0,.5);--v8-edge:rgba(0,0,0,.06);
--img-edge:transparent;--photo-edge:rgba(0,0,0,.06);--v8-lift:0 0 0 transparent;
--v8-ring-well:#0A0A0A;--v8-ring-gap:#FFFFFF;
--brand-red:var(--fill);--brand-red-hover:var(--fill-hover);--danger:#DC2626;
--pill-line:rgba(10,10,10,.1);--pill-bg:rgba(255,255,255,.7);
--mast-h-min:57px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
--ground:#0A0A0A;--surface:#171717;--surface-2:#262626;--muted-bg:#262626;
--ink:#FAFAFA;--ink-2:#D4D4D4;--muted:#A1A1A1;--faint:#A1A1A1;
--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.15);--input:rgba(255,255,255,.15);--ring:#737373;--input-line:rgba(255,255,255,.4);
--fill:#E5E5E5;--fill-ink:#171717;--fill-hover:#D4D4D4;--accent:#E5E5E5;
--well:#E5E5E5;
--sh-sm:0 1px 2px rgba(0,0,0,.4);--sh-md:0 4px 6px -1px rgba(0,0,0,.5),0 2px 4px -2px rgba(0,0,0,.5);--sh-lg:0 10px 15px -3px rgba(0,0,0,.55),0 4px 6px -4px rgba(0,0,0,.5);
--hdr:rgba(10,10,10,.6);--hdr-solid:#0A0A0A;--glass-fill:rgba(23,23,23,.85);--glass-solid:#171717;
--v8-scrim:rgba(0,0,0,.65);--v8-edge:rgba(0,0,0,.5);--photo-edge:rgba(255,255,255,.1);--v8-ring-well:#0A0A0A;--v8-ring-gap:#FFFFFF;--danger:#F87171;
--pill-line:rgba(255,255,255,.15);--pill-bg:rgba(23,23,23,.7)}}
:root[data-theme="dark"]{
--ground:#0A0A0A;--surface:#171717;--surface-2:#262626;--muted-bg:#262626;
--ink:#FAFAFA;--ink-2:#D4D4D4;--muted:#A1A1A1;--faint:#A1A1A1;
--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.15);--input:rgba(255,255,255,.15);--ring:#737373;--input-line:rgba(255,255,255,.4);
--fill:#E5E5E5;--fill-ink:#171717;--fill-hover:#D4D4D4;--accent:#E5E5E5;
--well:#E5E5E5;
--sh-sm:0 1px 2px rgba(0,0,0,.4);--sh-md:0 4px 6px -1px rgba(0,0,0,.5),0 2px 4px -2px rgba(0,0,0,.5);--sh-lg:0 10px 15px -3px rgba(0,0,0,.55),0 4px 6px -4px rgba(0,0,0,.5);
--hdr:rgba(10,10,10,.6);--hdr-solid:#0A0A0A;--glass-fill:rgba(23,23,23,.85);--glass-solid:#171717;
--v8-scrim:rgba(0,0,0,.65);--v8-edge:rgba(0,0,0,.5);--photo-edge:rgba(255,255,255,.1);--v8-ring-well:#0A0A0A;--v8-ring-gap:#FFFFFF;--danger:#F87171;
--pill-line:rgba(255,255,255,.15);--pill-bg:rgba(23,23,23,.7)}
/* type: Inter, no mono labels, no tracked uppercase eyebrows */
body{font-family:var(--f-body)!important;font-feature-settings:normal;letter-spacing:0!important;font-size:15px;line-height:1.5;color:var(--ink)}
h1,h2,h3,.hero h1{font-family:var(--f-disp)!important;font-weight:700!important;letter-spacing:-.025em!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@supports selector(:has(a)){.card:has(a.title:focus-visible){outline:2px solid var(--ink);outline-offset:2px}}
::selection{background:color-mix(in srgb,var(--ink) 14%,transparent)}
.eyebrow,.v7-eyebrow,.strip-head,.agents-strip .lbl,.sec-label,.brand-line,.code,.count,.cat,.subprice,.price,.d-brand,.d-price .p,.d-price .u,.tag,.hub-seo h2,footer .mono,footer .seo-links b,.tools-label,.page-back,.tool-box label,.set-row label,.auth-status,.qc-badge,.pcwb-badge,.wb-feat-badge,.wb-more-label,.blog-eyebrow,.gate-progress-cap,.agent-badge,.ordiv,.oi{font-family:var(--f-body)!important}
/* ---------------------------------------------------------------- header: sticky, white at 60% with blur, one hairline */
.masthead{position:relative!important;top:auto;z-index:45;padding:0!important;background:var(--ground)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important}
html .masthead .mast-row{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:8px;min-height:var(--mast-h-min);padding-block:8px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;view-transition-name:none!important}
.masthead .brand{flex:none;margin-right:16px;align-items:center}
.brand-img{height:28px!important;width:104px!important}
.v9-nav{display:flex;align-items:center;gap:2px;min-width:0}
.v9-nl,.v9-nav .tools-btn{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 12px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--muted)!important;font-family:var(--f-body)!important;font-size:14px!important;font-weight:500!important;letter-spacing:0!important;text-decoration:none;white-space:nowrap;transition:color .15s ease,background-color .15s ease}
.v9-nav .tools-btn svg{width:14px;height:14px;opacity:.7;transition:transform .18s ease}
@media (hover:hover){.v9-nl:hover,.v9-nav .tools-btn:hover{color:var(--ink)!important;background:var(--surface-2)!important}}
.v9-nav .tools-btn[aria-expanded="true"]{color:var(--ink)!important;background:var(--surface-2)!important}
.v9-nl[aria-current="page"]{color:var(--ink)!important}
.tools-menu .v9-mob{display:none}
.mast-tools{margin-left:auto;display:flex;align-items:center;gap:4px!important;flex:none;position:static}
.mast-tools .mast-div{display:none!important}
/* MyCNBox: a quiet outline pill (no more red) */
.pc-mycnbox-btn,html .pc-mycnbox-btn{display:inline-flex;align-items:center;justify-content:center;height:36px!important;padding:0 14px!important;border-radius:999px!important;background:transparent!important;color:var(--ink)!important;border:1px solid var(--line-2)!important;box-shadow:none!important;filter:none!important;font-family:var(--f-body)!important;font-size:13px!important;font-weight:500!important;letter-spacing:0!important;white-space:nowrap;text-decoration:none}
@media (hover:hover){.pc-mycnbox-btn:hover{background:var(--surface-2)!important}}
/* sign in: the one filled pill in the header */
.mast-tools .auth-btn{height:36px!important;padding:0 16px!important;border:0!important;border-radius:999px!important;background:var(--fill)!important;color:var(--fill-ink)!important;font-family:var(--f-body)!important;font-size:13px!important;font-weight:600!important;letter-spacing:0!important}
@media (hover:hover){.mast-tools .auth-btn:hover{opacity:1;background:var(--fill-hover)!important}}
.mast-tools .auth-btn[data-in="1"]{background:var(--surface-2)!important;color:var(--ink)!important}
/* icon buttons: ghost circles */
.mast-tools .icon-btn,.mast-tools .theme-btn,.mast-tools .set-btn{width:36px!important;height:36px!important;border:0!important;border-radius:999px!important;background:transparent!important;color:var(--muted)!important;box-shadow:none!important;display:inline-flex;align-items:center;justify-content:center;padding:0}
@media (hover:hover){.mast-tools .icon-btn:hover,.mast-tools .theme-btn:hover,.mast-tools .set-btn:hover{background:var(--surface-2)!important;color:var(--ink)!important}}
.mast-tools .set-btn[aria-expanded="true"],.mast-tools .theme-btn[aria-expanded="true"]{background:var(--surface-2)!important;color:var(--ink)!important}
.mast-tools .set-btn svg,.mast-tools .theme-btn svg{width:18px;height:18px}
.set-btn{display:inline-flex!important}
.theme-wrap{position:relative;display:flex}
.theme-btn .ti{display:none}
html[data-tp="light"] .theme-btn .ti-sun,html[data-tp="dark"] .theme-btn .ti-moon,html[data-tp="system"] .theme-btn .ti-sys,html:not([data-tp]) .theme-btn .ti-sys{display:block}
.theme-menu{position:absolute;top:calc(100% + 8px);right:0;left:auto;min-width:148px;z-index:60}
.theme-menu button[aria-checked="true"]{font-weight:600}
.theme-menu button[aria-checked="true"]::after{content:"";float:right;width:6px;height:6px;margin-top:6px;border-radius:50%;background:var(--ink)}
/* language / currency / agent (+ theme on phones): one popover under the globe button, at every width */
.v9-prefs{display:none}
html .masthead.set-open .v9-prefs{position:absolute;top:calc(100% + 1px);right:max(16px,env(safe-area-inset-right));z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:max-content;max-width:calc(100vw - 32px);padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-lg)}
html .masthead .mast-tools .v9-prefs .selwrap{display:flex!important;order:0!important;flex:0 1 auto!important;min-width:0;height:auto;margin:0!important;border:0!important;background:transparent!important;border-radius:0!important;padding:0!important}
html .masthead .mast-tools .v9-prefs .selwrap .cselbtn{height:36px!important;padding:0 12px!important;gap:6px;border:1px solid var(--line-2)!important;border-radius:8px!important;background:var(--surface)!important;color:var(--ink)!important;font-family:var(--f-body)!important;font-size:13px!important;font-weight:500!important;width:auto}
@media (hover:hover){html .masthead .mast-tools .v9-prefs .selwrap .cselbtn:hover{background:var(--surface-2)!important}}
html.agent-lock .masthead .mast-tools .v9-prefs .selwrap:has(#agent){display:none!important}
.v9-theme-seg{display:none;padding:3px;gap:2px;border-radius:10px;background:var(--surface-2)}
.v9-theme-seg button{height:32px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:500 13px/1 var(--f-body);cursor:pointer}
.v9-theme-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
@media (max-width:1180px){.mast-tools .icon-btn{display:none!important}}
@media (max-width:1099px){.v9-nl{display:none!important}.tools-menu .v9-mob{display:block}.tools-menu .tools-sep.v9-mob{display:block}}
@media (min-width:561px) and (max-width:860px){.pc-mycnbox-btn{font-size:12.5px!important;padding:0 12px!important}}
/* hero sits under the header now, not behind a floating bar */
.hero,html .hero{margin-top:0!important;padding-top:0!important;border:0!important;background:var(--ground)!important}
/* phones: the header scrolls away (the search bar is the sticky bar), MyCNBox gets a slim full-width row */
@media (max-width:560px){
.masthead{position:relative!important}
html .masthead .mast-row{flex-wrap:wrap;column-gap:4px;row-gap:8px;padding-block:8px!important;padding-inline:16px!important}
.masthead .brand{margin-right:auto}
.brand-img{height:26px!important;width:96px!important}
.v9-nav{order:2}
.mast-tools{display:contents}
.v9-nav .tools-btn{height:44px;padding:0 10px!important;color:var(--ink)!important}
.mast-tools .auth-btn{order:3;height:44px!important;padding:0 16px!important}
.mast-tools .set-btn{order:4;width:44px!important;height:44px!important}
.theme-wrap{display:none!important}
.pc-mycnbox-btn,html .pc-mycnbox-btn{order:10;flex:0 0 100%;height:44px!important;font-size:13.5px!important}
html .masthead.set-open .v9-prefs{left:16px;right:16px;width:auto;max-width:none}
html .masthead .mast-tools .v9-prefs .selwrap{flex:1 1 30%!important}
html .masthead .mast-tools .v9-prefs .selwrap .csel{width:100%}
html .masthead .mast-tools .v9-prefs .selwrap .cselbtn{width:100%;height:44px!important;justify-content:space-between}
.v9-theme-seg{display:flex;flex:0 0 100%}
.v9-theme-seg button{flex:1;height:44px}
}
@media (pointer:coarse){.tools-menu a,.menu button{min-height:44px;display:flex;align-items:center}.mast-tools .icon-btn,.mast-tools .theme-btn,.mast-tools .set-btn{width:44px!important;height:44px!important}}
/* ---------------------------------------------------------------- floating menus */
.menu,.tools-menu,.cselmenu,.price-pop,.buy-dd-menu,#acct-menu{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:var(--sh-lg)!important;padding:4px!important}
.tools-menu{min-width:220px}
.tools-menu a,.menu button,.cselitem{font-family:var(--f-body)!important;font-size:14px!important;font-weight:400!important;color:var(--ink)!important;border-radius:8px!important;padding:8px 10px!important;letter-spacing:0}
@media (hover:hover){.tools-menu a:hover,.menu button:hover,.cselitem:hover{background:var(--surface-2)!important}}
.cselitem.sel{font-weight:600!important}
.cselitem .ck{color:var(--ink)!important}
.tools-sep{background:var(--line);margin:4px 6px}
.tools-label{font-size:12px!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important;font-weight:500}
.cselsearch{background:var(--surface)!important;border-color:var(--line)!important}
.cselsearch input{background:var(--surface-2)!important;border:1px solid transparent!important;border-radius:8px!important;font-family:var(--f-body)!important}
.cselsearch input:focus{border-color:var(--ink)!important}
/* ---------------------------------------------------------------- search toolbar + filter pills */
.toolbar .deck,.toolbar .subdeck,.deck{background:color-mix(in srgb,var(--ground) 85%,transparent)!important;-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--line)!important;box-shadow:none}
.toolbar .deck::after,.toolbar .subdeck::before{display:none}
@media (min-width:561px){.toolbar .deck{top:var(--mast-h,57px)!important}.toolbar .subdeck{top:calc(var(--mast-h,57px) + var(--deck-h,69px))!important}}
@media (max-width:560px){.toolbar .deck{top:0!important}}
.deck{padding-block:12px!important}
.search,html .search{height:44px;background:var(--surface-2)!important;border:1px solid transparent!important;border-radius:999px!important;box-shadow:none!important;padding:0 16px!important;gap:8px;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
.search svg{width:18px!important;height:18px!important;color:var(--muted)!important}
.search input,html .search input{height:100%;padding:0 4px!important;font-family:var(--f-body)!important;font-size:15px!important;letter-spacing:0!important;color:var(--ink)}
.search input::placeholder{color:var(--muted)}
.search:focus-within,html .search:focus-within{background:var(--surface)!important;border-color:var(--ink)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 35%,transparent)!important}
@media (max-width:560px){.search input,html .search input{font-size:16px!important}}
.subdeck .wrap{padding-block:10px}
.fselbtn,.saved-chip,.price-btn{height:36px!important;padding:0 14px!important;border:1px solid var(--line-2)!important;border-radius:999px!important;background:var(--surface)!important;color:var(--ink)!important;font-family:var(--f-body)!important;font-size:13px!important;font-weight:500!important;letter-spacing:0!important;box-shadow:none}
@media (hover:hover){.fselbtn:hover,.saved-chip:hover,.price-btn:hover{background:var(--surface-2)!important}}
.fselbtn[aria-expanded="true"],.price-btn[aria-expanded="true"],.saved-chip[aria-pressed="true"]{background:var(--fill)!important;color:var(--fill-ink)!important;border-color:var(--fill)!important}
@media (pointer:coarse){.fselbtn,.saved-chip,.price-btn{height:44px!important}}
.count,.toolbar .count{font-size:13px!important;color:var(--muted)!important;letter-spacing:0!important}
.pp-fill{background:var(--fill)!important}
.pp-slider input[type=range]::-webkit-slider-thumb{background:var(--fill);border-color:var(--surface)}
.pp-slider input[type=range]::-moz-range-thumb{background:var(--fill);border-color:var(--surface)}
.pp-clear{color:var(--ink)!important;text-decoration:underline;text-underline-offset:2px}
.af-chip{background:var(--surface-2)!important;color:var(--ink)!important}
.af-chip svg{color:var(--ink)!important}
@media (hover:hover){.af-chip:hover{background:color-mix(in srgb,var(--ink) 10%,var(--surface-2))!important}}
/* ---------------------------------------------------------------- product grid + card */
main{padding-block:20px 64px}
.grid,html .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px!important;background:transparent!important;border:0!important}
@media (max-width:560px){.grid,html .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important}}
.card,html .card{padding:var(--card-pad)!important;background:var(--surface)!important;border:0!important;border-radius:var(--r-card)!important;box-shadow:none!important;filter:none!important;overflow:visible;transition:box-shadow .2s var(--ease),transform .12s var(--ease)!important}
@media (hover:hover) and (pointer:fine){.card:hover,html .card:hover{transform:none!important;filter:none!important;box-shadow:var(--sh-md)!important}.card:hover:active{transform:scale(.99)!important}}
.card:active{transform:scale(.99)!important}
.card:has(.fav:active),.card:has(.card-acts a:active){transform:none!important}
.card .thumb,html .card .thumb{aspect-ratio:1/1!important;border:0!important;border-radius:var(--r-well)!important;background:var(--well)!important;box-shadow:none!important;overflow:hidden}
.card .thumb .pimg{padding:8%!important;object-fit:contain;mix-blend-mode:multiply;filter:none}
@media (hover:hover){.card:hover .thumb .pimg{transform:scale(1.03)}}
.card .fav{top:8px!important;right:8px!important;bottom:auto!important;width:32px!important;height:32px!important;border-radius:999px!important;background:rgba(255,255,255,.92)!important;color:#0A0A0A!important;border:0!important;box-shadow:var(--sh-sm)!important;opacity:1}
.card .fav svg{width:16px;height:16px}
.card .fav[aria-pressed="true"] svg{fill:currentColor}
.card .body,html .card .body{padding:10px 2px 0!important;gap:2px!important;background:transparent!important}
.card .brand-line{font-size:12px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important}
.card .title{font-size:14px!important;font-weight:500!important;line-height:20px!important;min-height:40px!important;letter-spacing:0!important;color:var(--ink)!important}
.card .price-row{padding-top:4px!important;gap:6px!important;align-items:baseline;border:0!important}
.card .price{font-size:15px!important;font-weight:600!important;letter-spacing:0!important;color:var(--ink)!important}
.card .subprice{font-size:12px!important;letter-spacing:0!important;color:var(--muted)!important}
.card .starcount,.card .cat{display:none}
.card .qc-badge{display:none}
.card-acts{display:flex;align-items:center;gap:6px;margin-top:10px}
.qc-pill,.buy-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:30px;padding:0 12px;border-radius:999px;font-family:var(--f-body);font-size:12px;font-weight:600;line-height:1;letter-spacing:0;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,transform .12s var(--ease)}
.qc-pill{flex:none;border:1px solid var(--pill-line);background:var(--pill-bg);color:var(--ink)}
.qc-pill svg{width:13px;height:13px;flex:none}
.buy-pill{flex:1 1 auto;min-width:0;border:1px solid var(--fill);background:var(--fill);color:var(--fill-ink)}
@media (hover:hover){.qc-pill:hover{background:var(--surface-2)}.buy-pill:hover{background:var(--fill-hover);border-color:var(--fill-hover)}}
.qc-pill:active,.buy-pill:active{transform:scale(.96)}
.qc-pill:focus-visible,.buy-pill:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (pointer:coarse){.qc-pill,.buy-pill{height:36px}.qc-pill::before,.buy-pill::before{content:"";position:absolute;inset:-4px 0}}
@media (max-width:380px){.qc-pill{padding:0 9px}.qc-pill svg{display:none}}
#grid .card.v8-enter{animation-duration:240ms}
.empty b{font-weight:700;letter-spacing:-.02em}
.empty .btn{background:var(--fill)!important;color:var(--fill-ink)!important}
/* ---------------------------------------------------------------- product view (drawer) */
.drawer,#drawer{background:var(--ground)!important}
#drawer .p-top{background:var(--hdr-solid)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important}
.p-back{font-family:var(--f-body)!important;font-size:14px!important;font-weight:500!important;color:var(--ink)!important;border-radius:8px}
@media (hover:hover){.p-back:hover{background:var(--surface-2)!important;color:var(--ink)!important}}
.p-top .code{font-size:13px;color:var(--muted);letter-spacing:0}
.dshare{border:1px solid var(--line-2)!important;background:var(--surface)!important;color:var(--ink)!important}
@media (hover:hover){.dshare:hover,.dshare.ok{background:var(--surface-2)!important;color:var(--ink)!important}}
.gmain,html .gmain{background:var(--well)!important;border:0!important;border-radius:12px!important;box-shadow:none!important}
.gallery-fav{background:rgba(255,255,255,.92)!important;color:#0A0A0A!important;border:0!important;box-shadow:var(--sh-sm)!important}
.gtab{height:36px;min-height:36px;padding:0 14px;border:1px solid var(--line-2)!important;border-radius:999px!important;background:var(--surface)!important;color:var(--ink)!important;font:500 13px/1 var(--f-body)!important}
.gtab[aria-pressed="true"]{background:var(--fill)!important;color:var(--fill-ink)!important;border-color:var(--fill)!important}
@media (pointer:coarse),(max-width:560px){.gtab{height:44px;min-height:44px}}
.thumbs .qcthumb-btn,.thumbs .qcthumb-btn img{border-radius:8px!important}
.thumbs .qcthumb-btn.on{outline:2px solid var(--ink)!important}
.d-brand{font-size:13px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important}
.d-title{font-size:clamp(24px,1.2vw + 18px,32px)!important;font-weight:700!important;line-height:1.15!important;letter-spacing:-.025em!important}
.d-price .p{font-size:24px!important;font-weight:700!important;letter-spacing:-.02em!important}
.d-price .u{font-size:14px!important;color:var(--muted)!important}
.meta .tag,.tag{border:0!important;background:var(--surface-2)!important;color:var(--ink)!important;border-radius:999px!important;padding:5px 12px!important;font-size:12.5px!important;font-weight:500;text-transform:none!important;letter-spacing:0!important}
.sec-label,html .sec-label{font-size:16px!important;font-weight:600!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--ink)!important;border:0!important;padding:0!important;margin:0 0 12px!important}
.variant{border:1px solid var(--line-2)!important;border-radius:999px;font-family:var(--f-body)!important;color:var(--ink)}
/* the split buy button: black (near-white in dark), no red anywhere */
.buy-dd .agent.primary{min-height:48px;padding:0 18px;background:var(--fill)!important;color:var(--fill-ink)!important;border-radius:999px 0 0 999px!important;font-family:var(--f-body);font-size:15px;font-weight:600}
.buy-dd .agent.primary:only-child{border-radius:999px!important}
.buy-dd-caret{background:var(--fill)!important;color:var(--fill-ink)!important;border-left:1px solid color-mix(in srgb,var(--fill-ink) 25%,transparent)!important;border-radius:0 999px 999px 0!important;filter:none!important}
@media (hover:hover){.buy-dd .agent.primary:hover,.buy-dd-caret:hover{background:var(--fill-hover)!important}}
.agent-badge,.agent.primary .agent-badge{background:color-mix(in srgb,var(--fill-ink) 14%,transparent)!important;color:var(--fill-ink)!important;font-size:10px!important;letter-spacing:.02em!important;text-transform:none!important;font-weight:600!important}
.buy-dd-item{font-family:var(--f-body);font-size:14px;font-weight:500;color:var(--ink)!important;border-bottom:1px solid var(--line)!important;border-radius:0!important}
.buy-dd-item .agent-badge{background:var(--surface-2)!important;color:var(--ink)!important}
@media (hover:hover){.buy-dd-item:hover{background:var(--surface-2)!important;color:var(--ink)!important}}
.buy-dd-menu{padding:0!important;overflow:hidden}
.buy-hint{background:var(--surface-2)!important;color:var(--ink)!important;border-radius:12px!important}
.buy-hint svg{color:var(--ink)!important}
@media (hover:hover){.buy-hint:hover{background:color-mix(in srgb,var(--ink) 8%,var(--surface-2))!important}}
.report-link:hover{color:var(--ink)!important}
.report-status{color:var(--muted)!important}
.d-buybar{background:var(--glass-fill)!important;border:1px solid var(--line)!important;box-shadow:var(--sh-lg)!important}
.d-buybar .bb-buy{background:var(--fill)!important;color:var(--fill-ink)!important;border-radius:999px!important;font-family:var(--f-body)}
.d-buybar .bb-price{font-weight:700!important;letter-spacing:-.02em}
.sim-thumb{background:var(--well)!important;border-radius:8px!important;box-shadow:none!important}
.sim-t{font-size:13px!important;font-weight:500!important;letter-spacing:0!important}
.sim-p{font-size:13px!important;font-weight:600!important}
.pp-sticky{background:var(--ground)!important;box-shadow:none!important}
/* ---------------------------------------------------------------- buttons, inputs, modals, sign-up gate */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border:1px solid var(--fill)!important;border-radius:999px!important;background:var(--fill)!important;color:var(--fill-ink)!important;font-family:var(--f-body)!important;font-size:14px!important;font-weight:600!important;letter-spacing:0;text-decoration:none;cursor:pointer;transition:background-color .15s ease,transform .12s var(--ease)}
@media (hover:hover){.btn:hover{background:var(--fill-hover)!important;border-color:var(--fill-hover)!important}}
.btn.ghost,.btn.oauth{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line-2)!important}
@media (hover:hover){.btn.ghost:hover,.btn.oauth:hover{background:var(--surface-2)!important;border-color:var(--line-2)!important}}
.btn:active{transform:scale(.98)}
.sheet input,.set-row input,.set-row select,.tool-in,.gate-email input{height:44px;padding:0 14px!important;border:1px solid var(--input)!important;border-radius:10px!important;background:var(--surface)!important;color:var(--ink)!important;font-family:var(--f-body)!important;font-size:15px!important;box-shadow:none!important}
/* sign-up box (owner, 8 Nov 2026: "make the email me text and box smaller"): the email row as slim as the sign-in buttons */
.gate-email{gap:8px!important;margin-top:0!important}
.gate-email input{height:40px!important;font-size:14px!important;padding:0 14px!important;border-radius:999px!important}
.gate-email .btn{height:40px!important;padding:0 16px!important;font-size:13.5px!important;font-weight:600!important;border-radius:999px!important}
.gate-email-status:empty{min-height:0!important;margin:4px 0 0!important}
@media (max-width:560px){.gate-email input{font-size:16px!important}}
.sheet input:focus,.set-row input:focus,.set-row select:focus,.tool-in:focus,.gate-email input:focus{outline:none;border-color:var(--ring)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 35%,transparent)!important}
.gate-email input.err{border-color:var(--danger)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 20%,transparent)!important}
.gate-email-status.err{color:var(--danger)!important}
@media (max-width:560px){.sheet input,.set-row input,.set-row select,.tool-in,.gate-email input{font-size:16px!important}}
.set-row label{font-size:13px!important;font-weight:500;letter-spacing:0!important;color:var(--ink)!important}
.modal{background:var(--v8-scrim)!important}
.sheet,.modal .sheet{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:var(--sh-lg)!important;padding:24px}
.sheet h3{font-size:20px!important;font-weight:700!important;letter-spacing:-.02em!important}
.sheet p{color:var(--muted)}
.ordiv{font-size:12px!important;color:var(--muted)!important}
.auth-status{font-size:13px!important}
.gate{background:var(--v8-scrim)!important;-webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important}
.gate-card{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:var(--sh-lg)!important;padding:32px 28px!important}
.gate-card h2{font-size:22px!important;font-weight:700!important;letter-spacing:-.025em!important}
.gate-card p{color:var(--muted)!important}
.gate-card .btn{border-radius:999px!important;min-height:44px;padding:0 16px!important;font-size:14px!important}
.gate-email .btn,html .gate-email .btn{height:44px!important;border-radius:999px!important;background:var(--fill)!important;color:var(--fill-ink)!important;box-shadow:none!important;font-weight:600!important}
.gate-progress{background:var(--surface-2)!important}
.gate-progress-bar{background:var(--fill)!important}
.gate-progress-cap{font-size:12px!important;letter-spacing:0!important}
.gate-optin input{accent-color:var(--fill)}
.gate-guest{color:var(--muted)!important}
@media (hover:hover){.gate-guest:hover{color:var(--ink)!important}}
/* MyCNBox bonus popup */
.pcwb-ov{background:var(--v8-scrim)!important}
.pcwb-card{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:var(--sh-lg)!important}
.pcwb-badge{font-size:12px!important;letter-spacing:0!important;text-transform:none!important;font-weight:600;color:var(--muted)!important}
.pcwb-amt{font-weight:700!important;letter-spacing:-.03em}
.pcwb-btn{border-radius:999px!important;background:var(--fill)!important;color:var(--fill-ink)!important;font-family:var(--f-body)}
@media (hover:hover){.pcwb-btn:hover{opacity:1!important;background:var(--fill-hover)!important}}
.pcwb-agent .go{color:var(--ink)!important;border:1px solid var(--line-2)!important;border-radius:999px!important}
/* how-to-order popup, QC lightbox */
.tut-pop{background:var(--v8-scrim)!important}
.tut-card{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:var(--sh-lg)!important}
.tut-n{background:var(--fill)!important;color:var(--fill-ink)!important;font-family:var(--f-body)!important}
/* ---------------------------------------------------------------- toasts: white cards with a hairline, like the rest */
.pc-toast,.optin-toast,html .pc-toast,html .optin-toast{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:var(--sh-lg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;font-family:var(--f-body)}
.pc-toast{font-size:14px!important;font-weight:500!important;padding:12px 16px!important}
.optin-toast #ot-yes{background:var(--fill)!important;color:var(--fill-ink)!important}
.optin-toast #ot-no{border:1px solid var(--line-2)!important;color:var(--ink)!important}
/* ---------------------------------------------------------------- in-app pages (tools, guides, bonus) */
.page h1,.page .ph{font-weight:700!important;letter-spacing:-.025em!important;font-size:clamp(28px,2vw + 18px,36px)!important}
.page .lead{color:var(--muted)}
.page-back{font-size:14px!important;color:var(--muted)!important}
.tool-box{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:12px!important}
.tool-box label{font-size:14px!important;font-weight:500;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important}
.tool-out{font-family:var(--f-body)!important;background:var(--surface-2)!important;border:0!important;border-radius:10px!important}
.qc-thumbs img{background:var(--well)!important;border-radius:8px!important}
.wb-feat{border:1px solid var(--line)!important;box-shadow:var(--sh-md)!important;border-radius:16px!important}
.wb-feat-badge{background:var(--fill)!important;color:var(--fill-ink)!important;letter-spacing:0!important;text-transform:none!important;font-size:12px!important}
.wb-card{border:1px solid var(--line)!important;border-radius:12px!important}
.wb-btn{background:var(--fill)!important;color:var(--fill-ink)!important;font-family:var(--f-body)!important;font-weight:600!important}
.wb-more-label,.blog-eyebrow{letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important;font-size:14px!important;font-weight:500}
/* ---------------------------------------------------------------- generic hero + hub hero (the homepage hero is styled by its own block) */
.hero .hero-h,html:not(.hub) .hero .hero-h{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--ink);padding-block:0!important;margin-block:0!important;font-weight:700!important;letter-spacing:-.025em!important}
.hero .hero-in{animation:none!important;transform:none!important}
.hero .hero-sub{color:var(--muted)}
.hero .hero-cta{background:var(--fill)!important;color:var(--fill-ink)!important;border-radius:999px!important;box-shadow:none!important;font-family:var(--f-body)!important;font-weight:600!important}
.hero .hero-link{color:var(--ink)!important}
.hero .v7-eyebrow{background:var(--surface-2)!important;border:0!important;box-shadow:none!important;font-family:var(--f-body)!important;letter-spacing:0!important;text-transform:none!important}
.hero .v7-eyebrow::before{background:var(--ink)!important;box-shadow:none!important}
.ftile{background:var(--well)!important;border-radius:12px!important;box-shadow:none!important}
.strip-head{font-size:16px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important}
.strip-head::before,.strip-head::after{display:none}
html.hub .hero-in{align-items:flex-start!important;text-align:left!important;padding-block:28px 20px!important;gap:8px!important}
html.hub .hero-h{font-size:clamp(28px,1.6vw + 20px,40px)!important;line-height:1.1!important;max-width:none!important}
html.hub .hero-sub{font-size:15px!important;color:var(--muted)!important;max-width:70ch}
.hub-bc{justify-content:flex-start!important;font-size:13px!important;color:var(--muted)!important}
.hub-bc a{color:var(--muted)!important}
@media (hover:hover){.hub-bc a:hover{color:var(--ink)!important}}
.hub-seo{border-top:1px solid var(--line)!important}
.hub-seo h2{font-size:20px!important;font-weight:700!important;letter-spacing:-.02em!important;text-transform:none!important;color:var(--ink)!important;margin:0 0 12px!important}
.hub-seo .hub-chips a{border:1px solid var(--line-2)!important;border-radius:999px!important;font-size:13.5px;font-weight:500}
.hub-seo summary{font-weight:600}
/* ---------------------------------------------------------------- about block + footer */
#seo{background:var(--surface-2)!important;border-top:0!important;color:var(--muted)!important}
#seo h2{font-weight:700!important;font-size:clamp(24px,1.4vw + 18px,32px)!important;letter-spacing:-.025em!important}
#seo h3{font-weight:600!important;letter-spacing:-.01em!important}
#seo a{color:var(--ink);text-underline-offset:2px}
footer{margin-top:0!important;border-top:1px solid var(--line)!important;background:var(--ground);color:var(--muted)}
footer>.wrap.foot-bar{padding-block:24px!important}
footer .mono{font-size:13px!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important}
footer>.wrap.foot-bar>.mono:first-child{font-weight:700;color:var(--ink)!important;font-size:15px!important;letter-spacing:-.01em!important}
footer .seo-links b{font-size:14px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important}
footer .seo-links a{font-size:14px!important;color:var(--muted)!important}
@media (hover:hover){footer a:hover,footer .seo-links a:hover,footer a.mono:hover{color:var(--ink)!important}}
footer .seo-disc{font-size:12.5px!important;color:var(--muted)!important}
@media (prefers-contrast:more),(prefers-reduced-transparency:reduce){
.masthead,.toolbar .deck,.toolbar .subdeck,.deck{background:var(--ground)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-reduced-motion:reduce){.qc-pill,.buy-pill,.card{transition-duration:.01ms!important}.card:active,.qc-pill:active,.buy-pill:active{transform:none!important}}
/* end v9 layer */
/* v9-home */
/* v9 home (29 Oct 2026): hero, category row, product carousels, QC block, tool teasers, tools grid, 3 steps, numbers,
and the "All Finds" heading (the FAQ section was removed on 30 Oct 2026). Homepage only: functions/_middleware.js removes #v9-home, the hero search and the hero
buttons on hub pages, and the html.hub rule below is the safety net. Every rule uses its own v9- classes and the
--v9-* tokens that the app layer defines for light and dark; the fallbacks are the light values. */
.hero,.v9-home{
/* fallbacks: the v8 tokens while they exist (so dark mode still reads), then the light values */
--_bg:var(--v9-bg,var(--surface,#fff));--_fg:var(--v9-fg,var(--ink,#0a0a0a));--_card:var(--v9-card,var(--surface,#fff));
--_pri:var(--v9-primary,var(--fill,#171717));--_prifg:var(--v9-primary-fg,var(--fill-ink,#fafafa));
--_mut:var(--v9-muted,var(--surface-2,#f5f5f5));--_mutfg:var(--v9-muted-fg,var(--muted,#6B6B6B));
--_bd:var(--v9-border,var(--line,#e5e5e5));--_r:var(--v9-radius,12px);
--_font:var(--v9-font,"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);
--_sh:0 1px 2px rgba(0,0,0,.05);--_sh-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
--_gut:24px;--_maxw:var(--v9-maxw,1280px)
}
html.hub .v9-home,html.hub .v9-hero-search,html.hub .v9-hero-actions,html.hub .v9-trust{display:none!important}
.v9-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---------- hero ---------- */
.v9-hero-in{box-sizing:border-box;max-width:var(--_maxw);margin:0 auto;padding:44px var(--_gut) 28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;font-family:var(--_font);color:var(--_fg)}
html .hero h1.v9-hero-h{font-family:var(--_font)!important;font-weight:700!important;letter-spacing:-.025em!important;font-size:clamp(30px,1.6vw + 22px,44px)!important;line-height:1.1!important;margin:0!important;padding:0!important;max-width:22ch!important;color:var(--_fg)!important;background:none!important;-webkit-text-fill-color:currentColor!important;animation:none!important;transform:none!important;opacity:1!important;text-wrap:balance}
html .hero p.v9-hero-sub{font-family:var(--_font)!important;font-size:16px!important;line-height:1.5!important;letter-spacing:0!important;color:var(--_mutfg)!important;margin:0!important;max-width:58ch!important;animation:none!important;opacity:1!important;transform:none!important}
html.hub .v9-hero-in{padding:24px var(--_gut) 18px;gap:8px}
html.hub .hero h1.v9-hero-h{font-size:clamp(26px,1vw + 20px,36px)!important;max-width:none!important}
.v9-hero-search{position:relative;display:flex;align-items:center;width:100%;max-width:580px;margin:6px 0 0}
.v9-hero-search .v9-s-ic{position:absolute;left:17px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--_mutfg);pointer-events:none}
.v9-hero-search input{box-sizing:border-box;width:100%;height:50px;margin:0;padding:0 58px 0 46px;border:1px solid var(--input-line,var(--_bd));border-radius:999px;background:var(--_card);color:var(--_fg);font:500 16px/1.2 var(--_font);box-shadow:var(--_sh);-webkit-appearance:none;appearance:none;transition:border-color .15s ease,box-shadow .15s ease}
.v9-hero-search input::placeholder{color:var(--_mutfg);opacity:1}
.v9-hero-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.v9-hero-search input:hover{border-color:color-mix(in srgb,var(--_bd) 60%,var(--_fg))}
.v9-hero-search .v9-s-go{position:absolute;right:5px;top:50%;width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:999px;background:var(--_pri);color:var(--_prifg);display:grid;place-items:center;cursor:pointer;transition:opacity .15s ease}
.v9-hero-search .v9-s-go:hover{opacity:.9}
.v9-hero-search .v9-s-go svg{width:18px;height:18px}
.v9-hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:2px}
/* trust row: Trustpilot rating + agent logo stack, right under the hero buttons. Fixed 24px row height: no layout shift */
.v9-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;margin-top:4px;font:500 13px/24px var(--_font);color:var(--_mutfg)}
.v9-tp{display:inline-flex;align-items:center;gap:7px;height:24px;color:var(--_mutfg)!important;text-decoration:none!important;border-radius:6px;transition:color .15s ease}
.v9-tp b{font-weight:600;color:var(--_fg)}
@media(hover:hover){.v9-tp:hover{color:var(--_fg)!important}.v9-tp:hover .v9-tp-l{text-decoration:underline;text-underline-offset:3px}}
.v9-tp:focus-visible{outline:2px solid var(--_fg);outline-offset:3px}
@media (pointer:coarse){.v9-tp{position:relative}.v9-tp::after{content:"";position:absolute;inset:-10px 0}}
.v9-tp-stars{display:inline-flex;gap:2px;flex:none}
.v9-tp-stars i{display:grid;place-items:center;width:16px;height:16px;border-radius:3px;background:#00b67a}
.v9-tp-stars svg{width:12px;height:12px;fill:#fff}
.v9-trust-sep{width:1px;height:16px;background:var(--_bd);flex:none}
.v9-ag{display:inline-flex;align-items:center;gap:9px;height:24px}
.v9-ag-stack{display:inline-flex;gap:4px;flex:none}
.v9-ag-stack img{position:relative;box-sizing:border-box;width:24px;height:24px;margin:0;padding:1px;border:1px solid var(--_bd);border-radius:999px;object-fit:contain;background:#fff;box-shadow:0 0 0 2px var(--_bg)}
.v9-ag-stack img.v9-ag-red{padding:0;border-color:#E1301F;background:#E1301F;object-fit:cover}
@media (max-width:560px){.v9-trust{gap:6px 12px;font-size:12.5px}.v9-trust-sep{display:none}}
/* ---------- buttons, inputs ---------- */
.v9-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:999px;font:600 14px/1 var(--_font);letter-spacing:0;text-decoration:none!important;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:opacity .15s ease,background-color .15s ease,border-color .15s ease}
.v9-btn svg{width:16px;height:16px;flex:none}
.v9-btn-primary{background:var(--_pri);color:var(--_prifg)!important}
.v9-btn-primary:hover{opacity:.9}
.v9-btn-secondary{background:var(--_mut);color:var(--_fg)!important}
.v9-btn-secondary:hover{background:color-mix(in srgb,var(--_mut) 88%,var(--_fg))}
.v9-btn-outline{background:var(--_card);color:var(--_fg)!important;border-color:var(--_bd)}
.v9-btn-outline:hover{background:var(--_mut)}
.v9-btn:active{opacity:.8}
.v9-input{box-sizing:border-box;width:100%;min-width:0;height:44px;margin:0;padding:0 14px;border:1px solid var(--input-line,var(--_bd));border-radius:10px;background:var(--_card);color:var(--_fg);font:400 16px/1.2 var(--_font);-webkit-appearance:none;appearance:none}
.v9-input::placeholder{color:var(--_mutfg);opacity:1}
.v9-home :focus-visible,.v9-hero-in :focus-visible{outline:2px solid var(--_fg);outline-offset:2px}
.v9-hero-search input:focus-visible,.v9-input:focus-visible{outline:2px solid var(--_fg);outline-offset:1px;border-color:var(--_fg)}
/* ---------- section shell ---------- */
.v9-home{display:block;font-family:var(--_font);color:var(--_fg);padding:4px 0 0}
.v9-home[hidden]{display:none!important}
.v9-wrap{box-sizing:border-box;max-width:var(--_maxw);margin:0 auto;padding:0 var(--_gut)}
.v9-sec{padding:22px 0}
.v9-home h2{font-family:var(--_font)!important;font-size:24px!important;font-weight:700!important;letter-spacing:-.025em!important;line-height:1.2!important;margin:0!important;color:var(--_fg);text-transform:none!important}
.v9-home h3{font-family:var(--_font)!important;font-size:16px!important;font-weight:600!important;letter-spacing:-.01em!important;line-height:1.3!important;margin:0!important;color:var(--_fg);text-transform:none!important}
.v9-home p{margin:0}
.v9-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.v9-head-r{display:flex;align-items:center;gap:6px;flex:none}
.v9-lead{font-size:15px;line-height:1.55;color:var(--_mutfg);max-width:60ch}
.v9-more{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 6px;border-radius:8px;font:500 14px/1 var(--_font);color:var(--_mutfg)!important;text-decoration:none!important;white-space:nowrap}
.v9-more:hover{color:var(--_fg)!important}
.v9-more svg{width:14px;height:14px}
/* ---------- category row ---------- */
.v9-cats{padding-top:6px}
.v9-cat-row{display:flex;justify-content:space-between;gap:12px;overflow-x:auto;scrollbar-width:none;padding:4px 0}
.v9-cat-row::-webkit-scrollbar{display:none}
.v9-cat{flex:1 0 96px;min-width:96px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 4px 4px;border-radius:var(--_r);color:var(--_fg)!important;text-decoration:none!important;-webkit-tap-highlight-color:transparent}
.v9-cat-ic{width:72px;height:72px;border-radius:999px;background:var(--_mut);color:var(--_fg);display:grid;place-items:center;transition:background-color .15s ease,color .15s ease}
.v9-cat-ic svg{width:28px;height:28px}
.v9-cat:hover .v9-cat-ic{background:color-mix(in srgb,var(--_mut) 86%,var(--_fg))}
.v9-cat.is-on .v9-cat-ic{background:var(--_pri);color:var(--_prifg)}
.v9-cat-l{font:500 14px/1.25 var(--_font);color:var(--_fg);text-align:center;white-space:nowrap}
.v9-cat-n{font:400 12px/1 var(--_font);color:var(--_mutfg);font-variant-numeric:tabular-nums}
/* ---------- product carousels (cards come from the app's card() function) ---------- */
.v9-arrows{display:none;gap:6px}
@media (hover:hover) and (pointer:fine){.v9-arrows{display:inline-flex}}
.v9-arr{width:34px;height:34px;padding:0;border:1px solid var(--_bd);border-radius:999px;background:var(--_card);color:var(--_fg);display:grid;place-items:center;cursor:pointer;transition:background-color .15s ease,opacity .15s ease}
.v9-arr:hover{background:var(--_mut)}
.v9-arr[disabled]{opacity:.35;cursor:default;background:var(--_card)}
.v9-arr svg{width:16px;height:16px}
.v9-rail{--v9-cw:calc((100% - 5 * 16px) / 6);display:flex;align-items:stretch;gap:16px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 0 10px;margin:-4px 0 0}
.v9-rail::-webkit-scrollbar{display:none}
.v9-rail:empty{min-height:300px}
.v9-rail>*{flex:0 0 var(--v9-cw);width:auto!important;max-width:none;min-width:0;margin:0!important;scroll-snap-align:start}
@media (max-width:1100px){.v9-rail{--v9-cw:calc((100% - 3 * 14px) / 4.3);gap:14px}}
/* ---------- QC block ---------- */
.v9-panel{background:var(--_mut);border-radius:calc(var(--_r) + 4px);padding:28px}
.v9-qc-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px 32px;align-items:center}
.v9-qc-copy{display:flex;flex-direction:column;gap:8px}
.v9-qc-form{display:flex;gap:8px}
.v9-qc-form .v9-input{flex:1 1 auto;min-width:0;background:var(--_card)}
.v9-qc-side{display:flex;flex-direction:column;gap:10px}
.v9-qc-note{font-size:13px;line-height:1.5;color:var(--_mutfg)}
.v9-qc-note a{color:var(--_fg)!important;font-weight:500;text-decoration:underline;text-underline-offset:2px}
.v9-qc-msg{font-size:13px;color:var(--_fg)}
.v9-qc-msg:empty{display:none}
/* ---------- tool teasers ---------- */
.v9-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.v9-tcard{display:flex;flex-direction:column;gap:14px;background:var(--_card);border:1px solid var(--_bd);border-radius:var(--_r);padding:24px;box-shadow:var(--_sh)}
.v9-tcard p{font-size:14px;line-height:1.55;color:var(--_mutfg)}
.v9-mock{display:flex;align-items:center;gap:8px;min-height:64px;padding:14px;border-radius:10px;background:var(--_mut);overflow:hidden}
.v9-mock-size{justify-content:center;flex-wrap:wrap}
.v9-chip{display:inline-grid;place-items:center;min-width:42px;height:32px;padding:0 10px;border-radius:999px;background:var(--_card);border:1px solid var(--_bd);font:600 13px/1 var(--_font);color:var(--_mutfg)}
.v9-chip.is-on{background:var(--_pri);border-color:var(--_pri);color:var(--_prifg)}
.v9-mock-trk{justify-content:space-between;gap:6px}
.v9-trk-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0;font:500 12px/1.2 var(--_font);color:var(--_mutfg);text-align:center}
.v9-trk-dot{width:12px;height:12px;border-radius:999px;background:var(--_bd)}
.v9-trk-step.is-done .v9-trk-dot{background:var(--_pri)}
.v9-trk-step.is-done{color:var(--_fg)}
.v9-trk-line{flex:1;height:2px;min-width:12px;margin-top:-18px;background:var(--_bd)}
.v9-trk-line.is-done{background:var(--_pri)}
.v9-tform{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.v9-tform .v9-field{flex:1 1 120px;display:flex;flex-direction:column;gap:6px;min-width:0}
.v9-tform label{font:500 13px/1.2 var(--_font);color:var(--_fg)}
.v9-tform .v9-btn{align-self:flex-end}
/* ---------- tools grid ---------- */
.v9-tools-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.v9-tool{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:var(--_r);background:var(--_card);border:1px solid var(--_bd);color:var(--_fg)!important;text-decoration:none!important;box-shadow:var(--_sh);transition:box-shadow .15s ease,border-color .15s ease}
.v9-tool:hover{box-shadow:var(--_sh-md);border-color:color-mix(in srgb,var(--_bd) 70%,var(--_fg))}
.v9-tool-ic{width:40px;height:40px;border-radius:999px;background:var(--_mut);display:grid;place-items:center;margin-bottom:4px}
.v9-tool-ic svg{width:20px;height:20px}
.v9-tool b{font:600 15px/1.3 var(--_font)}
.v9-tool span.v9-tool-d{font:400 13px/1.5 var(--_font);color:var(--_mutfg)}
/* ---------- 3 steps ---------- */
.v9-steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.v9-step{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--_r);background:var(--_mut)}
.v9-step-n{width:32px;height:32px;border-radius:999px;background:var(--_pri);color:var(--_prifg);display:grid;place-items:center;font:700 14px/1 var(--_font);margin-bottom:4px}
.v9-step p{font-size:14px;line-height:1.55;color:var(--_mutfg)}
.v9-steps-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:16px}
.v9-agents{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:500 13px/1.2 var(--_font);color:var(--_mutfg)}
.v9-agents img{width:28px;height:28px;border-radius:999px;object-fit:cover;background:var(--_mut);border:1px solid var(--_bd)}
/* ---------- numbers ---------- */
.v9-nums-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0}
.v9-num{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 12px;border:1px solid var(--_bd);border-radius:var(--_r);background:var(--_card);text-align:center}
.v9-num dt{order:2;font:400 13px/1.3 var(--_font);color:var(--_mutfg)}
.v9-num dd{order:1;margin:0;font:700 30px/1.1 var(--_font);letter-spacing:-.025em;color:var(--_fg);font-variant-numeric:tabular-nums}
/* ---------- "All Finds" heading above the toolbar ---------- */
.v9-all-head{padding:30px 0 10px}
.v9-all-head .v9-wrap{display:flex;flex-direction:column;gap:4px}
#v9-all{scroll-margin-top:8px}
/* ---------- tablet / phone ---------- */
@media (max-width:1024px){.v9-tools-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){
.v9-qc-in{grid-template-columns:minmax(0,1fr)}
.v9-duo,.v9-steps-grid{grid-template-columns:minmax(0,1fr)}
.v9-nums-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
.v9-rail{--v9-cw:calc((100% - 12px) / 2.2);gap:12px}
.v9-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
.hero,.v9-home{--_gut:16px}
.v9-hero-in{padding:28px var(--_gut) 18px;gap:12px}
.v9-hero-search input{height:52px}
.v9-hero-search .v9-s-go{width:44px;height:44px;margin-top:-22px;right:4px}
.v9-hero-actions{width:100%}
.v9-hero-actions .v9-btn{flex:1 1 0}
.v9-sec{padding:18px 0}
.v9-home h2{font-size:20px!important}
.v9-panel{padding:20px}
.v9-tcard{padding:20px}
.v9-qc-form{flex-direction:column}
.v9-qc-form .v9-btn,.v9-tform .v9-btn{width:100%}
.v9-cat-row{justify-content:flex-start;gap:4px;margin:0 calc(-1 * var(--_gut));padding:4px var(--_gut);scroll-padding-inline:var(--_gut);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.v9-cat{flex:0 0 84px;min-width:84px;scroll-snap-align:start}
.v9-cat-ic{width:64px;height:64px}
.v9-rail{margin:-4px calc(-1 * var(--_gut)) 0;padding:4px var(--_gut) 10px;scroll-padding-inline:var(--_gut)}
.v9-rail:empty{min-height:260px}
.v9-num dd{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
.v9-home *,.v9-hero-in *{transition:none!important;scroll-behavior:auto!important}
}
/* v9 icons (29 Oct 2026): ONE icon set. Every icon is pointing at the
#pc-icons sprite at the top of (same names and paths as ICONS in functions/_lib/site.js; ICON() in the app JS
builds the same markup). 24x24, stroke 1.75, round caps/joins, aria-hidden; a visible text label always sits next to
it. Same numbers as the icon block in ds.css, with the index tokens. */
.ic{width:20px;height:20px;flex:none;vertical-align:-4px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic.sm{width:16px;height:16px;vertical-align:-3px}
.ic-tile{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;background:var(--_mut,var(--v9-muted,var(--surface-2,#f5f5f5)));color:var(--_fg,var(--v9-fg,var(--ink,#0a0a0a)));flex:none}
.ic-tile .ic{width:20px;height:20px}
.h-ic{display:flex;align-items:center;gap:10px}
.h-ic .ic-tile{width:32px;height:32px}.h-ic .ic-tile .ic{width:18px;height:18px}
.ic-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.ic-row li{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:var(--_r,12px);background:var(--_mut,var(--v9-muted,var(--surface-2,#f5f5f5)));font:500 14px/1.3 var(--_font,inherit);color:var(--_fg,var(--v9-fg,var(--ink,#0a0a0a)))}
.ic-row.tight{display:flex;flex-wrap:wrap;gap:6px}
.ic-row.tight li{gap:6px;min-height:30px;padding:4px 12px 4px 10px;border-radius:999px;font-size:13px;color:var(--_fg,var(--ink,#0a0a0a))}
.ic-row.tight li .ic{width:16px;height:16px;color:var(--_mutfg,var(--muted,#737373))}
.ic-steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.ic-steps li{counter-increment:s;position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--_bd,var(--line,#e5e5e5));border-radius:var(--_r,12px);background:var(--_card,var(--surface,#fff));font:500 14px/1.3 var(--_font,inherit);color:var(--_fg,var(--ink,#0a0a0a))}
.ic-steps li::after{content:counter(s);position:absolute;top:6px;left:40px;min-width:16px;height:16px;border-radius:999px;background:var(--_pri,var(--fill,#171717));color:var(--_prifg,var(--fill-ink,#fafafa));font:600 10px/16px var(--_font,inherit);text-align:center}
details.v9-more{margin:0}
details.v9-more>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;font:500 14px/1.3 var(--_font,inherit);color:var(--_fg,var(--ink,#0a0a0a));list-style:none}
details.v9-more>summary::-webkit-details-marker{display:none}
details.v9-more>summary .ic{transition:transform .15s}
details.v9-more[open]>summary .ic{transform:rotate(180deg)}
details.v9-more>p{margin:0 0 4px;font-size:14px;line-height:1.55;color:var(--_mutfg,var(--muted,#737373))}
@media (prefers-reduced-motion:reduce){details.v9-more>summary .ic,#seo .seo-q>summary>.ic,.v9-step-d>summary .ic{transition:none}}
/* homepage pieces */
.v9-qc-copy .v9-qc-steps{margin-top:6px}
.v9-panel .h-ic .ic-tile{background:var(--_card)}
.v9-qc-side details.v9-more{margin-top:-6px}
.v9-tcard details.v9-more{margin-top:-8px}
.v9-step .ic-tile{position:relative;background:var(--_card);margin-bottom:4px}
.v9-step-ic::after{content:attr(data-n);position:absolute;top:-3px;right:-5px;min-width:18px;height:18px;border-radius:999px;background:var(--_pri);color:var(--_prifg);font:700 11px/18px var(--_font);text-align:center}
.v9-steps-foot .v9-btn .ic{width:16px;height:16px}
.v9-step-d>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;cursor:pointer;list-style:none}
.v9-step-d>summary::-webkit-details-marker{display:none}
.v9-step-d>summary h3{margin:0}
.v9-step-d>summary .ic{color:var(--_mutfg);transition:transform .15s}
.v9-step-d[open]>summary .ic{transform:rotate(180deg)}
.v9-step-d>p{margin:4px 0 0}
.v9-num dt{display:contents}
.v9-num .v9-num-ic{order:0;margin-bottom:6px}
.v9-num dt>span[data-i18n]{order:2;font:400 13px/1.3 var(--_font);color:var(--_mutfg)}
.v9-all-p .ic{margin-right:6px;color:var(--_mutfg)}
@media (max-width:560px){
.ic-steps.v9-qc-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.v9-qc-steps li{flex-direction:column;justify-content:flex-start;gap:8px;padding:12px 6px;text-align:center;font-size:12.5px}
.v9-qc-steps li::after{left:calc(50% + 10px)}
.h-ic .ic-tile{width:30px;height:30px}
}
/* narrow phones: the rail titles keep one line (the tile would push them to two next to View more and the arrows) */
@media (max-width:440px){.v9-row .h-ic .ic-tile{display:none}}
/* #seo block (homepage and every app hub; inline styles moved here, same values) */
#seo{border-top:1px solid var(--line);background:var(--surface);color:var(--muted)}
#seo .seo-in{padding-block:44px;max-width:960px}
#seo .seo-in>h2{font-family:var(--f-disp);font-weight:800;font-size:clamp(22px,3.4vw,30px);letter-spacing:-.02em;color:var(--ink);margin:0 0 14px}
#seo .seo-p1{margin:0 0 20px;line-height:1.65;max-width:70ch}
#seo .seo-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
#seo .seo-chips a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:13.5px;font-weight:500;line-height:1.2;color:var(--ink);text-decoration:none}
#seo .seo-chips a:hover{border-color:var(--muted)}
@media (pointer:coarse){#seo .seo-chips a{min-height:44px}}
#seo .seo-lbl{display:flex;align-items:center;gap:6px;margin:14px 0 8px;font-size:13px;font-weight:600;color:var(--ink)}
#seo .seo-qs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:start}
#seo .seo-q{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
#seo .seo-q>summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;cursor:pointer;list-style:none}
#seo .seo-q>summary::-webkit-details-marker{display:none}
#seo .seo-q h3{flex:1;min-width:0;margin:0;font-size:15px;line-height:1.3;color:var(--ink)}
#seo .seo-q>summary>.ic{color:var(--muted);transition:transform .15s}
#seo .seo-q[open]>summary>.ic{transform:rotate(180deg)}
#seo .seo-q p{margin:0;padding:0 14px 14px;line-height:1.6}
#seo .seo-lk{padding:2px 14px 14px}
#seo .seo-lk .seo-lbl{margin-top:12px}
/* hub template (section.hub-seo markup comes from hubParts() in pages.js) */
.hub-seo h2.h-ic .ic-tile{background:var(--surface-2);color:var(--ink)}
.hub-seo summary{justify-content:flex-start}
.hub-seo summary::after{margin-left:auto}
.hub-seo summary .ic{color:var(--muted)}
.hub-seo .hub-chips a{display:inline-flex;align-items:center;gap:6px}
.hub-seo .hub-chips a .ic,.hub-seo .ic.sm{color:var(--muted)}
/* app footer */
footer .seo-links b{display:flex;align-items:center;gap:6px}
footer .seo-links b .ic{color:var(--muted)}
footer .foot-bar a .ic{margin-right:5px}
/* product view (drawer) */
.sec-label .ic.sm{width:14px;height:14px;vertical-align:-2px;margin-right:6px}
.drawer .tag .ic.sm{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.report-link .ic.sm{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.d-aff{display:flex;align-items:flex-start;gap:6px;margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--faint)}
.d-aff .ic.sm{width:14px;height:14px;margin-top:1px}
/* ===================================================================================================================
v9 round 4 (29 Oct 2026, header, category photos, motion, skeletons). The header numbers are ds.css's (the server
pages): 56px row + 1px hairline, logo 104x28, 24px to the nav, 36px pill items at 500 weight in every state, the
Tools link + a 24px chevron button, one .nl-pill under the current item. Change both files together. DESIGN.md "Round 4".
=================================================================================================================== */
:root{--dur-1:120ms;--dur-2:200ms;--dur-3:320ms}
/* ---------- header that never moves ---------- */
html .masthead .mast-row{gap:0!important;min-height:56px!important;padding-block:0!important}
@media (min-width:561px){html .masthead .mast-row{height:56px}}
@media (min-width:641px){html .masthead .mast-row{padding-inline:32px!important}}
@media (min-width:561px) and (max-width:640px){html .masthead .mast-row{padding-inline:16px!important}}
.masthead{font-feature-settings:normal}
html .masthead .brand{display:flex!important;align-items:center;min-height:44px;margin:0 24px 0 0!important;padding:0!important;flex:none}
.v9-nav{position:relative;gap:4px!important;flex:0 0 auto}
/* the nav never shrinks and the header search shell (#pcs-hd) keeps the server pages' 240px; the row is capped at 1280px,
so there is no width where the Discord icon also fits. It stays in the footer (and the markup stays), like the server header */
.mast-tools .icon-btn{display:none!important}
.mast-tools{padding-left:8px}
/* from 561px (5 Nov 2026: was 561 to 1279px; at 1280px and up the row needs the room since Swipe joined the nav, and the
server pages have the same globe): the theme choice moves into the globe popover (the phone layout already has it there), so the
header row keeps room for the search button next to the full nav */
@media (min-width:561px){.theme-wrap{display:none!important}html .masthead.set-open .v9-theme-seg{display:flex;flex:0 0 100%}}
/* 561 to 719px: logo + nav + search + sign in + globe already fill the 56px row, so the MyCNBox pill takes its own full-width
row under it (as on phones) instead of running off the right edge; the first row keeps its 56px positions */
@media (min-width:561px) and (max-width:719px){
html .masthead .mast-row{height:auto;flex-wrap:wrap;justify-content:flex-start!important;padding-block:6px 10px!important;row-gap:6px!important}
html .masthead .mast-tools{display:contents}
html .masthead .pcs-hd{flex:0 0 auto}
html .masthead #auth-btn{margin-left:auto}
html .masthead #set-btn{margin-left:4px}
html .masthead .pc-mycnbox-btn{order:10!important;flex:0 0 100%;width:100%;display:flex;align-items:center;justify-content:center}
}
.v9-nl{position:relative;z-index:1;border-radius:999px!important;line-height:1!important;-webkit-tap-highlight-color:transparent;transition:color var(--dur-1) ease,background-color var(--dur-1) ease,transform var(--dur-1) var(--ease-out)!important}
.v9-nl[aria-current="page"]{color:var(--ink)!important;font-weight:500!important}
.v9-nav .tools-nav{position:relative;z-index:1;display:flex;align-items:center;padding-right:4px;border-radius:999px;transition:background-color var(--dur-1) ease}
.v9-nav .tools-btn{justify-content:center;width:24px;height:36px;margin-left:-8px;padding:0!important;gap:4px;border-radius:999px!important;background:transparent!important;color:var(--muted)!important;-webkit-tap-highlight-color:transparent}
.v9-nav .tools-btn svg{width:14px;height:14px;opacity:1;transition:transform var(--dur-2) var(--ease-out)}
.v9-nav .tools-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.v9-nav .tools-btn .tb-l{display:none}
@media (hover:hover){
.v9-nav .tools-nav:hover{background:var(--surface-2)}
.v9-nav .tools-nav>.v9-nl:hover,.v9-nav .tools-btn:hover{background:transparent!important}
.v9-nav .tools-nav:hover>.v9-nl,.v9-nav .tools-nav:hover .tools-btn{color:var(--ink)!important}
}
.v9-nav .tools-nav:has(.tools-btn[aria-expanded="true"]){background:var(--surface-2)}
.v9-nav .tools-nav:has(.tools-btn[aria-expanded="true"])>.v9-nl,.v9-nav .tools-btn[aria-expanded="true"]{color:var(--ink)!important;background:transparent!important}
.nl-pill{display:none;position:absolute;z-index:0;border-radius:999px;background:var(--surface-2);pointer-events:none}
@supports (anchor-name:--a){
.v9-nav>.v9-nl[aria-current="page"],.v9-nav>.tools-nav:has(>.v9-nl[aria-current="page"]){anchor-name:--nav-on}
.v9-nav:has(>.v9-nl[aria-current="page"],>.tools-nav>.v9-nl[aria-current="page"])>.nl-pill{display:block;position-anchor:--nav-on;top:anchor(top);bottom:anchor(bottom);left:anchor(left);right:anchor(right)}
}
@supports not (anchor-name:--a){
.v9-nav>.v9-nl[aria-current="page"],.v9-nav>.tools-nav:has(>.v9-nl[aria-current="page"]){background:var(--surface-2)!important}
}
/* under 1100px the links fold into the Tools menu: the chevron button shows its label again, no pill (5 Nov 2026: was
1024px; with Swipe in the nav the full row needs 1083px) */
@media (max-width:1099px){
.v9-nav .tools-btn{width:auto;margin-left:0;padding:0 12px!important}
.v9-nav .tools-btn .tb-l{display:inline}
.v9-nav .tools-nav{padding-right:0}
.nl-pill{display:none!important}
}
@media (max-width:560px){
.v9-nav .tools-btn{height:44px;padding:0 10px!important;color:var(--ink)!important}
html .masthead .mast-row{padding-top:6px!important;column-gap:0!important;row-gap:8px!important}
html .masthead .brand{margin-right:auto!important}
.mast-tools .auth-btn{padding:0 14px!important}
}
/* the header is one still layer between pages; the current-item pill glides under the link text */
@media (prefers-reduced-motion:no-preference){
html:not(.vt-morph) body:not(.pp-open) .masthead{view-transition-name:site-header}
html:not(.vt-morph) body:not(.pp-open) .v9-nav>.v9-nl[href="/"]{view-transition-name:nl-finds}
html:not(.vt-morph) body:not(.pp-open) .v9-nav>.v9-nl[href="/feed"]{view-transition-name:nl-swipe}
html:not(.vt-morph) body:not(.pp-open) .v9-nav>.v9-nl[href="/brands"]{view-transition-name:nl-brands}
html:not(.vt-morph) body:not(.pp-open) .v9-nav>.tools-nav{view-transition-name:nl-tools}
html:not(.vt-morph) body:not(.pp-open) .v9-nav>.v9-nl[href="/guides"]{view-transition-name:nl-guides}
html:not(.vt-morph) body:not(.pp-open) .v9-nav>.v9-nl[href="/how-to-order"]{view-transition-name:nl-how}
html:not(.vt-morph) body:not(.pp-open) .v9-nav>.nl-pill{view-transition-name:nav-pill}
}
::view-transition-group(nav-pill){animation-duration:260ms;animation-timing-function:var(--ease-in-out)}
::view-transition-group(nl-finds),::view-transition-group(nl-swipe),::view-transition-group(nl-brands),::view-transition-group(nl-tools),::view-transition-group(nl-guides),::view-transition-group(nl-how){animation-duration:220ms;animation-timing-function:var(--ease-in-out)}
/* header parity with the server pages (5 Nov 2026, ds.css "header parity" block has the same numbers):
- hover only darkens the link text; the grey pill means "you are here" and nothing else (a hovered Finds next to the
current Brands read as two selected items)
- from 1280px the search field gives up the few px the row is short of, instead of pushing the globe off the row */
@media (hover:hover){
html .v9-nav>.v9-nl:hover{background:transparent!important}
html .v9-nav .tools-nav:hover:not(:has(.tools-btn[aria-expanded="true"])){background:transparent}
}
@media (min-width:1280px){html .masthead .pcs-hd{flex:0 1 240px}}
/* phones: the Tools menu opens leftwards from its button (it ran 55px off a 375px screen) */
@media (max-width:560px){.v9-nav .tools-menu{left:auto;right:0;transform-origin:top right}}
/* ---------- category circles (round 5, rep-find style): a light grey circle (#F2F2F2, dark #262626) with the product as
a true cut-out (transparent WebP, /img/cat/*.webp), shown whole and centred at 80 % of the circle. No counts. ---------- */
.v9-cats,.pcs-cph{--_catbg:#F2F2F2}
:root[data-theme="dark"] :is(.v9-cats,.pcs-cph){--_catbg:#262626}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.v9-cats,.pcs-cph){--_catbg:#262626}}
:is(.v9-cat-ph,.pcs-cph) img[src*="/img/cat/headwear."]{width:68%!important;height:68%!important}
:is(.v9-cat-ph,.pcs-cph) img[src*="/img/cat/outerwear."]{width:75%!important;height:75%!important}
:root[data-theme="dark"] :is(.v9-cat-ph,.pcs-cph) img{filter:drop-shadow(0 0 1px rgba(255,255,255,.18))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.v9-cat-ph,.pcs-cph) img{filter:drop-shadow(0 0 1px rgba(255,255,255,.18))}}
.v9-cat-ic{background:var(--_catbg)!important;transition:transform 160ms var(--ease-out),box-shadow var(--dur-1) ease,background-color var(--dur-1) ease!important}
.v9-cat-ph{position:relative;overflow:visible} /* never crop the product: a wide cut-out may touch the rim */
.v9-cat-ph img{display:block;width:78%;height:78%;object-fit:contain;border-radius:0;background:none;mix-blend-mode:normal;transform:none;box-shadow:none;transition:opacity var(--dur-2) var(--ease-out)}
html.js-fade .v9-cat-ph img:not(.is-in){opacity:0}
@media (hover:hover){.v9-cat:hover .v9-cat-ic{background:color-mix(in srgb,var(--_catbg) 94%,var(--_fg))!important;transform:scale(1.04)}}
.v9-cat:active .v9-cat-ic{transform:scale(.96)}
.v9-cat.is-on .v9-cat-ic{box-shadow:inset 0 0 0 2px var(--_fg)} /* the active filter: an ink ring, the photo stays as it is */
.v9-cat:focus-visible{outline:none}
.v9-cat:focus-visible .v9-cat-ic{outline:2px solid var(--ring,#737373);outline-offset:3px}
/* ---------- press and hover: transform and opacity only, 120ms ---------- */
:is(.v9-btn,.v9-chip,a.v9-more,.v9-arr,.v9-tool,.v9-tcard a,.mast-tools .auth-btn,.pc-mycnbox-btn,.mast-tools .set-btn,.mast-tools .theme-btn,.mast-tools .icon-btn,.buy-pill,.qc-pill,.chip,.fselbtn,.v9-s-go,.v9-cat){-webkit-tap-highlight-color:transparent}
:is(.v9-btn,.v9-chip,a.v9-more,.v9-s-go){transition:background-color var(--dur-1) ease,color var(--dur-1) ease,border-color var(--dur-1) ease,opacity var(--dur-1) ease,transform var(--dur-1) var(--ease-out)}
:is(.v9-btn,.v9-chip,a.v9-more,.v9-arr:not([disabled]),.v9-s-go,.v9-nl,.mast-tools .auth-btn,.pc-mycnbox-btn,.buy-pill,.qc-pill):active{transform:scale(.96)}
.v9-tool{transition:box-shadow .15s ease,border-color .15s ease,transform var(--dur-1) var(--ease-out)}
.v9-tool:active{transform:scale(.98)}
/* ---------- carousels: soft snapping, arrows fade at the ends ---------- */
.v9-rail{scroll-snap-type:x proximity!important}
.v9-arr{transition:opacity var(--dur-2) var(--ease-out),background-color var(--dur-1) ease,transform var(--dur-1) var(--ease-out)!important}
/* ---------- menus: a short fade and lift on open, instant close ---------- */
.tools-menu{transform-origin:top left}
.theme-menu,html .masthead.set-open .v9-prefs{transform-origin:top right}
@media (prefers-reduced-motion:no-preference){
.tools-menu,.theme-menu,html .masthead.set-open .v9-prefs{transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
@starting-style{.tools-menu,.theme-menu,html .masthead.set-open .v9-prefs{opacity:0;transform:translateY(-4px) scale(.98)}}
}
/* ---------- skeleton cards in the home rails until the rows are built (same box as a card; opacity pulse) ---------- */
.sk-card{box-sizing:border-box;display:flex;flex-direction:column;padding:var(--card-pad,10px);border-radius:var(--r-card,12px);pointer-events:none}
.sk-card i{display:block;border-radius:6px;background:var(--_mut)}
.sk-card .sk-im{aspect-ratio:1/1;border-radius:10px}
.sk-card .sk-l1{width:45%;height:12px;margin:13px 0 5px}
.sk-card .sk-l2{width:90%;height:14px;margin:3px 0 6px}
.sk-card .sk-l3{width:60%;height:14px;margin:0 0 3px}
.sk-card .sk-pr{width:35%;height:16px;margin:6px 0 4px}
.sk-card .sk-p{height:30px;margin-top:14px;border-radius:999px}
@media (max-width:560px){.sk-card .sk-p{margin-top:37px}}
html:not(.js-fade) .sk-card{visibility:hidden}
@media (prefers-reduced-motion:no-preference){.sk-card i{animation:sk-pulse 1.2s ease-in-out infinite}}
@keyframes sk-pulse{0%,100%{opacity:1}50%{opacity:.6}}
/* ---------- reduced motion: no transforms, no fades, no pulses ---------- */
@media (prefers-reduced-motion:reduce){
.v9-cat-ic,.v9-cat-ph img,.nl-pill,.v9-nav .tools-btn svg,.v9-arr,.tools-menu,.theme-menu,.v9-prefs,.v9-tool{transition-duration:.01ms!important}
.sk-card i{animation:none!important}
html.js-fade .v9-cat-ph img:not(.is-in){opacity:1}
.v9-cat:hover .v9-cat-ic,.v9-cat:active .v9-cat-ic,:is(.v9-btn,.v9-chip,a.v9-more,.v9-arr,.v9-s-go,.v9-nl,.mast-tools .auth-btn,.pc-mycnbox-btn,.buy-pill,.qc-pill,.v9-tool):active{transform:none!important}
}
/* r6 GROUP A: spreadsheet (items 12, 13, 15, 16, 19, 20 and the sticky toolbar of 18). Only GROUP A edits this block. */
:root{--pc-tb-sh:rgba(0,0,0,.18);--pc-thumb-line:#D4D4D4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pc-tb-sh:rgba(0,0,0,.6);--pc-thumb-line:rgba(0,0,0,.35)}}
:root[data-theme="dark"]{--pc-tb-sh:rgba(0,0,0,.6);--pc-thumb-line:rgba(0,0,0,.35)}
.pc-vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* ---- sticky spreadsheet toolbar (item 18): only these rows stick, at top:0, near-opaque glass, hairline on the last row ---- */
.pc-tb-sent{display:block;height:1px;margin-bottom:-1px;pointer-events:none;visibility:hidden}
html .toolbar .deck,html .toolbar .subdeck{background:var(--ground)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){html .toolbar .deck,html .toolbar .subdeck{background:var(--ground)!important}}
@media (prefers-contrast:more),(prefers-reduced-transparency:reduce){html .toolbar .deck,html .toolbar .subdeck{background:var(--ground)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
html .toolbar .deck{position:sticky!important;top:0!important;z-index:32;padding-top:calc(10px + env(safe-area-inset-top))!important;padding-bottom:10px!important;border-bottom:0!important}
html .toolbar .deck .wrap{display:flex;align-items:center;gap:8px}
html .toolbar .deck .search{flex:1 1 auto;min-width:0}
/* photo search (8 Nov 2026): camera button in the search field */
.search{position:relative}
.pc-cam{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;margin-right:4px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s,color .15s,transform .1s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){.pc-cam:hover{background:var(--hover,rgba(127,127,127,.12));color:var(--ink)}}
.pc-cam:active{transform:scale(.96)}
.pc-cam .ic{width:20px;height:20px}
.pc-cam.busy{pointer-events:none;color:var(--ink)}
.pc-cam.busy .ic{animation:pcCamPulse 1s ease-in-out infinite}
@keyframes pcCamPulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.pc-cam.busy .ic{animation:none}}
html .toolbar .subdeck{z-index:31;border-bottom:1px solid var(--line)!important}
@media (min-width:561px){html .toolbar .subdeck{position:sticky!important;top:var(--deck-h,64px)!important}}
html .toolbar .subdeck::before{content:none!important}
html .toolbar .subdeck::after,html .toolbar .deck::after{content:""!important;display:block!important;position:absolute;inset:0;height:auto;pointer-events:none;background:none!important;box-shadow:0 1px 0 var(--line),0 8px 16px -12px var(--pc-tb-sh);opacity:0;transition:opacity var(--dur-2,200ms) var(--ease-out,ease)}
html .toolbar .deck::after{content:none!important}
html .toolbar.is-stuck .subdeck::after{opacity:1}
/* row 2: one line of filter pills; scrolls sideways when it does not fit (24px edge fades) */
html .toolbar .subdeck .wrap.filters-row{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;height:48px;padding-block:6px!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
@media (pointer:coarse){html .toolbar .subdeck .wrap.filters-row{scroll-snap-type:x proximity}}
html .toolbar .subdeck .wrap.filters-row::-webkit-scrollbar{display:none}
html .toolbar .subdeck .wrap.filters-row>*{flex:0 0 auto;scroll-snap-align:start}
html .toolbar .subdeck .wrap.filters-row.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
html .toolbar .subdeck .wrap.filters-row.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px);mask-image:linear-gradient(90deg,transparent,#000 24px)}
html .toolbar .subdeck .wrap.filters-row.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
html .toolbar .filters-row .spacer{display:block!important;flex:1 1 auto!important;min-width:8px}
.pc-div{flex:none!important;width:1px;height:20px;margin:0 4px;background:var(--line-2)}
.toolbar .fselbtn.is-on,.toolbar .price-btn.is-on,.pp-filters .fselbtn.is-on{background:var(--fill)!important;color:var(--fill-ink)!important;border-color:var(--fill)!important}
.fselbtn .cselchev,.price-btn>svg{transition:transform var(--dur-2,200ms) var(--ease-out,ease)}
.fselbtn[aria-expanded="true"] .cselchev,.price-btn[aria-expanded="true"]>svg{transform:rotate(180deg)}
.saved-chip#qc-chip svg{width:16px;height:16px}
.sort-fsel .csellbl::before{content:attr(data-pre);color:inherit;opacity:.72;font-weight:500}
#count.count{white-space:nowrap;font-family:var(--f-body)!important;font-size:13px!important;font-weight:500!important;color:var(--muted)!important;font-variant-numeric:tabular-nums;letter-spacing:0!important;text-transform:none!important}
#count b{color:var(--ink);font-weight:600}
/* density toggle (items 13 + 19) */
.pc-dens{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface)}
.pc-dens button{display:inline-grid;place-items:center;width:32px;height:32px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;transition:background-color var(--dur-1,120ms) ease,color var(--dur-1,120ms) ease}
.pc-dens button svg{width:16px;height:16px}
.pc-dens button[aria-pressed="true"]{background:var(--surface-2);color:var(--ink)}
@media (hover:hover){.pc-dens button:hover{color:var(--ink)}}
.pc-dens button:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
/* phones: ONE sticky row (search + Filters button); the pills live in the filter sheet */
.pc-fbtn{display:none}
@media (max-width:560px){
html .toolbar .deck{border-bottom:1px solid var(--line)!important}
html .toolbar .deck::after{content:""!important}
html .toolbar.is-stuck .deck::after{opacity:1}
html .toolbar .subdeck:not(.fs-on){display:none!important}
.pc-dens{display:none!important}
.pc-fbtn{display:inline-grid;place-items:center;position:relative;flex:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pc-fbtn svg{width:20px;height:20px}
.pc-fbtn[aria-expanded="true"]{background:var(--fill);color:var(--fill-ink);border-color:var(--fill)}
.pc-fbadge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ink);color:var(--ground);font:600 11px/18px var(--f-body);font-variant-numeric:tabular-nums;text-align:center;box-shadow:0 0 0 2px var(--ground)}
.pc-fbadge[hidden]{display:none}
}
/* ---- filter sheet (phones) ---- */
.subdeck>.fs-head,.subdeck>.fs-body,.subdeck>.fs-foot{display:none}
@media (max-width:560px){
html .toolbar .subdeck.fs-on{display:flex!important;flex-direction:column;position:fixed!important;left:0;right:0;bottom:0;top:auto!important;z-index:86;max-height:88dvh;max-height:88vh;max-height:88dvh;background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;border-radius:16px 16px 0 0;box-shadow:var(--sh-lg)!important;transform:translateY(100%);transition:transform var(--dur-2,200ms) var(--ease-out,ease);overflow:hidden}
html .toolbar .subdeck.fs-on.fs-in{transform:none;transition-duration:var(--dur-3,320ms)}
html .toolbar .subdeck.fs-on::after{content:none!important}
html .toolbar .subdeck.fs-on>.filters-row{display:none!important}
.subdeck.fs-on>.fs-head{display:block;flex:none;touch-action:none}
.subdeck.fs-on>.fs-body{display:block;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.subdeck.fs-on>.fs-foot{display:flex;flex:none}
}
.fs-grab{display:block;width:36px;height:5px;margin:8px auto 0;border-radius:3px;background:var(--line-2)}
.fs-bar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;height:52px;padding:0 6px;border-bottom:1px solid var(--line)}
.fs-ttl{grid-column:2;text-align:center;font:600 16px/1.2 var(--f-body);color:var(--ink)}
.fs-back,.fs-x{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.fs-back[hidden]{visibility:hidden;display:inline-grid}
.fs-x{grid-column:3}
.fs-rows{padding:4px 0}
.fs-rows[hidden],.fs-panel[hidden]{display:none}
.fs-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:0 16px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:500 15px/1.3 var(--f-body);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fs-row:last-child{border-bottom:0}
.fs-row .fs-l{flex:none}
.fs-row .fs-v{flex:1 1 auto;min-width:0;text-align:right;color:var(--muted);font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-row>svg{flex:none;width:18px;height:18px;color:var(--muted)}
.fs-row:active{background:var(--surface-2)}
.fs-row:focus-visible,.fs-back:focus-visible,.fs-x:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.fs-tg{justify-content:space-between}
.fs-sw{position:relative;flex:none;width:44px;height:26px;border-radius:13px;background:var(--line-2);transition:background-color var(--dur-2,200ms) ease}
.fs-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#FFFFFF;box-shadow:var(--sh-sm);transition:transform var(--dur-2,200ms) var(--ease-out,ease)}
.fs-tg[aria-checked="true"] .fs-sw{background:var(--fill)}
.fs-tg[aria-checked="true"] .fs-sw::after{transform:translateX(18px);background:var(--fill-ink)}
.fs-panel{padding:8px 16px 16px}
@media (prefers-reduced-motion:no-preference){
.fs-panel{transition:transform var(--dur-2,200ms) var(--ease-out,ease),opacity var(--dur-2,200ms) var(--ease-out,ease)}
@starting-style{.fs-panel{transform:translateX(24px);opacity:0}}
}
.fs-foot{gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface)}
.fs-clear,.fs-show{height:44px;border-radius:999px;font:600 15px/1 var(--f-body);cursor:pointer}
.fs-clear{flex:none;padding:0 18px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.fs-clear:disabled{color:var(--muted);cursor:default}
.fs-show{flex:1 1 auto;border:0;background:var(--fill);color:var(--fill-ink);font-variant-numeric:tabular-nums}
.pc-fscrim{position:fixed;inset:0;z-index:85;background:var(--v8-scrim,rgba(0,0,0,.5));opacity:0;transition:opacity var(--dur-2,200ms) ease}
.pc-fscrim.on{opacity:1}
.pc-fscrim[hidden]{display:none}
html.pc-fs-lock,html.pc-fs-lock body{overflow:hidden}
.fs-panel .ms-in{min-height:0}
.fs-panel .ms-top{padding:4px 0 8px}
.fs-panel .ms-s{height:44px}
.fs-panel .ms-s input{font-size:16px}
.fs-panel .ms-list{max-height:none;overflow:visible;padding:0}
.fs-panel .ms-foot{display:none}
.fs-panel .ms-opt{min-height:48px}
#price-pop.price-pop.in-sheet #pp-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#price-pop.price-pop.in-sheet,#price-pop.in-sheet{position:static!important;inset:auto!important;max-width:none!important;width:auto!important;max-height:none!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;transform:none!important;opacity:1!important}
#price-pop.in-sheet .pp-show{display:none}
/* ---- brand + colour multi-select popover (items 12 + 16) ---- */
.cselmenu.pc-ms{display:flex;flex-direction:column;width:320px;max-width:calc(100vw - 16px);max-height:min(480px,70vh);padding:0!important;border-radius:16px!important;overflow:hidden;z-index:60}
.cselmenu.pc-ms[hidden]{display:none!important}
.cselmenu.cm-portal{z-index:60}
.ms-in{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.ms-top{flex:none;padding:16px 16px 8px}
.ms-s{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid transparent;border-radius:10px;background:var(--surface-2);transition:border-color var(--dur-1,120ms) ease}
.ms-s:focus-within{border-color:var(--ink)}
.ms-s svg{flex:none;width:16px;height:16px;color:var(--muted)}
.ms-s input{flex:1 1 auto;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font:400 14px/1 var(--f-body);-webkit-appearance:none;appearance:none}
.ms-s input::placeholder{color:var(--muted)}
.ms-s input::-webkit-search-cancel-button{display:none}
.ms-list{position:relative;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 8px 8px;outline:0}
.ms-g[hidden],.ms-opt[hidden],.ms-none[hidden]{display:none!important}
.ms-gh{padding:10px 8px 4px;font:500 12px/1.3 var(--f-body);color:var(--muted);letter-spacing:0;text-transform:none}
.ms-opt{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 8px;border-radius:8px;color:var(--ink);font:500 14px/1.25 var(--f-body);cursor:pointer;outline:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
@media (hover:hover){.ms-opt:hover{background:var(--surface-2)}}
.ms-opt:focus-visible{box-shadow:inset 0 0 0 2px var(--ring)}
.ms-l{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-ck{flex:none;display:grid;place-items:center;width:18px;height:18px;border:1.5px solid var(--input-line,#949494);border-radius:5px;color:var(--fill-ink);transition:background-color var(--dur-1,120ms) ease,border-color var(--dur-1,120ms) ease}
.ms-ck svg,.ms-sw svg{width:14px;height:14px;opacity:0;transition:opacity var(--dur-1,120ms) ease}
.ms-opt[aria-selected="true"] .ms-ck{background:var(--fill);border-color:var(--fill)}
.ms-opt[aria-selected="true"] .ms-ck svg,.ms-opt[aria-selected="true"] .ms-sw svg{opacity:1}
.ms-sw{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--sw,#c8ccd4);color:#FFFFFF}
.ms-sw.is-light{color:#0A0A0A}
.ms-sw.is-ring{box-shadow:0 0 0 1px var(--line-2)}
.ms-sw.is-multi{background:conic-gradient(#c0392b 0 25%,#e3c04a 0 50%,#3a7d5b 0 75%,#2e5aa8 0)}
.ms-rd{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--input-line,#949494);transition:border-width var(--dur-1,120ms) ease,border-color var(--dur-1,120ms) ease}
.ms-opt[aria-selected="true"] .ms-rd{border:6px solid var(--fill)}
.ms-none{padding:16px 8px;text-align:center;color:var(--muted);font:400 13px/1.4 var(--f-body)}
.ms-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;border-top:1px solid var(--line);background:var(--surface)}
.ms-clear,.ms-done{height:36px;border-radius:999px;font:500 14px/1 var(--f-body);cursor:pointer}
.ms-clear{padding:0 12px;margin-left:-12px;border:0;background:transparent;color:var(--ink)}
.ms-clear:disabled{color:var(--muted);opacity:.7;cursor:default}
.ms-done{padding:0 20px;border:0;background:var(--fill);color:var(--fill-ink);font-weight:600}
.ms-clear:focus-visible,.ms-done:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
@media (pointer:coarse){.ms-opt{min-height:44px}.ms-clear,.ms-done{height:44px}}
.cselmenu.pc-ms.ms-sheet{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;max-width:none!important;max-height:none!important;border-radius:0!important;border:0!important;z-index:1000;padding-top:env(safe-area-inset-top)!important}
.cselmenu.pc-ms.ms-sheet .ms-s{height:44px}
.cselmenu.pc-ms.ms-sheet .ms-s input{font-size:16px}
.cselmenu.pc-ms.ms-sheet .ms-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
@media (prefers-reduced-motion:no-preference){
.cselmenu.pc-ms,#price-pop.pc-port{transition:opacity var(--dur-2,200ms) var(--ease-out,ease),transform var(--dur-2,200ms) var(--ease-out,ease)}
@starting-style{.cselmenu.pc-ms,#price-pop.pc-port{opacity:0;transform:scale(.98)}}
.cselmenu.pc-ms.ms-sheet{transition:transform var(--dur-3,320ms) var(--ease-out,ease)}
@starting-style{.cselmenu.pc-ms.ms-sheet{opacity:1;transform:translateY(24px)}}
}
/* type menu: the same checkbox look */
#f-type-menu .cselitem .ck,#pp-type-menu .cselitem .ck{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border:1.5px solid var(--input-line,#949494);border-radius:5px;font-size:12px;line-height:1;color:var(--fill-ink)!important}
#f-type-menu .cselitem.sel .ck{background:var(--fill);border-color:var(--fill)}
/* ---- price popover (item 15) ---- */
#price-pop.price-pop{width:320px;max-width:calc(100vw - 16px);padding:16px!important;border-radius:16px!important;box-shadow:var(--sh-lg)!important;z-index:60;outline:0}
#price-pop.price-pop[hidden]{display:none!important}
#price-pop.pc-port{position:fixed}
#price-pop .pp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 12px;font-size:inherit}
#price-pop .pp-ttl{display:flex;flex-direction:column;gap:2px;min-width:0}
#price-pop .pp-ttl b{font:600 15px/1.3 var(--f-body);color:var(--ink)}
#price-pop .pp-sum{font:500 13px/1.3 var(--f-body);color:var(--muted);font-variant-numeric:tabular-nums}
#price-pop #price-clear{flex:none;min-height:32px;padding:0;border:0;background:transparent;color:var(--ink)!important;font:500 13px/1 var(--f-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#price-pop #price-clear[aria-disabled="true"]{color:var(--muted)!important;text-decoration:none;cursor:default}
#price-pop .pp-hist{display:flex;align-items:flex-end;gap:2px;height:48px;margin:0 22px}
#price-pop .pp-hist i{flex:1 1 0;min-width:0;height:0;border-radius:2px 2px 0 0;background:var(--line-2)}
#price-pop .pp-hist i.in{background:var(--ink)}
#price-pop .pp-slider{position:relative;height:44px;margin:-10px 0 0}
#price-pop .pp-track{position:absolute;left:22px;right:22px;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--line)}
#price-pop .pp-fill{position:absolute;left:22px;right:22px;width:auto;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--ink)!important;transform-origin:0 50%;will-change:transform}
#price-pop .pp-slider input[type=range]{position:absolute;inset:0;width:100%;height:44px;margin:0;padding:0;background:transparent;pointer-events:none;-webkit-appearance:none;appearance:none;outline:0}
#price-pop .pp-slider input[type=range]::-webkit-slider-runnable-track{height:44px;background:transparent;border:0}
#price-pop .pp-slider input[type=range]::-moz-range-track{height:44px;background:transparent;border:0}
#price-pop .pp-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:44px;height:44px;margin-top:0;border:0;border-radius:50%;box-shadow:none;cursor:grab;background:radial-gradient(circle,#FFFFFF 0 9px,var(--pc-thumb-line) 9.5px 10px,rgba(0,0,0,.10) 10.5px 11.5px,rgba(0,0,0,.03) 11.5px 12.5px,transparent 13px)}
#price-pop .pp-slider input[type=range]::-moz-range-thumb{pointer-events:auto;width:44px;height:44px;border:0;border-radius:50%;box-shadow:none;cursor:grab;background:radial-gradient(circle,#FFFFFF 0 9px,var(--pc-thumb-line) 9.5px 10px,rgba(0,0,0,.10) 10.5px 11.5px,rgba(0,0,0,.03) 11.5px 12.5px,transparent 13px)}
#price-pop .pp-slider input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}
#price-pop .pp-slider input[type=range]:focus-visible::-webkit-slider-thumb{background:radial-gradient(circle,#FFFFFF 0 9px,var(--pc-thumb-line) 9.5px 10px,transparent 10.5px 12px,var(--ink) 12.5px 14px,transparent 14.5px)}
#price-pop .pp-slider input[type=range]:focus-visible::-moz-range-thumb{background:radial-gradient(circle,#FFFFFF 0 9px,var(--pc-thumb-line) 9.5px 10px,transparent 10.5px 12px,var(--ink) 12.5px 14px,transparent 14.5px)}
#price-pop .pp-ins{display:flex;align-items:flex-end;gap:10px;margin:4px 0 0}
#price-pop .pp-in{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px}
#price-pop .pp-k{font:500 12px/1.2 var(--f-body);color:var(--muted)}
#price-pop .pp-box{display:flex;align-items:center;gap:4px;height:36px;padding:0 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);transition:border-color var(--dur-1,120ms) ease,box-shadow var(--dur-1,120ms) ease}
#price-pop .pp-box:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 30%,transparent)}
#price-pop .pp-cur{flex:none;font:500 13px/1 var(--f-body);color:var(--muted)}
#price-pop .pp-box input{flex:1 1 auto;min-width:0;width:100%;height:100%;padding:0;border:0;outline:0;background:transparent;color:var(--ink);font:500 14px/1 var(--f-body);font-variant-numeric:tabular-nums}
#price-pop .pp-box input::placeholder{color:var(--muted)}
#price-pop .pp-to{flex:none;width:8px;height:1px;margin-bottom:18px;background:var(--muted)}
#price-pop .pp-presets{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
#price-pop .pp-pre{position:relative;height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink);font:500 13px/1 var(--f-body);font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color var(--dur-1,120ms) ease,color var(--dur-1,120ms) ease,border-color var(--dur-1,120ms) ease}
#price-pop .pp-pre::before{content:"";position:absolute;inset:-6px -2px}
@media (hover:hover){#price-pop .pp-pre:hover{background:var(--surface-2)}}
#price-pop .pp-pre[aria-pressed="true"]{background:var(--fill);color:var(--fill-ink);border-color:var(--fill)}
#price-pop .pp-show{display:block;width:100%;height:44px;margin:16px 0 0;border:0;border-radius:999px;background:var(--fill);color:var(--fill-ink);font:600 14px/1 var(--f-body);font-variant-numeric:tabular-nums;cursor:pointer}
#price-pop button:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
@media (max-width:560px){#price-pop .pp-box input{font-size:16px}#price-pop .pp-box{height:44px}#price-pop .pp-pre{height:36px}}
/* ---- active filter chips (one per value) ---- */
#af-row{gap:8px;margin:2px 0 16px}
#af-row .af-chip,#af-row .af-clear,#empty-x .af-chip,.ex-pop{position:relative;height:32px;min-height:32px;padding:0 12px;border-radius:999px;font:500 13px/1 var(--f-body);transition:opacity 160ms ease,transform 160ms ease,background-color var(--dur-1,120ms) ease}
#af-row .af-chip::before,#af-row .af-clear::before,#empty-x .af-chip::before,.ex-pop::before{content:"";position:absolute;inset:-6px -2px}
#af-row .af-chip svg,#empty-x .af-chip svg{width:14px;height:14px}
#af-row .af-clear{border:0;background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
#af-row .af-chip.is-out{opacity:0;transform:scale(.96)}
#clear-chip.pc-hide{display:none!important}
/* ---- grid: one column fewer by default (item 19), compact = the old size ---- */
@supports (container-type:inline-size){
main>.wrap{container-type:inline-size}
html #grid,html #grid-sk{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@container (min-width:768px){html #grid,html #grid-sk{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@container (min-width:964px){html #grid,html #grid-sk{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@container (min-width:1160px){html #grid,html #grid-sk{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@container (min-width:572px){html.grid-compact #grid,html.grid-compact #grid-sk{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@container (min-width:768px){html.grid-compact #grid,html.grid-compact #grid-sk{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@container (min-width:964px){html.grid-compact #grid,html.grid-compact #grid-sk{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@container (min-width:1160px){html.grid-compact #grid,html.grid-compact #grid-sk{grid-template-columns:repeat(6,minmax(0,1fr))!important}}
}
@media (min-width:1101px){.v9-rail{--v9-cw:calc((100% - 4 * 16px) / 5)}}
.v9-rail>.card{content-visibility:visible;contain-intrinsic-size:none}
@media (min-width:761px) and (max-width:1100px){.v9-rail{--v9-cw:calc((100% - 2 * 14px) / 3.3)}}
/* one row of skeleton cards while the next chunk renders */
#grid-sk{display:grid;gap:16px;grid-template-rows:auto;grid-auto-rows:0;row-gap:0;overflow:hidden;margin-top:16px;pointer-events:none}
#grid-sk[hidden]{display:none!important}
@media (max-width:560px){#grid-sk{gap:10px;margin-top:10px}}
#grid-sk .sk-card{visibility:visible!important}
#grid-sk .sk-card i{background:var(--surface-2)}
.pc-more{display:flex;align-items:center;justify-content:center;height:44px;margin:24px auto 0;padding:0 22px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink);font:500 14px/1 var(--f-body);cursor:pointer}
.pc-more[hidden]{display:none!important}
@media (hover:hover){.pc-more:hover{background:var(--surface-2)}}
/* new cards fade in: 200ms, 20ms stagger (the card entrance script sets --i) */
#grid .card.v8-enter{animation-duration:200ms!important;animation-delay:calc(min(var(--i,0),11) * 20ms)!important}
/* back to top */
.pc-top{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:30;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--fill);color:var(--fill-ink);box-shadow:var(--sh-md);font:500 13px/1 var(--f-body);cursor:pointer;opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity var(--dur-2,200ms) var(--ease-out,ease),transform var(--dur-2,200ms) var(--ease-out,ease),visibility 0s linear var(--dur-2,200ms)}
.pc-top.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.pc-top svg{width:16px;height:16px;transform:rotate(180deg)}
.pc-top:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
body.pp-open .pc-top{display:none}
@media (max-width:560px){.pc-top{bottom:calc(16px + env(safe-area-inset-bottom));height:44px}}
/* quick view on hover (desktop): QC photos + marketplace */
.pc-qv{position:absolute;left:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.94);color:#0A0A0A;box-shadow:var(--sh-sm);font:500 12px/1 var(--f-body);white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity 160ms var(--ease-out,ease),transform 160ms var(--ease-out,ease)}
.pc-qv svg{width:13px;height:13px}
.pc-qv b{font-weight:600}
.pc-qv i{width:1px;height:10px;background:rgba(0,0,0,.18)}
@media (hover:hover) and (pointer:fine){.card .thumb:hover .pc-qv{opacity:1;transform:none;transition-delay:300ms}}
@media (hover:none),(pointer:coarse){.pc-qv{display:none}}
/* long-press peek (phones) */
.pc-peek-ov{position:fixed;inset:0;z-index:87;background:var(--v8-scrim,rgba(0,0,0,.5));opacity:0;transition:opacity var(--dur-2,200ms) ease}
.pc-peek-ov.on{opacity:1}
.pc-peek{position:fixed;left:0;right:0;bottom:0;z-index:88;max-height:92dvh;overflow:auto;padding:8px 16px calc(16px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;background:var(--surface);box-shadow:var(--sh-lg);transform:translateY(100%);transition:transform var(--dur-3,320ms) var(--ease-out,ease)}
.pc-peek.on{transform:none}
.pc-peek .pk-grab{display:block;width:36px;height:5px;margin:0 auto 12px;border-radius:3px;background:var(--line-2)}
.pc-peek .pk-im{display:grid;place-items:center;aspect-ratio:1/1;max-height:50dvh;margin:0 auto 12px;border-radius:12px;overflow:hidden}
.pc-peek .pk-im img{width:100%;height:100%;object-fit:contain}
.pc-peek .pk-b{display:flex;flex-direction:column;gap:4px}
.pc-peek .pk-brand{font:500 12px/1.3 var(--f-body);color:var(--muted)}
.pc-peek .pk-t{font:500 16px/1.35 var(--f-body);color:var(--ink)}
.pc-peek .pk-p{font:600 16px/1.3 var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums}
.pc-peek .pk-p small{margin-left:6px;font:500 13px var(--f-body);color:var(--muted)}
.pc-peek .pk-acts{display:flex;gap:8px;margin:14px 0 0}
.pc-peek .pk-acts .buy-pill{flex:1 1 auto}
.pc-peek .pk-acts a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.pc-peek .pk-open{display:block;width:100%;height:44px;margin:10px 0 0;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink);font:600 14px/1 var(--f-body);cursor:pointer}
/* empty state: remove a filter, popular searches */
#empty-x{display:flex;flex-direction:column;align-items:center;gap:16px;margin:20px auto 0;max-width:640px}
#empty-x[hidden]{display:none}
#empty-x .ex-sec{display:flex;flex-direction:column;align-items:center;gap:8px}
#empty-x .ex-h{font:500 13px/1.3 var(--f-body);color:var(--muted)}
#empty-x .ex-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ex-pop{display:inline-flex;align-items:center;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer}
@media (hover:hover){.ex-pop:hover{background:var(--surface-2)}}
#empty #empty-clear{margin-top:20px}
/* reduced motion: no new animation */
@media (prefers-reduced-motion:reduce){
html .toolbar .subdeck.fs-on,.pc-fscrim,.pc-top,.pc-peek,.pc-peek-ov,#af-row .af-chip,.fs-sw,.fs-sw::after,.ms-ck,.pc-qv,.fselbtn .cselchev,.price-btn>svg,html .toolbar .subdeck::after{transition:none!important}
.pc-top,.pc-top.on{transform:translate(-50%,0)}
.pc-qv{transform:none}
}
/* ---- item 20: muted numbers and secondary text in Inter (500, tabular, no tracking, no caps, 1px under the label) ---- */
.cselitem .cseln,.ms-n{font-family:var(--f-body)!important;font-size:13px!important;font-weight:500!important;font-variant-numeric:tabular-nums!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important}
.ms-n{flex:none;margin-left:auto}
.card .subprice,.card .brand-line,.card .cat{font-family:var(--f-body)!important;font-size:12px!important;font-weight:500!important;font-variant-numeric:tabular-nums;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important}
.v9-cat-n{font-weight:500!important;font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none}
.hub-seo h2{font-family:var(--f-body)!important;font-size:13px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important}
.v7-eyebrow,.strip-head,.agents-strip .lbl,.eyebrow,.blog-eyebrow,.sec-label,.d-brand,.tools-label,.agent-badge,.wb-feat-badge,.wb-more-label,.tool-box label,footer .seo-links b{font-family:var(--f-body)!important;letter-spacing:0!important;text-transform:none!important}
.qc-badge,.pp-vals,.d-price .u,footer .mono,#foot-count,.starcount,.cviews{font-family:var(--f-body)!important;font-variant-numeric:tabular-nums;letter-spacing:0!important;text-transform:none!important}
.d-price .u,#foot-count,footer .mono{font-weight:500!important;color:var(--muted)!important}
/* v9 search */
.pcs-hd,.pcs-panel,.pcs-ov{--pcs-f:var(--f-body,"Inter",system-ui,sans-serif)}.pcs-hd{position:relative;margin-left:16px;flex:1 1 auto;min-width:0;display:flex;justify-content:flex-end;align-items:center}@media (min-width:1024px){.pcs-hd{flex:0 1 240px;justify-content:flex-start}}.pcs-hf{display:none}.pcs-hb{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent;transition:transform var(--dur-1,120ms) var(--ease-out,ease)}.pcs-hb:active{transform:scale(.96)}@media (hover:hover){.pcs-hb:hover{background:var(--surface-2);color:var(--ink)}}@media (max-width:560px){.pcs-hb{width:44px;height:44px}}@media (min-width:1280px){.pcs-hd{flex:0 0 240px;display:block}.pcs-hf{display:flex;align-items:center;gap:8px;box-sizing:border-box;height:36px;min-width:180px;padding:0 8px 0 12px;border-radius:999px;background:var(--surface-2);border:1px solid transparent;color:var(--muted)}.pcs-hf:focus-within{border-color:var(--line-2);background:var(--surface)}.pcs-hf:has(.pcs-hi:focus-visible){outline:2px solid var(--ink);outline-offset:2px}.pcs-hb{display:none}}.pcs-hf .ic{width:16px;height:16px;flex:none}.pcs-hi{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;background:transparent;color:var(--ink);font:400 14px/1 var(--pcs-f);outline:none;-webkit-appearance:none;appearance:none}.pcs-hi::placeholder{color:var(--muted);opacity:1}.pcs-hi::-webkit-search-cancel-button,.pcs-oi::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.pcs-kbd{min-width:44px;text-align:center;box-sizing:border-box;font:600 11px/18px var(--pcs-f);padding:0 6px;border:1px solid var(--line);border-radius:6px;color:var(--muted);white-space:nowrap}@media (pointer:coarse){.pcs-kbd{display:none}}.pcs-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:70;box-sizing:border-box;width:100%;max-width:720px;max-height:min(70vh,600px);overflow:auto;overscroll-behavior:contain;padding:6px;text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px -12px rgba(0,0,0,.25);font:400 14px/1.3 var(--pcs-f);animation:pcs-in var(--dur-2,200ms) var(--ease-out,ease)}.pcs-hd .pcs-panel{width:max(100%,560px);max-width:calc(100vw - 32px);box-shadow:var(--sh-lg)}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pcs-panel{box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}}:root[data-theme="dark"] .pcs-panel{box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}.pcs-panel[hidden],.pcs-panel [hidden]{display:none!important}#pcs-list{display:flex;flex-direction:column;outline:none}.pcs-sec{padding:2px 0}.pcs-h{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font:600 13px/1.2 var(--pcs-f);color:var(--muted)}.pcs-clr{border:0;background:none;padding:4px 6px;margin:-4px -6px;border-radius:6px;color:var(--muted);font:500 13px/1 var(--pcs-f);cursor:pointer}@media (hover:hover){.pcs-clr:hover{color:var(--ink);text-decoration:underline}}.pcs-row{display:flex;align-items:center;gap:12px;box-sizing:border-box;min-height:44px;padding:6px 12px;border-radius:8px;color:var(--ink)!important;text-decoration:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.pcs-row>.ic{width:16px;height:16px;color:var(--muted);flex:none}.pcs-row.is-act,.pcs-tile.is-act{background:var(--surface-2)}.pcs-row.is-kb,.pcs-tile.is-kb,.pcs-chip.is-kb{outline:2px solid var(--ink);outline-offset:-2px}.pcs-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pcs-t b,.pcs-pt b{font-weight:600}.pcs-x{display:grid;place-items:center;flex:none;width:36px;height:36px;margin:-6px -10px -6px 0;padding:0;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer}.pcs-x .ic{width:14px;height:14px}@media (hover:hover){.pcs-x:hover{color:var(--ink);background:color-mix(in srgb,var(--surface-2) 70%,var(--ink) 8%)}}.pcs-n{flex:none;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}.pcs-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 12px 8px}.pcs-chip{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:32px;padding:0 12px;border-radius:999px;background:var(--surface-2);color:var(--ink);font:500 13px/1 var(--pcs-f);white-space:nowrap;cursor:pointer;user-select:none;-webkit-user-select:none;transition:transform var(--dur-1,120ms) var(--ease-out,ease)}.pcs-chip:active{transform:scale(.96)}.pcs-chip.is-act{background:color-mix(in srgb,var(--surface-2) 86%,var(--ink))}.pcs-chip .ic{width:14px;height:14px;color:var(--muted)}.pcs-sk{width:76px;cursor:default;animation:pcs-pulse 1.2s ease-in-out infinite}.pcs-sk:nth-child(2){width:96px}.pcs-sk:nth-child(3){width:64px}.pcs-sk:nth-child(4){width:88px}.pcs-ail{margin-left:2px;font:600 10px/1 var(--pcs-f);color:var(--muted)}.pcs-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:0 0 4px}.pcs-tile{display:flex;align-items:center;gap:10px;min-width:0;min-height:52px;padding:6px;border-radius:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}.pcs-tw{display:flex;flex-direction:column;gap:2px;min-width:0}.pcs-tl{font:500 13px/1.2 var(--pcs-f);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pcs-tn{font:400 12px/1 var(--pcs-f);color:var(--muted);font-variant-numeric:tabular-nums}.pcs-cph{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:999px;background:var(--_catbg);overflow:visible}.pcs-cph img{display:block;width:78%;height:78%;object-fit:contain;border-radius:0;background:none;mix-blend-mode:normal;transform:none;box-shadow:none}.pcs-bt{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;background:var(--surface-2);color:var(--muted)}.pcs-bt .ic{width:16px;height:16px}.pcs-prod{min-height:64px;padding:8px 12px}.pcs-well{flex:none;width:48px;height:48px;border-radius:8px;background:transparent;overflow:hidden}.pcs-well img{display:block;box-sizing:border-box;width:100%;height:100%;padding:0;object-fit:contain;mix-blend-mode:multiply}.pcs-pm{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.pcs-pt{display:block;font:500 14px/1.3 var(--pcs-f);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pcs-ps{display:block;font:400 12px/1.2 var(--pcs-f);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pcs-pr{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}.pcs-pp{font:600 14px/1.2 var(--pcs-f);font-variant-numeric:tabular-nums;white-space:nowrap}.pcs-qc{display:inline-flex;align-items:center;gap:3px;box-sizing:border-box;height:20px;padding:0 7px;border:1px solid var(--line-2);border-radius:999px;font:600 11px/1 var(--pcs-f);color:var(--ink)}.pcs-qc .ic{width:12px;height:12px}.pcs-none{padding:10px 12px 2px;font:400 13px/1.3 var(--pcs-f);color:var(--muted)}.pcs-all{position:sticky;bottom:-6px;z-index:1;margin:4px -6px -6px;padding:0 18px;min-height:48px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;background:var(--surface);font-weight:500}.pcs-all.is-act{background:var(--surface-2)}.pcs-all .pcs-go{margin-left:auto;color:var(--ink)}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pcs-well img{mix-blend-mode:normal;border-radius:8px}}:root[data-theme="dark"] .pcs-well img{mix-blend-mode:normal;border-radius:8px}.pcs-cny{font-weight:500;font-size:12px;color:var(--muted)}html.pcs-lock,html.pcs-lock body{overflow:hidden!important}.pcs-ov{position:fixed;inset:0;z-index:95}.pcs-ov[hidden]{display:none}.pcs-bd{position:absolute;inset:0;background:rgba(0,0,0,.24);animation:pcs-fade var(--dur-2,200ms) var(--ease-out,ease)}.pcs-dlg{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;background:var(--surface);color:var(--ink)}.pcs-top{display:flex;align-items:center;gap:8px;flex:none}.pcs-fld{position:relative;display:flex;align-items:center;gap:8px;flex:1;min-width:0;box-sizing:border-box;color:var(--muted)}.pcs-fld>.ic{width:18px;height:18px;flex:none}.pcs-fld:focus-within{outline:2px solid var(--ink);outline-offset:1px}.pcs-oi{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;background:transparent;color:var(--ink);font:400 16px/1 var(--pcs-f);outline:none;-webkit-appearance:none;appearance:none}.pcs-oi::placeholder{color:var(--muted);opacity:1}.pcs-oclr,.pcs-back{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}.pcs-oclr{width:36px;height:36px;color:var(--muted)}.pcs-back .ic{width:20px;height:20px}.pcs-dlg .pcs-panel{position:static;flex:1;width:auto;max-width:none;max-height:none;min-height:0;border:0;border-radius:0;box-shadow:none;animation:none}.pcs-ov.is-pal .pcs-dlg{top:72px;left:50%;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 104px);transform:translateX(-50%);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px -12px rgba(0,0,0,.25);overflow:hidden;animation:pcs-pal var(--dur-2,200ms) var(--ease-out,ease)}.pcs-ov.is-pal .pcs-top{padding:10px 10px 10px 12px;border-bottom:1px solid var(--line)}.pcs-ov.is-pal .pcs-fld{height:48px;padding:0 6px 0 16px;border:1px solid var(--input-line,var(--line-2));border-radius:999px;background:var(--surface)}.pcs-ov.is-pal .pcs-back{order:2}.pcs-ov.is-pal .pcs-i-back,.pcs-ov.is-sheet .pcs-i-x{display:none}.pcs-ov.is-pal .pcs-dlg .pcs-panel{border-radius:0 0 12px 12px}.pcs-ov.is-sheet .pcs-bd{display:none}.pcs-ov.is-sheet .pcs-dlg{inset:0 0 auto 0;height:var(--pcs-vvh,100dvh);animation:pcs-up var(--dur-2,200ms) var(--ease-out,ease)}.pcs-ov.is-sheet .pcs-top{min-height:56px;padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) 0 max(4px,env(safe-area-inset-left));border-bottom:1px solid var(--line)}.pcs-ov.is-sheet .pcs-fld{height:44px;padding:0 0 0 12px;border-radius:12px;background:var(--surface-2)}.pcs-ov.is-sheet .pcs-dlg .pcs-panel{padding:6px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}.pcs-ov.is-sheet .pcs-row{min-height:52px;margin:0 -8px;padding-left:8px;padding-right:8px}.pcs-ov.is-sheet .pcs-prod{min-height:64px}.pcs-ov.is-sheet .pcs-h{padding-left:0;padding-right:0}.pcs-ov.is-sheet .pcs-chips{padding-left:0;padding-right:0}.pcs-ov.is-sheet .pcs-tiles{gap:8px 4px}.pcs-ov.is-sheet .pcs-tile{flex-direction:column;gap:6px;padding:4px 0;text-align:center}.pcs-ov.is-sheet .pcs-tile .pcs-cph{width:56px;height:56px}.pcs-ov.is-sheet .pcs-tw{align-items:center;max-width:100%}.pcs-ov.is-sheet .pcs-tn{display:none}.pcs-ov.is-sheet .pcs-all{bottom:0;margin:8px 0 0;padding:0 16px;min-height:48px;border:0;border-radius:999px;background:var(--fill);color:var(--fill-ink)!important;justify-content:center;box-shadow:0 -12px 12px -4px var(--surface)}.pcs-ov.is-sheet .pcs-all>.ic,.pcs-ov.is-sheet .pcs-all .pcs-go{color:var(--fill-ink)}.pcs-ov.is-sheet .pcs-all .pcs-t{flex:0 1 auto}.pcs-ov.is-sheet .pcs-all .pcs-go{margin-left:0}.pcs-ov.is-sheet #pcs-list{padding-bottom:max(12px,env(safe-area-inset-bottom))}@keyframes pcs-in{from{opacity:0;transform:translateY(-4px)}}@keyframes pcs-pal{from{opacity:0;transform:translateX(-50%) translateY(-6px) scale(.98)}}@keyframes pcs-up{from{opacity:0;transform:translateY(8px)}}@keyframes pcs-fade{from{opacity:0}}@keyframes pcs-pulse{50%{opacity:.6}}@media (prefers-reduced-motion:reduce){.pcs-panel,.pcs-dlg,.pcs-bd,.pcs-sk,.pcs-ov.is-pal .pcs-dlg,.pcs-ov.is-sheet .pcs-dlg{animation:none!important}.pcs-chip,.pcs-hb{transition:none!important}.pcs-chip:active,.pcs-hb:active{transform:none}}a.pcs-chip{color:var(--ink)!important;text-decoration:none!important}.pcs-cc{gap:6px;padding:0 12px 0 4px}.pcs-cc .pcs-cph{width:24px;height:24px}
/* round 5: welcome flow (#pcwb-ov) and the bookmark / install nudge (#pc-bm). v9 tokens, both themes. */
.pcwf-ov{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--v8-scrim,rgba(0,0,0,.5));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s linear .18s}
.pcwf-ov[hidden]{display:none}
.pcwf-ov.on{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s}
.pcwf-card{position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:100%;max-width:520px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-lg);font-family:var(--f-body);text-align:left;transform:translateY(8px) scale(.98);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.pcwf-ov.on .pcwf-card{transform:none}
.pcwf-x{position:absolute;top:10px;right:10px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}
.pcwf-btn[hidden]{display:none!important}.pcwf-x{color:var(--faint);opacity:.75}.pcwf-x svg{width:15px;height:15px} /* owner, 31 Oct 2026: subtle close x */
@media (hover:hover){.pcwf-x:hover{background:var(--surface-2);color:var(--ink)}}
.pcwf-head{padding:24px 24px 16px}
.pcwf-eye{margin:0 0 6px;font:500 13px/1.2 var(--f-body);letter-spacing:normal!important;text-transform:none;color:var(--muted)}
.pcwf-h{margin:0;padding-right:36px;font:700 22px/1.2 var(--f-body);letter-spacing:-.02em!important;color:var(--ink);outline:none}
.pcwf-sub{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.pcwf-prog{display:flex;gap:6px;margin-top:16px}
.pcwf-prog i{flex:1 1 0;height:4px;border-radius:999px;background:var(--surface-2);transition:background-color .2s ease}
.pcwf-prog i.on{background:var(--fill)}
.pcwf-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 24px 20px}
.pcwf-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px 20px;border-top:1px solid var(--line)}
.pcwf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;font:600 14px/1 var(--f-body);cursor:pointer;transition:background-color .12s ease,opacity .12s ease,transform .12s ease}
.pcwf-btn.ol{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.pcwf-btn.pri{background:var(--fill);color:var(--fill-ink);border:1px solid var(--fill)}
@media (hover:hover){.pcwf-btn.ol:hover{background:var(--surface-2)}.pcwf-btn.pri:hover{background:var(--fill-hover);border-color:var(--fill-hover)}}
.pcwf-btn:active{transform:scale(.96)}
.pcwf-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.pcwf-ov :focus-visible{outline:2px solid var(--ring,#737373);outline-offset:2px}
.pcwf-ov .pcwf-h:focus,.pcwf-ov .pcwf-h:focus-visible{outline:none} /* the title takes focus on open and on a step change, as the reading start point */
.pcwf-feat{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--line-2);border-radius:14px;transition:border-color .15s ease,box-shadow .15s ease}
.pcwf-feat.is-sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pcwf-pick{display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:10px}
.pcwf-logo{flex:none;width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--surface-2)}
.pcwf-ft{display:flex;flex-direction:column;gap:3px;min-width:0}
.pcwf-nm{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:600 15px/1.2 var(--f-body);color:var(--ink)}
.pcwf-badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--fill);color:var(--fill-ink);font:600 11px/1 var(--f-body)}
.pcwf-line{font-size:13px;line-height:1.4;color:var(--muted)}
.pcwf-dot{flex:none;box-sizing:border-box;width:20px;height:20px;margin-left:auto;display:grid;place-items:center;border:1.5px solid var(--input-line,#949494);border-radius:999px;transition:background-color .12s ease,border-color .12s ease}
[aria-checked="true"]>.pcwf-dot{background:var(--fill);border-color:var(--fill)}
[aria-checked="true"]>.pcwf-dot::after{content:"";width:4px;height:8px;margin-top:-2px;border:solid var(--fill-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pcwf-claim{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:36px;padding:0 14px;border-radius:999px;background:var(--surface-2);color:var(--ink)!important;font:600 13px/1 var(--f-body);text-decoration:none!important;transition:background-color .12s ease,transform .12s ease}
@media (hover:hover){.pcwf-claim:hover{background:color-mix(in srgb,var(--surface-2) 90%,var(--ink))}}
.pcwf-claim:active{transform:scale(.96)}
.pcwf-label{margin:20px 0 10px;font:600 13px/1 var(--f-body);color:var(--muted)}
.pcwf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pcwf-ag,.pcwf-c{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;padding:14px 8px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink);font:500 13px/1.2 var(--f-body);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease}
.pcwf-ag img{width:36px;height:36px;border-radius:8px;object-fit:cover;background:var(--surface-2)}
.pcwf-ag .pcwf-dot,.pcwf-c .pcwf-dot{position:absolute;top:8px;right:8px;width:18px;height:18px;margin:0}
.pcwf-ag:not([aria-checked="true"]) .pcwf-dot,.pcwf-c:not([aria-checked="true"]) .pcwf-dot{opacity:0}
.pcwf-ag.is-sel,.pcwf-c.is-sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
@media (hover:hover){.pcwf-ag:not(.is-sel):hover,.pcwf-c:not(.is-sel):hover,.pcwf-feat:not(.is-sel):hover{border-color:var(--input-line,#949494)}}
.pcwf-ag:active,.pcwf-c:active{transform:scale(.97)}
.pcwf-cur{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pcwf-c{gap:4px;padding:16px 8px 14px}
.pcwf-sy{font:700 20px/1 var(--f-body);letter-spacing:-.01em!important;color:var(--ink)}
.pcwf-cd{font:500 12px/1 var(--f-body);color:var(--muted)}
@media (max-width:560px){
.pcwf-ov{align-items:flex-end;padding:0}
.pcwf-card{max-width:none;max-height:92vh;max-height:92dvh;border-radius:20px 20px 0 0;border-bottom:0;transform:translateY(32px)}
.pcwf-head{padding:22px 16px 14px}
.pcwf-body{padding:4px 16px 16px}
.pcwf-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.pcwf-foot .pcwf-btn{flex:1 1 0}
.pcwf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pcwf-ag{flex-direction:row;justify-content:flex-start;padding:10px 12px;min-height:56px}
.pcwf-ag img{width:32px;height:32px}
.pcwf-ag .pcwf-dot{top:50%;margin-top:-9px}
.pcwf-cur{grid-template-columns:repeat(3,minmax(0,1fr))}
.pcwf-x{top:8px;right:6px;width:44px;height:44px}
}
.pcbm{position:fixed;right:24px;bottom:24px;z-index:85;box-sizing:border-box;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;width:360px;max-width:calc(100vw - 32px);padding:16px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-lg);font-family:var(--f-body);opacity:0;transform:translateY(12px);transition:opacity .2s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
.pcbm[hidden]{display:none}
.pcbm.on{opacity:1;transform:none}
.pcbm-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--surface-2);color:var(--ink)}
.pcbm-c{min-width:0;padding-right:24px}
.pcbm-t{margin:1px 0 0;font:600 15px/1.3 var(--f-body);color:var(--ink)}
.pcbm-p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.pcbm kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin:0 1px;padding:0 6px;box-sizing:border-box;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;background:var(--surface-2);color:var(--ink);font:600 12px/1 var(--f-body);vertical-align:1px}
.pcbm-steps{margin:8px 0 0;padding:0;list-style:none;counter-reset:pcbm;font-size:13.5px;line-height:1.5;color:var(--ink)}
.pcbm-steps li{counter-increment:pcbm;display:flex;align-items:center;gap:8px;margin-top:4px}
.pcbm-steps li::before{content:counter(pcbm);flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:999px;background:var(--surface-2);color:var(--ink);font:600 11px/1 var(--f-body)}
.pcbm-share{display:inline-block;vertical-align:-3px;margin:0 2px;color:var(--ink)}
.pcbm-acts{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
.pcbm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 16px;border-radius:999px;font:600 13px/1 var(--f-body);cursor:pointer;transition:background-color .12s ease,transform .12s ease}
.pcbm-btn.pri{background:var(--fill);color:var(--fill-ink);border:1px solid var(--fill)}
.pcbm-btn.ol{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
@media (hover:hover){.pcbm-btn.pri:hover{background:var(--fill-hover)}.pcbm-btn.ol:hover{background:var(--surface-2)}.pcbm-x:hover{background:var(--surface-2);color:var(--ink)}}
.pcbm-btn:active{transform:scale(.96)}
.pcbm-x{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}
.pcbm :focus-visible{outline:2px solid var(--ring,#737373);outline-offset:2px}
@media (max-width:560px){
.pcbm{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;max-width:none}
.pcbm-btn{flex:1 1 0;min-height:44px}
.pcbm-x{top:4px;right:4px;width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
.pcwf-ov,.pcwf-card,.pcwf-btn,.pcwf-ag,.pcwf-c,.pcwf-claim,.pcwf-prog i,.pcbm,.pcbm-btn{transition-duration:.01ms!important}
.pcwf-card,.pcwf-ov.on .pcwf-card,.pcbm{transform:none!important}
.pcwf-btn:active,.pcwf-ag:active,.pcwf-c:active,.pcwf-claim:active,.pcbm-btn:active{transform:none}
}
/* r6 GROUP B: chrome (items 9, 11, 14, 17, 18 header part, 21). Only GROUP B edits this block. */
/* item 11: no grey well behind product photos. The square boxes keep their size; the photo sits on the page. */
html .card .thumb,html .gmain,html .sim-thumb,html .ftile,html .thumbs .qcthumb-btn{background:transparent!important;border:0!important;box-shadow:none!important}
html .card .thumb img,html .card .thumb .pimg,html .gmain img,html .gmain .pimg,html .sim-thumb img,html .ftile img,html .thumbs .qcthumb-btn img{padding:0!important;filter:none!important;object-fit:contain!important;background:transparent!important;box-shadow:none!important;outline:0!important;mix-blend-mode:multiply}
html .thumbs .qcthumb-btn{outline:0!important}
html .thumbs .qcthumb-btn.on{outline:2px solid var(--ink)!important;outline-offset:2px!important}
html .fav,html .card .fav,html .drawer .fav{background:rgba(255,255,255,.92)!important;color:#0A0A0A!important;box-shadow:0 0 0 1px rgba(10,10,10,.08)!important}
/* owner 8 Nov: card stars much more subtle (faint chip, brighter on hover, solid once saved) */
html .card .fav{width:28px!important;height:28px!important;background:color-mix(in srgb,var(--surface) 45%,transparent)!important;color:var(--ink)!important;border:0!important;box-shadow:none!important;opacity:.4;transition:opacity .15s ease,background-color .15s ease}
html .card .fav svg{width:14px;height:14px;stroke-width:1.75}
@media (hover:hover){html .card:hover .fav{opacity:.85}html .card .fav:hover{opacity:1;background:color-mix(in srgb,var(--surface) 85%,transparent)!important}}
@media (hover:none){html .card .fav{opacity:.6}}
html .card .fav[aria-pressed="true"]{opacity:1}
:root[data-theme="dark"] :is(.card .thumb,.gmain,.sim-thumb,.ftile,.thumbs .qcthumb-btn) img{mix-blend-mode:normal!important;border-radius:12px!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.card .thumb,.gmain,.sim-thumb,.ftile,.thumbs .qcthumb-btn) img{mix-blend-mode:normal!important;border-radius:12px!important}}
:root[data-theme="dark"] .thumbs .qcthumb-btn img{border-radius:8px!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .thumbs .qcthumb-btn img{border-radius:8px!important}}
/* item 14: one disclosure component. Native / (keyboard, screen readers, content in the DOM). Summary = a full-width
44px row, 15px/500 label, 12px gap, 16px chevron that turns 180deg; list rows (#seo questions, hub FAQs) get a hover pill, inline ones an underline.
Height: ::details-content + interpolate-size where supported (scoped to these details, not :root, so no other auto-size
transition on the site starts animating), else the small WAAPI fallback in the page script. Reduced motion: instant. */
:root :is(details.v9-more,details.v9-step-d,#seo details.seo-q,.hub-seo details)>summary{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:44px;margin:0;padding:0;cursor:pointer;list-style:none;font-size:15px;font-weight:500;line-height:1.35;color:var(--ink);text-align:left;border-radius:8px;-webkit-tap-highlight-color:transparent;transition:color 120ms ease,background-color 120ms ease}
:root :is(details.v9-more,details.v9-step-d,#seo details.seo-q,.hub-seo details)>summary::-webkit-details-marker{display:none}
:root :is(details.v9-more,details.v9-step-d,#seo details.seo-q,.hub-seo details)>summary::marker{content:""}
:root :is(details.v9-more,details.v9-step-d,#seo details.seo-q,.hub-seo details)>summary h3{flex:0 1 auto;margin:0;font:inherit;letter-spacing:inherit;color:inherit}
:root :is(details.v9-step-d,#seo details.seo-q,.hub-seo details)>summary{padding:0 8px}
:root details.v9-more>summary>.ic,:root details.v9-step-d>summary>.ic,:root #seo details.seo-q>summary>.ic{flex:none;width:16px;height:16px;margin:0;color:var(--muted);transform:none;transition:transform 220ms var(--ease-out),color 120ms ease}
:root .hub-seo details>summary::after{content:"";flex:none;display:block;width:16px;height:16px;margin:0;padding:0;border:0;font-size:0;line-height:0;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/16px 16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/16px 16px no-repeat;transform:none;transition:transform 220ms var(--ease-out),background-color 120ms ease}
:root details.v9-more[open]>summary>.ic,:root details.v9-step-d[open]>summary>.ic,:root #seo details.seo-q[open]>summary>.ic,:root .hub-seo details[open]>summary::after{transform:rotate(180deg)}
:root details.v9-step-d>summary>.ic,:root #seo details.seo-q>summary>.ic,:root .hub-seo details>summary::after{margin-left:auto}
@media (hover:hover){
:root :is(details.v9-more,details.v9-step-d,#seo details.seo-q,.hub-seo details)>summary:hover{color:var(--ink)}
:root details.v9-more>summary:hover>.ic,:root details.v9-step-d>summary:hover>.ic,:root #seo details.seo-q>summary:hover>.ic{color:var(--ink)}
:root .hub-seo details>summary:hover::after{background:var(--ink)}
:root :is(details.v9-step-d,#seo details.seo-q,.hub-seo details)>summary:hover{background:var(--surface-2)}
:root :is(details.v9-more)>summary:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
}
:root :is(details.v9-more,details.v9-step-d,#seo details.seo-q,.hub-seo details)>summary:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
:root :is(details.v9-more,details.v9-step-d,#seo details.seo-q,.hub-seo details)>:not(summary){max-width:68ch;margin-left:0;margin-right:0;line-height:1.55;color:var(--ink-2)}
:root :is(details.v9-more,details.v9-step-d,#seo details.seo-q,.hub-seo details)>summary+*{margin-top:0;padding-top:8px}
:root :is(details.v9-more,details.v9-step-d,#seo details.seo-q,.hub-seo details)>:last-child:not(summary){margin-bottom:0;padding-bottom:16px}
:root :is(details.v9-step-d,#seo details.seo-q,.hub-seo details)>:not(summary){padding-left:8px;padding-right:8px}
:root #seo details.seo-q>summary{padding:0 14px;border-radius:11px}
:root #seo details.seo-q>:not(summary){padding-left:14px;padding-right:14px}
@keyframes pcr6-din{from{opacity:0}}
@media (prefers-reduced-motion:no-preference){
:root :is(details.v9-more,details.v9-step-d,#seo details.seo-q,.hub-seo details)[open]>:not(summary){animation:pcr6-din 220ms var(--ease-out) both}
@supports selector(::details-content){
:root :is(details.v9-more,details.v9-step-d,#seo details.seo-q,.hub-seo details){interpolate-size:allow-keywords}
:root :is(details.v9-more,details.v9-step-d,#seo details.seo-q,.hub-seo details)::details-content{block-size:0;overflow:clip;transition:block-size 240ms var(--ease-out),content-visibility 240ms allow-discrete}
:root :is(details.v9-more,details.v9-step-d,#seo details.seo-q,.hub-seo details)[open]::details-content{block-size:auto}
}
}
@media (prefers-reduced-motion:reduce){:root details.v9-more>summary>.ic,:root details.v9-step-d>summary>.ic,:root #seo details.seo-q>summary>.ic,:root .hub-seo details>summary::after{transition:none}}
/* item 17: the affiliate note is a quiet label under the buy button; the full sentence sits in a popover (hover / focus on
desktop, tap on touch) and stays in the DOM. The footer keeps the full sentence on every page. */
.aff-lb{position:relative;display:block;width:max-content;max-width:100%;margin:8px 0 0}
.aff-btn{display:inline-flex;align-items:center;gap:6px;min-height:24px;margin:0;padding:0;border:0;border-radius:6px;background:none;font-family:inherit;font-size:12px;font-weight:500;line-height:1.2;letter-spacing:normal;text-transform:none;color:var(--muted);cursor:help;-webkit-tap-highlight-color:transparent}
.aff-btn .ic,.aff-btn svg{flex:none;width:12px;height:12px;margin:0}
@media (pointer:coarse){.aff-btn{min-height:44px;margin:-10px 0}}
@media (hover:hover){.aff-btn:hover,.aff-lb.open .aff-btn{color:var(--ink)}}
.aff-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.aff-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:30;box-sizing:border-box;width:max-content;max-width:min(280px,calc(100vw - 32px));padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--sh-md);font-family:inherit;font-size:13px;font-weight:400;line-height:1.45;letter-spacing:normal;text-transform:none;text-align:left;white-space:normal;color:var(--ink-2);visibility:hidden;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out),visibility 0s linear 160ms}
.aff-pop::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.aff-lb.up .aff-pop{top:auto;bottom:calc(100% + 6px);transform:translateY(-4px)}
.aff-lb.up .aff-pop::before{top:auto;bottom:-8px}
.aff-lb.open .aff-pop{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out),visibility 0s}
.aff-pop a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.aff-pop,.aff-lb.open .aff-pop{transition:none}}
/* item 21: welcome flow step 3 "Last Step: Register At " */
.pcwf-btn[hidden],.pcwf-sub[hidden]{display:none!important}
.pcwf-s3{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:8px;text-align:center}
.pcwf-s3[hidden]{display:none}
.pcwf-s3-logo{flex:none;width:56px;height:56px;border-radius:14px;object-fit:cover;background:var(--surface-2)}
.pcwf-s3-p{margin:0 0 4px;max-width:38ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
.pcwf-s3 .pcwf-btn{box-sizing:border-box;width:100%;min-height:48px;gap:8px;font-size:15px;text-decoration:none!important}
.pcwf-s3 a.pcwf-btn.pri{color:var(--fill-ink)!important}
.pcwf-card{transition:min-height 0s}
/* review fix: the .v9-more link-pill rule must not lay out the disclosures inline */
:root details.v9-more{display:block;min-height:0;padding:0;border-radius:0;white-space:normal;font:inherit;color:inherit!important}
/* review fix: Affiliate link label sits inside .agents, right under the buy button, above the coupon hint */
.agents>.aff-lb{margin:1px 0 0}
/* round 8 (30 Oct 2026, NEXT.md 27 + 28), same look as the .pstats / .cbadge block at the end of ds.css.
.pstats: stat row under the product title (QC count, estimated weight): muted icon + number, full sentence in title/aria-label.
.cbadge: colour count over the card photo, 2+ real colours only. App cards have the Save star top-right, so the pill sits
top-left on its centre line; the similar-finds row has no star, so it sits top-right there. Absolutely placed: no layout shift. */
:root{--badge-bg:rgba(10,10,10,.62);--badge-ink:#FFFFFF;--badge-line:rgba(255,255,255,0)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--badge-bg:rgba(38,38,38,.88);--badge-line:rgba(255,255,255,.14)}}
:root[data-theme="dark"]{--badge-bg:rgba(38,38,38,.88);--badge-line:rgba(255,255,255,.14)}
.pstats{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:8px 0 0;color:var(--muted);font:500 15px/20px var(--f-body);font-variant-numeric:tabular-nums;letter-spacing:0}
.pst{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pst .ic{width:18px;height:18px;flex:none}
.cbadge{position:absolute;top:12px;left:8px;z-index:3;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px 0 7px;border-radius:999px;box-sizing:border-box;
background:var(--badge-bg);box-shadow:inset 0 0 0 1px var(--badge-line);color:var(--badge-ink);font:500 12px/1 var(--f-body);font-variant-numeric:tabular-nums;letter-spacing:0;pointer-events:none;user-select:none;-webkit-user-select:none}
.cbadge .ic{width:14px;height:14px;flex:none}
.sim-thumb{position:relative}
/* r10 (31 Oct 2026): the card's QC link is a camera badge beside the colour badge (owner); Buy takes the whole row */
.thumb .tbadges{position:absolute;top:12px;left:8px;z-index:3;display:flex;gap:6px;pointer-events:none}
.thumb .tbadges:empty{display:none}
html:not(.qcb-ready) a.qcb,html:not(.qcb-ready) a.qc-pill{visibility:hidden}
.thumb img.qch{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;opacity:0;pointer-events:none;transition:opacity .22s cubic-bezier(.22,1,.36,1)}
.thumb.qc-on img.qch{opacity:1}
html .card .thumb img.qch{object-fit:cover!important;mix-blend-mode:normal!important;background:var(--well,#111)!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;transform:none!important} /* fill the photo box (the card rule above contains and blends every image) */
.thumb::after{content:"QC photo";position:absolute;left:8px;bottom:8px;z-index:3;padding:3px 8px;border-radius:999px;background:rgba(10,10,10,.72);color:#fff;font-size:11px;font-weight:500;line-height:1.3;letter-spacing:0;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .2s,transform .2s cubic-bezier(.22,1,.36,1)}
.thumb.qc-on::after{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.thumb img.qch,.thumb::after{transition:none}}
.tbadges .cbadge{position:static}
.tbadges .qcb{position:relative;top:0;left:0;width:24px;padding:0;justify-content:center;pointer-events:auto;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s var(--ease),transform .15s var(--ease)}
.tbadges .qcb:active{transform:scale(.96)}
.tbadges .qcb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover){.tbadges .qcb:hover{background:rgba(10,10,10,.8)}}
@media (pointer:coarse){.tbadges .qcb::before{content:"";position:absolute;inset:-10px -4px}}
.card-acts .buy-pill{flex:1 1 100%}
.sim-thumb .cbadge{top:6px;left:auto;right:6px;height:22px;padding:0 8px 0 6px}
/* round 9 (31 Oct 2026): compact tool sections on phones (QC, size/track teasers, Free Tools, 3 steps). CSS only, phones only,
every word stays in the DOM and visible (descriptions are clamped, not hidden); tap targets stay 44px. Desktop untouched. */
@media (max-width:560px){
.v9-qc,.v9-teasers,.v9-tools,.v9-steps{padding:12px 0}
.v9-panel.v9-qc-in{padding:16px;gap:12px}
.v9-qc-copy{gap:10px}
.v9-qc-copy .v9-qc-steps{margin-top:0}
.ic-steps.v9-qc-steps{gap:6px}
.v9-qc-steps li{flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:8px 4px;text-align:center;font-size:13px;line-height:1.25}
.v9-qc-steps li>.ic-tile{display:none}
.v9-qc-steps li::after{position:static;order:-1;flex:none;min-width:18px;height:18px;font-size:11px;line-height:18px}
.v9-qc-form .v9-btn>.ic{display:none}
.v9-qc-side{gap:4px}
.v9-qc-form{flex-direction:row}
.v9-qc-form .v9-btn{width:auto;flex:none;padding-left:14px;padding-right:14px}
.v9-qc-side details.v9-more{margin-top:0}
.v9-qc-note{margin-top:-6px}
.v9-duo{gap:10px}
.v9-tcard{gap:10px;padding:14px 16px}
.v9-tcard h2{font-size:18px!important}
.v9-tcard .ic-row.tight{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px;scroll-padding-inline:16px}
.v9-tcard .ic-row.tight::-webkit-scrollbar{display:none}
.v9-tcard .ic-row.tight{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.v9-tcard .ic-row.tight li{flex:none;white-space:nowrap}
.v9-mock{min-height:0;padding:6px 8px}
.v9-mock-size{gap:6px;flex-wrap:nowrap}
.v9-mock-size .v9-chip{min-width:0;flex:1 1 0;height:26px;padding:0 6px;font-size:12px}
.v9-mock-trk{padding:8px 10px}
.v9-trk-step{flex-direction:row;gap:5px;flex:none}
.v9-trk-line{margin-top:0;min-width:8px}
.v9-tform{flex-wrap:nowrap;align-items:flex-end}
.v9-tform .v9-field{flex:1 1 0;gap:4px}
.v9-tform .v9-btn,.v9-qc-form .v9-btn.v9-btn-primary{width:auto}
.v9-tform .v9-btn{flex:none;padding-left:14px;padding-right:14px}
.v9-tcard details.v9-more{margin-top:-6px}
.v9-tools .v9-head,.v9-steps .v9-head{margin-bottom:8px}
.v9-tools-grid{gap:8px}
.v9-tool{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:6px 8px;padding:10px 12px}
.v9-tool:last-child:nth-child(odd){grid-column:1/-1}
.v9-tool-ic{width:28px;height:28px;margin:0}
.v9-tool-ic svg,.v9-tool-ic .ic{width:15px;height:15px}
.v9-tool b{font-size:14px;line-height:1.25}
.v9-tool span.v9-tool-d{grid-column:1/-1;font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v9-steps-grid{gap:6px}
.v9-step{flex-direction:row;align-items:flex-start;gap:10px;padding:0 4px 0 12px}
.v9-step .ic-tile{width:30px;height:30px;margin:7px 0 0}
.v9-step .ic-tile .ic{width:16px;height:16px}
.v9-step-ic::after{top:-4px;right:-6px;min-width:16px;height:16px;font-size:10px;line-height:16px}
.v9-step-d{flex:1 1 auto;min-width:0}
:root details.v9-step-d>summary{padding:0 8px 0 0}
:root details.v9-step-d>:not(summary){padding-left:0}
.v9-steps-foot{margin-top:10px}
}
/* product view polish (owner, 8 Nov 2026: "make the product pages look way better"): calmer labels, a clear price, tighter rhythm */
html #drawer .d-titlerow{gap:6px}
html #drawer .pstats{margin-top:10px!important;font-size:14px!important}
html #drawer .d-price{margin-top:14px!important;gap:8px!important}
html #drawer .d-price .p{font-size:30px!important;font-weight:700!important;letter-spacing:-.025em!important;line-height:1.1}
html #drawer .d-price .u{font-size:14px;color:var(--muted)}
html #drawer .buy-block{margin-top:20px}
html #drawer .buy-block>.sec-label{font-size:13px!important;font-weight:500!important;color:var(--muted)!important;letter-spacing:0!important;margin:0 0 10px!important}
html #drawer .buy-block>.sec-label .ic{display:none}
html #drawer .report-row{margin-top:14px!important}
html #drawer .pc-askrow{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin-top:16px;padding:4px 0 0;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:14px;font-weight:500;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
html #drawer .pc-askic{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--ink-2);transition:background-color .15s}
html #drawer .pc-askt{flex:1}
html #drawer .pc-askrow>.ic{width:16px;height:16px;color:var(--muted);transition:transform .15s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){html #drawer .pc-askrow:hover .pc-askic{background:color-mix(in srgb,var(--ink) 10%,var(--surface-2))}html #drawer .pc-askrow:hover>.ic{transform:translateX(2px)}}
/* owner, 9 Nov 2026: no Sources filter */
.fsel:has(> #f-source),.fsel:has(> #pp-source){display:none!important}
/* owner, 9 Nov 2026: "Continue as guest" way smaller and more subtle */
/* owner, 9 Nov 2026: "google logo still glitches": our Google button is drawn like Google's own (logo pinned left, centred
medium text, 40px pill in a 44px box), so the swap to Google's button cannot be seen */
html #gate-google,html #auth-google{position:relative;box-sizing:border-box;height:40px;min-height:40px;margin:2px 0 10px!important;padding:0 40px!important;border-radius:999px!important;border:1px solid #dadce0!important;background:#fff!important;color:#1f1f1f!important;font-family:"Google Sans",Roboto,Arial,sans-serif;font-weight:500;font-size:14px;letter-spacing:.25px;gap:0}
html #gate-google .oi-img,html #auth-google .oi-img{position:absolute;left:12px;top:50%;transform:translateY(-50%);border-radius:0}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) #gate-google,html:not([data-theme="light"]) #auth-google{background:#131314!important;color:#e3e3e3!important;border-color:#8e918f!important}}
html[data-theme="dark"] #gate-google,html[data-theme="dark"] #auth-google{background:#131314!important;color:#e3e3e3!important;border-color:#8e918f!important}
/* owner, 10 Nov 2026: sign-in is Google and email only (nobody used Discord) */
html #gate-discord,html #auth-discord{display:none!important}
html .gate-guest{min-height:32px;margin-top:2px;padding:0 10px;font-size:11px;color:var(--muted)!important;opacity:.75;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:2px}
@media (hover:hover){html .gate-guest:hover{opacity:1}}
/* 9 Nov 2026, layout jumps (CLS 0.26 on phones): row placeholders as tall as the real rows */
html .v9-rail .sk-card .sk-p{margin-top:21px}
@media (max-width:560px){html .v9-rail .sk-card .sk-p{margin-top:20px}}
/* owner, 9 Nov 2026: the grid under a find looks like the main one: same width, title, bar and card sizes */
html #drawer .pp-allh{margin:28px 0 4px}
@supports (container-type:inline-size){
html #drawer #pp-browse{container-type:inline-size}
html #pp-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@container (min-width:768px){html #pp-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@container (min-width:964px){html #pp-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@container (min-width:1160px){html #pp-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
}
html #drawer .pp-all-p{margin:0 0 6px}
html #drawer .pp-filters .spacer{flex:1}
html #drawer .pp-filters .count{color:var(--muted);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
html #drawer .pp-search .pc-cam{margin-left:auto}
@media (min-width:761px){html #drawer #pp-browse{width:min(1236px,calc(100vw - 44px));margin-left:calc(50% - min(618px,calc(50vw - 22px)));margin-right:0}}
@container (min-width:572px){html.grid-compact #pp-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@container (min-width:768px){html.grid-compact #pp-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@container (min-width:964px){html.grid-compact #pp-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@container (min-width:1160px){html.grid-compact #pp-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}}
@media (max-width:560px){html #drawer .pp-dens,html #drawer .pp-filters .count,html #drawer .pp-filters .spacer{display:none}}
html #drawer .pc-beta{margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
html #drawer .pcb-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-bottom:10px}
html #drawer .pcb-tag{font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
html #drawer .pcb-sub{margin:-4px 0 10px;font-size:13px;color:var(--muted)}
html #drawer .pcb-chips{display:flex;flex-wrap:wrap;gap:6px}
html #drawer .pcb-chip,html #drawer .pcb-run{appearance:none;min-height:34px;padding:0 13px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer;transition:background-color .15s,transform .1s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){html #drawer .pcb-chip:hover,html #drawer .pcb-run:hover{background:var(--surface-2)}}
html #drawer .pcb-chip:active,html #drawer .pcb-run:active{transform:scale(.96)}
html #drawer .pcb-run:disabled{opacity:.6;cursor:default}
html #drawer .pcb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.45}
html #drawer .pcb-list li{display:flex;gap:9px;align-items:flex-start}
html #drawer .pcb-list i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 12px/1 var(--f-body);font-style:normal;margin-top:1px;background:var(--surface-2);color:var(--muted)}
html #drawer .pcb-list .st-good i{background:color-mix(in srgb,#16a34a 16%,transparent);color:#16a34a}
html #drawer .pcb-list .st-watch i{background:color-mix(in srgb,#d97706 18%,transparent);color:#d97706}
html #drawer .pcb-list b{font-weight:600;margin-right:2px}
html #drawer .pcb-sum{margin:12px 0 0;font-size:13.5px}
html #drawer .pcb-fine{margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
@media (max-width:480px){html #drawer .agent-badge{display:none!important}html #drawer .d-price .p{font-size:28px!important}}
/* settings menu (owner, 8 Nov 2026: "fix the UI here"): a labelled list, label left and control right */
html .masthead.set-open .v9-prefs{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:0!important;width:320px!important;padding:6px!important}
html .masthead .v9-prefs .pref-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 6px 0 10px}
html .masthead .v9-prefs .pref-row+.pref-row{border-top:1px solid var(--line)}
html .masthead .v9-prefs .pref-l{font-size:13.5px;font-weight:500;color:var(--muted);white-space:nowrap}
html .masthead .mast-tools .v9-prefs .selwrap{flex:0 0 auto!important}
html .masthead .mast-tools .v9-prefs .selwrap .cselbtn{min-width:156px;justify-content:space-between;height:36px!important;border-radius:999px!important}
html .masthead .v9-prefs .v9-theme-seg{display:flex!important;flex:0 0 auto!important;border-radius:999px;padding:3px}
html .masthead .v9-prefs .v9-theme-seg button{height:30px!important;padding:0 11px!important;border-radius:999px!important;flex:0 0 auto!important;font-size:12.5px}
html.agent-lock .masthead .v9-prefs .pref-row:has(#agent){display:none!important}
/* filter bar (owner, 8 Nov 2026: "how can we make this ui cleaner"): soft filled chips without outlines, quiet sort and count */
html .fselbtn,html .saved-chip,html .price-btn{border-color:transparent!important;background:var(--surface-2)!important;box-shadow:none!important;height:34px!important;padding:0 13px!important;font-size:13px!important;font-weight:500!important;gap:6px!important}
html .fselbtn .ic,html .price-btn .ic{width:14px!important;height:14px!important;opacity:.6}
@media (hover:hover){html .fselbtn:hover,html .saved-chip:hover,html .price-btn:hover{background:color-mix(in srgb,var(--ink) 9%,var(--surface-2))!important}}
html .fselbtn[aria-expanded="true"],html .price-btn[aria-expanded="true"],html .saved-chip[aria-pressed="true"]{background:var(--fill)!important;color:var(--fill-ink)!important}
html .pc-div{display:none!important}
.v9-mock-size .v9-chip{transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out}
/* price filter (owner, 8 Nov 2026: "too much is happening here"): no chart. 9 Nov 2026: "make this a slider instead of the
prices": the slider is back and the quick price buttons are gone; min/max boxes stay for exact numbers */
html .pp-hist,html .pp-presets{display:none!important}
html .pp-slider{display:block;margin:6px 4px 14px}
html .pp-track{background:color-mix(in srgb,var(--ink) 12%,transparent)}
html .pp-fill{background:var(--ink)}
html .pp-slider input[type=range]::-webkit-slider-thumb{background:var(--surface);border:2px solid var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.25)}
html .pp-slider input[type=range]::-moz-range-thumb{background:var(--surface);border:2px solid var(--ink)}
html .sort-fsel .fselbtn{background:transparent!important;padding:0 6px 0 10px!important;color:var(--muted)!important}
@media (hover:hover){html .sort-fsel .fselbtn:hover{background:var(--surface-2)!important;color:var(--ink)!important}}
html .sort-fsel .fselbtn[aria-expanded="true"]{background:var(--surface-2)!important;color:var(--ink)!important}
html .pc-dens{border-color:transparent!important;background:var(--surface-2)!important}
@media (pointer:coarse){html .fselbtn,html .saved-chip,html .price-btn{height:40px!important}}
@media (max-width:560px){html .masthead.set-open .v9-prefs{width:auto!important}html .masthead .mast-tools .v9-prefs .selwrap .csel{width:auto}html .masthead .mast-tools .v9-prefs .selwrap .cselbtn{width:auto!important;min-width:150px;height:40px!important}html .masthead .v9-prefs .v9-theme-seg button{height:36px!important}}