/* KotoPorbe — redesign (21 Oct 2026): PriceSpy / PriceRunner direction. White base, one strong
   accent, cards with soft shadows, a real web font. Mobile-first. All design tokens are custom
   properties on :root. Dark theme: prefers-color-scheme, overridable with [data-theme]. */
:root,[data-theme=light]{
--bg:#FFFFFF;--surface:#FFFFFF;--sunken:#F5F6F8;--text:#0F172A;--muted:#5B6472;--border:#C5CED9;--hair:#E5E8EE;
--primary:#0F2A5F;--primary-h:#0B1F4B;--on-primary:#FFFFFF;--primary-soft:#E9EEF7;--link:#1D4ED8;--link-h:#1E40AF;
--accent:#F5A623;
--ok:#166534;--ok-bg:#E6F6EC;--low-bg:#EEF9F2;--warn-fg:#92400E;--warn-bg:#FEF3C7;--stale:#B45309;
--s1:#1D4ED8;--s2:#6D28D9;--s3:#C2410C;--s4:#0F766E;--s5:#BE185D;--s6:#4D7C0F;--s7:#566273;
--img-bg:#FFFFFF;--shadow:0 1px 2px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.06);
--shadow-h:0 10px 28px rgba(15,23,42,.12);color-scheme:light}
:root{
--font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
--font-bn:"Noto Sans Bengali","Nirmala UI","Bangla Sangam MN",sans-serif;
--font-h:"Plus Jakarta Sans",var(--font);
--fs-1:.875rem;--fs-2:1rem;--fs-3:1.125rem;--fs-4:1.375rem;--fs-5:1.5rem;--fs-6:1.75rem;--fs-7:2.25rem;
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;
--r:12px;--r-btn:8px;--r-chip:999px;--max:1200px;--prose:68ch;--tap:44px}
@media (min-width:768px){:root{--fs-5:1.75rem;--fs-6:2rem;--fs-7:2.75rem}}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
--bg:#0B1220;--surface:#121A2B;--sunken:#172134;--text:#E6EAF0;--muted:#9AA5B4;--border:#3B475A;--hair:#222D40;
--primary:#C7D6F5;--primary-h:#DDE6F9;--on-primary:#0B1220;--primary-soft:#1B2A4A;--link:#8AB4FF;--link-h:#A9C6FF;
--accent:#FBBF24;
--ok:#6EE7A0;--ok-bg:#10301F;--low-bg:#10301F;--warn-fg:#FCD34D;--warn-bg:#3B2A0A;--stale:#FDBA74;
--s1:#8AB4FF;--s2:#C4B5FD;--s3:#FDBA74;--s4:#5EEAD4;--s5:#F9A8D4;--s6:#BEF264;--s7:#94A3B8;
--img-bg:#FFFFFF;--shadow:0 1px 2px rgba(0,0,0,.4);--shadow-h:0 10px 28px rgba(0,0,0,.5);color-scheme:dark}}
[data-theme=dark]{
--bg:#0B1220;--surface:#121A2B;--sunken:#172134;--text:#E6EAF0;--muted:#9AA5B4;--border:#3B475A;--hair:#222D40;
--primary:#C7D6F5;--primary-h:#DDE6F9;--on-primary:#0B1220;--primary-soft:#1B2A4A;--link:#8AB4FF;--link-h:#A9C6FF;
--accent:#FBBF24;
--ok:#6EE7A0;--ok-bg:#10301F;--low-bg:#10301F;--warn-fg:#FCD34D;--warn-bg:#3B2A0A;--stale:#FDBA74;
--s1:#8AB4FF;--s2:#C4B5FD;--s3:#FDBA74;--s4:#5EEAD4;--s5:#F9A8D4;--s6:#BEF264;--s7:#94A3B8;
--img-bg:#FFFFFF;--shadow:0 1px 2px rgba(0,0,0,.4);--shadow-h:0 10px 28px rgba(0,0,0,.5);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-2)/1.55 var(--font);overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
[data-theme]{background:var(--bg);color:var(--text)}
:lang(bn){font-family:var(--font-bn);line-height:1.7}
h1,h2,h3{font-family:var(--font-h);line-height:1.15;margin:0 0 var(--sp-3);font-weight:700;overflow-wrap:normal;word-break:normal;letter-spacing:-.02em}
h1{font-size:var(--fs-6)}
h1.h-list{font-size:var(--fs-5)}
.meta-row{font-size:var(--fs-1);color:var(--muted);margin:0 0 var(--sp-5)}
h2{font-size:var(--fs-4)}
h3{font-size:var(--fs-3)}
p{margin:0 0 var(--sp-3)}
a{color:var(--link);text-underline-offset:.15em}
a:hover{color:var(--link-h)}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:4px}
main:focus{outline:none}
img{max-width:100%;height:auto}
code{font:var(--fs-1)/1.4 ui-monospace,Consolas,monospace;background:var(--sunken);padding:1px 5px;border-radius:4px}
ul,ol{padding-left:1.25rem}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.small{font-size:var(--fs-1)}
.muted{color:var(--muted)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--sp-4)}
@media (min-width:768px){.wrap{padding:0 var(--sp-5)}}
.lead{font-size:var(--fs-3);max-width:var(--prose);color:var(--muted)}
.answer{max-width:var(--prose);color:var(--muted);margin-bottom:var(--sp-3)}
.price{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}
.skip{position:absolute;left:var(--sp-2);top:-100px;z-index:100;background:var(--primary);color:var(--on-primary);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-btn)}
.skip:focus{top:var(--sp-2)}

/* Header */
.site-h{background:var(--surface);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:30}
.ribbon{background:var(--sunken);color:var(--muted);font-size:11px;padding:3px 0;line-height:1.3}
.ribbon .wrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.ribbon a{color:inherit}
.ribbon strong{color:var(--text)}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);min-height:72px;padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);min-height:var(--tap)}
.mark-bg{fill:var(--primary)}
.mark-fg{fill:var(--on-primary)}
.mark-ac{fill:var(--accent)}
.wm{font-family:var(--font-h);font-weight:800;font-size:1.2rem;letter-spacing:-.03em}
.wm-bn{font-family:var(--font-bn);color:var(--muted);font-size:var(--fs-1);line-height:1;margin-left:2px}
@media (max-width:420px){.wm-bn{display:none}}
.hsearch{display:none;flex:1 1 260px;max-width:460px;margin-left:var(--sp-4)}
.hsearch input[type=search]{width:100%;min-height:var(--tap);padding:0 var(--sp-4) 0 40px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font:inherit;color:var(--text)}
.hsearch input:focus{border-color:var(--primary)}
.hsearch label{position:relative;display:block}
.hsearch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
@media (min-width:960px){.hsearch{display:block}.tools .s-ico{display:none}}
.tools{display:flex;gap:var(--sp-1);margin-left:auto}
.icon-btn{display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);border:1px solid transparent;border-radius:var(--r-btn);background:none;color:var(--text);cursor:pointer}
.icon-btn:hover{background:var(--sunken)}
.icon-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.nav{order:3;flex-basis:100%;margin:0 calc(-1*var(--sp-4));padding:0 var(--sp-4);overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav ul{display:flex;gap:var(--sp-1);list-style:none;margin:0;padding:0}
.nav a{position:relative;display:flex;align-items:center;white-space:nowrap;min-height:40px;padding:0 10px;font-size:15px;color:var(--text);text-decoration:none;font-weight:600;border-radius:var(--r-btn)}
.nav a:hover{background:var(--sunken);color:var(--text)}
.nav a[aria-current]{color:var(--primary)}
.nav a[aria-current]::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;border-radius:1px;background:var(--primary)}
@media (min-width:768px){.nav{order:0;flex-basis:auto;margin:0 0 0 var(--sp-3);padding:0;overflow:visible}.nav a{padding:0 var(--sp-3);font-size:var(--fs-2)}}

main{padding:var(--sp-5) 0 var(--sp-8)}
.sec{margin-top:var(--sp-7)}
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-2) var(--sp-4);margin-bottom:var(--sp-4)}
.sec-h h2{margin:0}
.sec-h p{margin:0}
.h-sub{font-size:var(--fs-2);margin-top:var(--sp-5)}

/* Breadcrumb */
.crumbs ol{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 var(--sp-4);font-size:var(--fs-1);color:var(--muted)}
.crumbs li+li::before{content:"/";margin:0 var(--sp-2);color:var(--border)}
.crumbs a{display:inline-block;padding:6px 0;color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--primary);text-decoration:underline}

/* Buttons, badges, chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 var(--sp-5);border:1px solid var(--primary);border-radius:10px;background:var(--primary);color:var(--on-primary);font:600 var(--fs-2)/1.2 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,box-shadow .15s}
.btn:hover{background:var(--primary-h);border-color:var(--primary-h);color:var(--on-primary);box-shadow:0 4px 12px rgba(15,42,95,.25)}
.btn-2{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-2:hover{background:var(--sunken);color:var(--text);border-color:var(--border);box-shadow:none}
.btn-lg{min-height:52px;font-size:var(--fs-3);padding:0 var(--sp-6)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border:1px solid transparent;border-radius:var(--r-chip);font-size:13px;font-weight:600;line-height:1.5;white-space:nowrap;background:var(--sunken);color:var(--text)}
.b-low{background:var(--ok-bg);color:var(--ok)}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-oos,.b-ns,.b-unk{background:var(--sunken);color:var(--muted)}
.b-off{background:var(--primary-soft);color:var(--primary)}
.b-nlo,.b-warn,.b-pre{background:var(--warn-bg);color:var(--warn-fg)}
.b-stale{background:var(--warn-bg);color:var(--stale)}
.chiplist{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;padding:0;margin:0}
.chip{display:inline-flex;flex-direction:column;justify-content:center;min-height:var(--tap);padding:var(--sp-1) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-chip);background:var(--surface);color:var(--text);text-decoration:none;font-weight:600;line-height:1.25;cursor:pointer}
.chip .small{font-weight:400;color:var(--muted)}
a.chip:hover,a.chip[aria-current]{border-color:var(--primary);color:var(--primary)}
.lnav{margin:0 0 var(--sp-4)}.lnav .small{margin:var(--sp-2) 0 var(--sp-1)}
@media (max-width:640px){.lnav .chiplist{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--sp-1)}.lnav .chip{white-space:nowrap}}
.chips{border:0;padding:0;margin:0 0 var(--sp-3);display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chips legend{font-weight:600;margin-bottom:var(--sp-2);padding:0}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips input:checked+.chip{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.chips input:focus-visible+.chip{outline:3px solid var(--primary);outline-offset:2px}

/* Cards and surfaces */
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:var(--sp-5);box-shadow:var(--shadow)}
.alert{border:1px solid var(--hair);border-left:4px solid var(--primary);background:var(--surface);border-radius:var(--r);padding:var(--sp-3) var(--sp-4);margin:var(--sp-4) 0}
.alert p{margin:0}
.a-warn{background:var(--warn-bg);color:var(--warn-fg);border-color:var(--warn-fg)}
.a-gone{background:var(--sunken);border-left-color:var(--muted)}
.note{font-size:var(--fs-1);color:var(--muted);background:var(--sunken);border-radius:var(--r-btn);padding:var(--sp-2) var(--sp-3);margin:var(--sp-3) 0}

/* Product images: official manufacturer photos on a white plate, never cropped */
.ph{position:relative;display:block;aspect-ratio:4/3;background:var(--sunken);border-radius:8px;overflow:hidden}
.ph img{display:block;width:100%;height:100%;object-fit:contain;padding:10%}
.ph-lg{border-radius:var(--r)}
.ph-lg img{padding:8%}
.p-img .small{margin-top:var(--sp-2);text-align:center}
.noimg{display:grid;place-items:center;color:var(--border)}
.noimg svg{width:34%;height:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}

/* Tables */
.tbl{overflow-wrap:normal;width:100%;border-collapse:collapse;background:var(--surface)}
.tbl th,.tbl td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hair)}
.tbl thead th{font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border)}
.tbl tbody th{font-weight:600}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl td .small{display:block;color:var(--muted)}
.sg th{background:var(--sunken);font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.scroll{overflow-x:auto}
.specs{border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.specs tbody th{width:38%;font-weight:400;color:var(--muted)}
@media (min-width:768px){.specs tbody th{width:30%}}
.tbl-foot{margin-top:var(--sp-3)}

/* Offer list: a table for crawlers, rows that read like cards */
.offers{border-top:0}
.offers thead th{border-bottom:0;padding-bottom:6px;font-size:12px;letter-spacing:.06em}
.offers tr.offer>*{padding:16px 14px}
.offers tr.offer{border-bottom:1px solid var(--hair)}
.offers .shop{font-weight:700;margin-right:var(--sp-2)}
.offers .av{display:inline-grid;place-items:center;width:32px;height:32px;margin-right:10px;border-radius:50%;font-weight:700;font-size:14px;color:#fff;vertical-align:middle;flex:none}
.av-1{background:var(--s1)}.av-2{background:var(--s2)}.av-3{background:var(--s3)}.av-4{background:var(--s4)}.av-5{background:var(--s5)}.av-6{background:var(--s6)}.av-7{background:var(--s7)}
[data-theme=dark] .av{color:#0B1220}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .av{color:#0B1220}}
.offers .shopcell{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0}
.offers .is-low{background:var(--low-bg)}
.offers .is-oos td,.offers .is-oos th{color:var(--muted)}
.offers .is-oos .price{font-weight:600}
.offers .price{font-size:var(--fs-3)}
.offers .act{text-align:right;width:1%}
.offers .act .btn{min-width:9rem}
.offers .wty{font-size:var(--fs-1);color:var(--muted);max-width:18rem}
.grp-h th{background:var(--sunken);font-weight:700;border-bottom:1px solid var(--hair);border-radius:var(--r-btn)}
.grp-h .small{font-weight:400;color:var(--muted)}
.grp-sub::before{content:" · "}
.stale,.stale time{color:var(--stale)}
.stale .small{display:block}
@media (max-width:860px){
.offers,.offers tbody{display:block;border:0;background:none}
.offers thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.offers tr.offer{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--sp-3);padding:var(--sp-4);margin-bottom:var(--sp-3);border:1px solid var(--hair);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
.offers tr.is-low{background:var(--low-bg);border-color:var(--ok)}
.offers tr.offer>*{display:block;padding:0;border:0}
.offers [data-label=Shop]{flex:1 1 calc(100% - 10rem);min-width:0}
.offers [data-label=Shop] .badge{margin-top:2px}
.offers [data-label=Price]{flex:none;align-self:flex-start;font-size:var(--fs-4)}
.offers [data-label=Variant],.offers [data-label=Checked],.offers [data-label="Last seen"],.offers [data-label=Warranty]{flex:1 0 100%;font-size:var(--fs-1)}
.offers [data-label=Variant] .small{display:inline;margin-left:var(--sp-2)}
.offers [data-label=Stock]{flex:none;font-size:var(--fs-1)}
.offers .wty{max-width:none}
.offers [data-label=Warranty]::before,.offers [data-label=Checked]::before,.offers [data-label=Variant]::before,.offers [data-label="Last seen"]::before{content:attr(data-label) ": ";color:var(--muted)}
.offers .act{flex:1 0 100%;width:auto;margin-top:var(--sp-2)}
.offers .act .btn{width:100%}
.offers tr.grp-h{display:block;margin:var(--sp-5) 0 var(--sp-3)}
.offers tr.grp-h th{display:block;padding:var(--sp-2) 0;background:none;border:0;font-size:var(--fs-3)}
.offers tr.grp-h .small{display:block}
.offers .grp-sub::before{content:none}
.offers [data-label=Shop]{order:1}.offers [data-label=Price]{order:2}.offers [data-label=Variant]{order:3}
.offers [data-label=Stock]{order:4}.offers [data-label=Warranty]{order:5}
.offers [data-label=Checked],.offers [data-label="Last seen"]{order:6}.offers .act{order:7}
}
@media (min-width:600px) and (max-width:860px){.offers [data-label=Checked]{flex:1 1 auto;width:auto}.offers .act{flex:0 0 auto;margin:0 0 0 auto}.offers .act .btn{width:auto}}

/* Product page: hero with photo and price box */
.p-hero{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.p-hero .ph-lg{max-width:300px;margin:0 auto}
.p-hero h1{font-size:var(--fs-5);margin-bottom:var(--sp-2)}
.p-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);align-items:center;color:var(--muted);font-size:var(--fs-1);margin-bottom:var(--sp-4)}
@media (min-width:768px){.p-hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-6);align-items:start}.p-hero .ph-lg{max-width:none;position:sticky;top:80px}.p-hero h1{font-size:var(--fs-6)}}
@media (min-width:1024px){.p-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pricebox{background:var(--surface);border:1px solid var(--hair);border-top:3px solid var(--primary);border-radius:var(--r);padding:var(--sp-5);box-shadow:var(--shadow)}
.pb-l{font-size:var(--fs-1);color:var(--primary);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.pb-chk{display:block;color:var(--muted);font-size:var(--fs-1);margin:0 0 var(--sp-4)}
.pb-p{display:block;font-size:var(--fs-7);font-weight:800;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:4px 0 2px}
.pb-p.pb-none{font-size:var(--fs-4);font-weight:700}
.pb-at{color:var(--muted);margin-bottom:var(--sp-4)}
.pb-at strong{color:var(--text)}
.pb-cta{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.pb-cta .btn{flex:1 1 12rem}
.pb-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:var(--sp-3);margin:var(--sp-4) 0 0;padding:var(--sp-4) 0 0;border-top:1px solid var(--hair);list-style:none;font-size:var(--fs-1);color:var(--muted)}
.pb-facts li{display:flex;flex-direction:column;gap:2px}
.pb-facts strong{color:var(--text);font-size:var(--fs-2)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--sp-2);margin-top:var(--sp-4)}
.split-c{display:flex;flex-direction:column;padding:var(--sp-3);border:1px solid var(--hair);border-radius:var(--r-btn);background:var(--sunken)}
.split-c .small{color:var(--muted)}
.split-c .price{font-size:var(--fs-3)}
.updated{color:var(--muted)}
.tiles4{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);list-style:none;padding:0;margin:0 0 var(--sp-5)}
@media (min-width:768px){.tiles4{grid-template-columns:repeat(4,1fr)}}
.tiles4 li{display:flex;flex-direction:column;gap:2px;padding:var(--sp-4);background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow)}
.faq h3{margin-top:var(--sp-5)}
.faq p{max-width:var(--prose)}
.links{padding-left:1.25rem}
.links li{margin-bottom:var(--sp-2)}
.links.big{list-style:none;padding:0;display:grid;gap:var(--sp-3)}
.links.big li{display:flex;flex-direction:column;padding:var(--sp-4) var(--sp-5);border:1px solid var(--hair);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);margin:0}
.links.big a{font-weight:600;text-decoration:none}
.links.big a:hover{text-decoration:underline}
.has-bar{padding-bottom:76px}
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);min-height:64px;padding:var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--hair);box-shadow:0 -6px 20px rgba(15,23,42,.08)}
.bb-t{flex:1;min-width:0;line-height:1.25}
.bb-t .price{font-size:var(--fs-4)}
.js .buybar{transition:transform .2s}
.js .buybar.hide{transform:translateY(110%)}
@media (prefers-reduced-motion:reduce){.js .buybar{transition:none}}
@media (min-width:769px){.buybar{display:none}.has-bar{padding-bottom:0}}

/* Chart */
.chart{margin:0;padding:var(--sp-4);border:1px solid var(--hair);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
.chart figcaption{color:var(--muted);font-size:var(--fs-1);max-width:var(--prose)}
.chart figcaption .badge{display:flex;width:fit-content;margin:0 0 var(--sp-2)}
.legend{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);list-style:none;padding:0;margin:var(--sp-3) 0;font-size:var(--fs-1)}
.legend li{display:flex;align-items:center;gap:6px}
.legend line{stroke-width:3}
.plot{position:relative;display:grid;grid-template-columns:4.5rem 1fr;height:220px;margin-bottom:var(--sp-6)}
@media (min-width:600px){.plot{grid-template-columns:4.5rem 1fr 7rem;height:260px}}
.yl,.el,.area{position:relative}
.yl span{position:absolute;right:var(--sp-2);transform:translateY(-50%);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.area{border-left:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.area svg{display:block;width:100%;height:100%;overflow:visible}
.xl span{position:absolute;top:100%;margin-top:4px;font-size:12px;color:var(--muted);transform:translateX(-50%);white-space:nowrap}
.el{display:none}
@media (min-width:600px){.el{display:block}.el span{position:absolute;left:var(--sp-2);transform:translateY(-50%);font-size:12px;white-space:nowrap}}
.grid{stroke:var(--hair);stroke-width:1;vector-effect:non-scaling-stroke}
.ln{fill:none;stroke-width:2.5;stroke-linejoin:round}
.s1{stroke:var(--s1)}.s2{stroke:var(--s2)}.s3{stroke:var(--s3)}.s4{stroke:var(--s4)}.s5{stroke:var(--s5)}.s6{stroke:var(--s6)}.s7{stroke:var(--s7)}
.cross{position:absolute;top:0;bottom:0;width:1px;background:var(--muted);pointer-events:none}
.tip{position:absolute;top:var(--sp-2);z-index:2;min-width:10rem;padding:var(--sp-2) var(--sp-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-btn);font-size:var(--fs-1);pointer-events:none;box-shadow:var(--shadow-h)}
.tview summary{cursor:pointer;color:var(--link);min-height:var(--tap);display:flex;align-items:center}

/* Product cards: the same card in grids, listings and search */
.plist,.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);list-style:none;padding:0;margin:0}
@media (min-width:600px){.plist,.tiles{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-4)}}
.prow,.tile{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);padding:var(--sp-3);box-shadow:var(--shadow);transition:box-shadow .15s,transform .15s}
@media (min-width:600px){.prow,.tile{padding:var(--sp-4)}}
.prow:hover,.tile:hover{box-shadow:var(--shadow-h);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.prow:hover,.tile:hover{transform:none}}
.prow>.ph,.tile .ph{margin-bottom:var(--sp-3)}
.prow-n,.tile-n{font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:0;margin:0 0 var(--sp-1);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prow-n a,.tile-a{color:var(--text);text-decoration:none}
.prow-n a::after,.tile-a::after{content:"";position:absolute;inset:0}
.prow,.tile{position:relative}
.prow:hover .prow-n a,.tile:hover .tile-n{color:var(--primary)}
.tile-a{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.keyspecs{list-style:none;padding:0;margin:0 0 var(--sp-2);font-size:13px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.keyspecs li{display:inline}
.keyspecs li+li::before{content:" · "}
.prow-p{margin-top:auto}
.prow-p p,.tile-p{margin:0}
.prow-p .small{display:block}
.prow-p .price,.tile-p .price{font-size:1.25rem}
.from{display:block}
.from .small{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.from .price{font-size:1.25rem}
.prow .btn{position:relative;z-index:1}

/* Listing with filters */
.listing{display:grid;gap:var(--sp-4);margin-top:var(--sp-5)}
@media (min-width:960px){.listing{grid-template-columns:260px 1fr;gap:var(--sp-6);align-items:start}}
.filters{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow)}
.filters>summary{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);padding:0 var(--sp-4);font-weight:700;cursor:pointer;list-style:none}
.filters>summary::-webkit-details-marker{display:none}
.filters>summary::before{content:"";width:18px;height:12px;border-top:2px solid;border-bottom:2px solid;background:linear-gradient(currentColor,currentColor) center/60% 2px no-repeat}
.close-x{display:none;margin-left:auto;font-weight:600;color:var(--link)}
.fpanel{padding:0 var(--sp-4) var(--sp-4)}
.fg{border:0;border-top:1px solid var(--hair);margin:0;padding:var(--sp-3) 0}
.fg legend{font-weight:700;font-size:var(--fs-1);padding:var(--sp-3) 0 var(--sp-1);float:left;width:100%}
.fopt{clear:both;display:flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);cursor:pointer}
.fopt input{width:20px;height:20px;margin:0;accent-color:var(--primary);flex:none}
.fopt .cnt{margin-left:auto;color:var(--muted);font-size:var(--fs-1);font-variant-numeric:tabular-nums}
.fapply{display:flex;gap:var(--sp-2);padding-top:var(--sp-3)}
.fapply .btn{flex:1}
.fapply [data-apply]{display:none}
@media (max-width:959px){
.filters[open]{position:fixed;inset:0;z-index:50;overflow:auto;border:0;border-radius:0}
.filters[open]>summary{position:sticky;top:0;z-index:1;background:var(--surface);border-bottom:1px solid var(--hair)}
.filters[open] .close-x{display:inline}
.filters[open] .fapply{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--hair);padding:var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom))}
.js .fapply [data-apply]{display:inline-flex}
}
@media (min-width:960px){.filters>summary{cursor:default}}
.rbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.h-res{font-size:var(--fs-3);margin:0}
.sort{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-1)}
select,input[type=search]{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-btn);min-height:var(--tap);padding:0 var(--sp-3)}
.active-f{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.active-f:empty{display:none}
.active-f button{font:inherit;font-size:var(--fs-1);min-height:36px;padding:0 var(--sp-3);border:1px solid var(--primary);border-radius:var(--r-chip);background:var(--primary-soft);color:var(--primary);cursor:pointer}

/* Home */
.hero{padding:var(--sp-6) var(--sp-4) var(--sp-5);text-align:center;background:linear-gradient(180deg,var(--primary-soft),var(--bg));border-radius:16px}
.hero h1{font-size:var(--fs-6);max-width:20ch;margin:0 auto var(--sp-3)}
.eyebrow{margin:0 0 var(--sp-2);font-family:var(--font-bn);font-weight:700;font-size:var(--fs-2);color:var(--primary)}
.eyebrow::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle}
.hero .lead{margin:0 auto var(--sp-5)}
.hero .shops-line{margin:var(--sp-4) 0 0;font-size:var(--fs-1);color:var(--muted)}
@media (min-width:768px){.hero{padding:var(--sp-8) var(--sp-6) var(--sp-6)}.hero h1{font-size:var(--fs-7)}}
.search{display:flex;gap:var(--sp-2);max-width:40rem;margin:0 auto var(--sp-4);position:relative}
.search input{flex:1;min-width:0;font-size:var(--fs-3);min-height:56px;padding:0 var(--sp-5);border-radius:var(--r-chip);box-shadow:var(--shadow);border-color:var(--border)}
.search .btn{min-height:56px;border-radius:var(--r-chip);padding:0 var(--sp-5)}
@media (max-width:600px){.search input{padding:0 var(--sp-4);font-size:var(--fs-2)}.search .btn{padding:0 var(--sp-4)}}
.hero .chiplist{justify-content:center}
.hero .chip{min-height:40px}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);list-style:none;padding:0;margin:0}
.cat{display:grid;grid-template-columns:1fr;gap:var(--sp-2);padding:var(--sp-4);background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);text-decoration:none;color:var(--text);box-shadow:var(--shadow);transition:box-shadow .15s}
.cat:hover{box-shadow:var(--shadow-h);color:var(--text)}
.cat .ph{aspect-ratio:3/2}
.cat .ph img{padding:4%}
.cat-t{display:flex;flex-direction:column;gap:4px}
.cat-n{font-size:var(--fs-4);font-weight:700}
.cat:hover .cat-n{color:var(--primary)}
.cat .small{color:var(--muted)}
.cat-go{color:var(--link);font-weight:600;font-size:var(--fs-1)}
@media (min-width:600px){.cat{grid-template-columns:1fr 1fr;align-items:center;padding:var(--sp-5)}.cat .ph{order:2}}
.gaplist{display:grid;gap:var(--sp-3);list-style:none;padding:0;margin:0}
@media (min-width:768px){.gaplist{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
.gap{display:grid;grid-template-columns:72px 1fr;gap:var(--sp-3);align-items:center;padding:var(--sp-3);background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);position:relative}
.gap .ph{aspect-ratio:1}
.gap-n{font-weight:600;margin:0 0 2px}
.gap-n a{color:var(--text);text-decoration:none}
.gap-n a::after{content:"";position:absolute;inset:0}
.gap:hover .gap-n a{color:var(--primary)}
.gap-v{display:flex;flex-wrap:wrap;gap:2px var(--sp-3);font-size:var(--fs-1);color:var(--muted)}
.gap-v .price{color:var(--text)}
.gap-d{color:var(--ok);font-weight:700}
.steps{display:grid;gap:var(--sp-3);list-style:none;padding:0;margin:0;counter-reset:step}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{position:relative;padding:var(--sp-4) var(--sp-4) var(--sp-4) 60px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);counter-increment:step}
.steps li::before{content:counter(step);position:absolute;left:var(--sp-4);top:var(--sp-4);width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-weight:800}
.steps strong{display:block;margin-bottom:2px}
.trust{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;padding:0;margin:var(--sp-4) 0 0}
.trust li{padding:var(--sp-2) var(--sp-4);border-radius:var(--r-chip);background:var(--ok-bg);color:var(--ok);font-size:var(--fs-1);font-weight:600}
.trust li::before{content:"✓ "}
.shoplist{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;padding:0;margin:0}
.shoplist li{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:1px solid var(--hair);border-radius:var(--r-chip);background:var(--surface);box-shadow:var(--shadow)}
.shoplist a{color:var(--text);text-decoration:none;font-weight:600}
.shoplist a:hover{color:var(--primary)}
.shoplist .small{color:var(--muted)}
.shoplist .av{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;font-weight:700;font-size:13px;color:#fff}
[data-theme=dark] .shoplist .av{color:#0B1220}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .shoplist .av{color:#0B1220}}

/* Compare */
.vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3);margin-top:var(--sp-4)}
@media (min-width:768px){.vs{gap:var(--sp-5)}}
.vs-c{position:relative;padding:var(--sp-3);background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow)}
@media (min-width:600px){.vs-c{padding:var(--sp-5)}}
.vs-c .ph{max-width:220px;margin:0 auto var(--sp-3)}
.vs-n{font-size:var(--fs-2);margin-bottom:var(--sp-1)}
@media (min-width:600px){.vs-n{font-size:var(--fs-3)}}
.vs-c p{margin-bottom:var(--sp-1)}
.vs-c .price{font-size:var(--fs-4)}
.vs-c .btn{margin-top:var(--sp-3);width:100%;white-space:normal;text-align:center;padding:6px var(--sp-3)}
.facts{padding-left:1.25rem}
.facts li{margin-bottom:var(--sp-2);max-width:var(--prose)}
.sw-in{position:absolute;opacity:0}
.sw{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);cursor:pointer;font-weight:600;margin-bottom:var(--sp-2)}
.sw::before{content:"";width:20px;height:20px;border:2px solid var(--border);border-radius:5px;background:var(--surface)}
.sw-in:checked+.sw::before{content:"✓";display:grid;place-items:center;background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-size:14px}
.sw-in:focus-visible+.sw{outline:3px solid var(--primary);outline-offset:2px}
.cmp:has(.sw-in:checked) tr.same{display:none}
.cmp .tbl{border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.cmp-t{min-width:34rem}
@media (max-width:600px){
.cmp .scroll{overflow:visible}
.cmp .tbl{border:0;border-radius:0;overflow:visible}
.cmp-t{min-width:0}
.cmp-t,.cmp-t thead,.cmp-t tbody{display:block}
.cmp-t thead{position:sticky;top:64px;z-index:2}
.cmp-t thead tr{background:var(--sunken)}
.cmp-t tr{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--sp-3);border-bottom:1px solid var(--hair)}
.cmp-t tr>*{border:0}
.cmp-t thead th:first-child{display:none}
.cmp-t thead th{width:auto;background:var(--sunken);font-size:var(--fs-1)}
.cmp-t th[scope=row]{grid-column:1/-1;position:static;width:auto;padding-bottom:0;background:none;font-size:var(--fs-1);color:var(--muted)}
.cmp-t th[scope=row] .dtag{display:inline;margin-left:var(--sp-2)}
.cmp-t td{width:auto;padding-top:2px}
.cmp-t tr.sg{display:block}
.cmp-t tr.sg th{display:block;color:var(--muted);background:var(--sunken);padding-bottom:10px}
}
@media (min-width:601px){.cmp-t th[scope=row]{position:sticky;left:0;background:var(--surface);width:30%}
.cmp-t td,.cmp-t thead th{width:35%}}
.dtag{display:block;font-size:12px;font-weight:600;color:var(--warn-fg)}
.dtag::before{content:"≠ "}
.win{display:inline-block;font-size:var(--fs-1);font-weight:600;color:var(--ok)}

/* Guide */
.pick{margin-bottom:var(--sp-4);padding:var(--sp-4);background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow)}
.pick h3{font-size:var(--fs-3)}
.pick-b{display:grid;gap:var(--sp-3)}
.pick-b .ph{max-width:200px}
@media (min-width:600px){.pick-b{grid-template-columns:180px 1fr;gap:var(--sp-5)}}
.minibox{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);background:var(--sunken);border-radius:var(--r-btn)}
.guide-t td{vertical-align:middle}
.guide-t{border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}

/* Prose pages and styleguide */
.prose{max-width:var(--prose)}
.prose h2{margin-top:var(--sp-6)}
.sg-2{display:grid;gap:var(--sp-4)}
@media (min-width:768px){.sg-2{grid-template-columns:1fr 1fr}}
.sg-theme{padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r)}
.swatches{list-style:none;padding:0;margin:0}
.swatches li{display:grid;grid-template-columns:40px 1fr auto;gap:0 var(--sp-3);align-items:center;padding:6px 0;border-bottom:1px solid var(--hair)}
.sw-c{grid-row:span 2;width:40px;height:40px;border-radius:var(--r-btn);border:1px solid var(--border)}
.swatches .muted{grid-column:2/-1}
.row-demo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}

/* Footer */
.site-f{background:#0F172A;color:#CBD5E1;padding:var(--sp-7) 0 var(--sp-6);font-size:var(--fs-1);margin-top:var(--sp-7)}
[data-theme=dark] .site-f{background:var(--surface);color:var(--muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .site-f{background:var(--surface);color:var(--muted)}}
.f-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);padding-bottom:var(--sp-4);border-bottom:1px solid rgba(255,255,255,.12)}
.site-f .brand,.site-f .wm{color:#fff}
.site-f .wm-bn{color:#94A3B8}
.site-f .mark-bg{fill:#fff}
.site-f .mark-fg{fill:#0F172A}
.f-brand{display:flex;flex-direction:column;gap:2px}
.motto{margin:4px 0 0;font-family:var(--font-bn);font-weight:700;color:#fff;font-size:var(--fs-2)}
.motto-en{margin:0;color:#94A3B8;font-size:var(--fs-1)}
.fresh{font-size:var(--fs-2);margin:0}
.fresh strong{color:#fff}
.site-f .muted{color:#94A3B8}
.f-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-4);margin:var(--sp-5) 0}
.f-h{font-weight:700;color:#fff;margin-bottom:var(--sp-1)}
.f-cols ul{list-style:none;padding:0;margin:0}
.f-cols a{display:inline-flex;align-items:center;min-height:var(--tap);color:#CBD5E1;text-decoration:none}
.f-cols a:hover{color:#fff;text-decoration:underline}
@media (min-width:768px){.f-cols a{min-height:32px}}

@media (forced-colors:active){.badge,.chip,.btn{border:1px solid}.offers .is-low{outline:2px solid}}
@media print{.site-h,.site-f,.buybar,.filters,.act{display:none}}

/* Delisted page: alternatives straight after the banner */
.sec-tight{margin-top:var(--sp-4)}
@media (max-width:600px){.answer{font-size:var(--fs-2)}}
@media (max-width:600px){
.guide-t,.guide-t tbody{display:block;border:0;background:none}
.guide-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.guide-t tr{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--hair)}
.guide-t tr>*{display:block;padding:0;border:0;text-align:left}
.guide-t th,.guide-t [data-label="Stands out for"]{grid-column:1/-1}
.guide-t [data-label="Stands out for"]{font-size:var(--fs-1);color:var(--muted)}
.guide-t [data-label=From]::before{content:"from ";font-weight:400}
.guide-t [data-label="Shops in stock"]{font-size:var(--fs-1);color:var(--muted)}
.guide-t [data-label="Shops in stock"]::before{content:"shops in stock: "}
}
.cmp-t thead a,.gaps th a,.guide-t th a,.vs-n a{display:inline-block;padding:3px 0}