:root{
  --bg:#f5f7fb; --card:#fff; --ink:#0f172a; --ink-2:#475569; --muted:#94a3b8; --line:#e2e8f0; --soft:#eef2f8;
  --accent:#2563eb; --accent-d:#1d4ed8; --accent-soft:#e8efff; --ok:#16a34a; --bad:#dc2626;
  --c-wifi:#2563eb; --c-zigbee:#dc2626; --c-thread:#0f766e; --c-matter:#7c3aed;
  --c-ha:#0891b2; --c-tuya:#ea580c; --c-homekit:#d97706; --c-smartthings:#4338ca;
  --r:20px; --r-sm:12px; --shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px rgba(15,23,42,.07);
  --font:"Rubik",system-ui,-apple-system,"Segoe UI","Arial Hebrew",Arial,sans-serif; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.wrap{width:min(1240px,100% - 40px);margin-inline:auto}
.wrap.narrow{width:min(760px,100% - 40px)}
.muted{color:var(--muted)}
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{inset-inline-start:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* icons */
.ic{display:inline-flex;width:18px;height:18px;flex:none}
.ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic svg .f{fill:currentColor;stroke:none}
.ic svg .x{stroke:var(--bad);stroke-width:2.2}
.ic-wifi{color:var(--c-wifi)}.ic-zigbee{color:var(--c-zigbee)}.ic-thread{color:var(--c-thread)}.ic-matter{color:var(--c-matter)}
.ic-ha{color:var(--c-ha)}.ic-tuya{color:var(--c-tuya)}.ic-homekit{color:var(--c-homekit)}.ic-smartthings{color:var(--c-smartthings)}

/* draft bar + header */
.draft-bar{background:#fff7e6;color:#92400e;font-size:14px;text-align:center;padding:7px 16px;border-bottom:1px solid #fde4b0}
.site-header{position:sticky;top:0;z-index:40;background:rgba(245,247,251,.95);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled{border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;gap:32px;height:70px}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark svg{width:38px;height:38px;display:block}
.logo-mark rect{fill:var(--accent)}.logo-mark path{fill:#fff}.logo-mark .tick{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.logo-text{font-weight:800;font-size:19px;line-height:1.1;letter-spacing:-.01em;display:flex;flex-direction:column}
.logo-text small{font-weight:500;font-size:12px;color:var(--muted);letter-spacing:.02em}
.nav{display:flex;gap:6px;margin-inline-start:auto}
.nav a{padding:8px 14px;border-radius:999px;font-weight:500;color:var(--ink-2);transition:background .2s,color .2s}
.nav a:hover{background:var(--soft);color:var(--ink)}
.nav a.active{background:var(--accent-soft);color:var(--accent)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:999px;font-weight:600;transition:transform .2s var(--ease),background .2s,box-shadow .2s,color .2s,border-color .2s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-sm{height:40px;padding:0 16px;font-size:15px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-d);box-shadow:0 8px 22px rgba(37,99,235,.28)}
.btn-primary .ic{color:#fff}
.btn-ghost{background:var(--card);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-block{width:100%}
.icon-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center}
.icon-btn:hover{background:var(--soft)}
.icon-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.link-btn{font-size:14px;color:var(--accent);font-weight:500}
.link-btn:hover{text-decoration:underline}

/* hero */
.hero{padding:48px 0 20px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:6px 14px;border-radius:999px;margin-bottom:18px}
.eyebrow .ic{color:var(--accent);width:16px;height:16px}
.hero h1{font-size:clamp(46px,7vw,88px);line-height:.98;letter-spacing:-.04em;margin:0 0 20px;font-weight:800}
.hl{color:var(--accent);position:relative;white-space:nowrap}
.hl::after{content:"";position:absolute;inset-inline:-4px;bottom:.06em;height:.16em;background:#c7d7ff;z-index:-1;border-radius:4px}
.hero p{font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);margin:0 0 28px;max-width:520px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:flex;gap:36px;margin-top:36px}
.stats b{display:block;font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1}
.stats span{font-size:14px;color:var(--muted)}
.hero-photo{position:relative;justify-self:center;width:min(440px,100%);aspect-ratio:1}
.photo-ring{position:absolute;inset:6%;border-radius:50%;padding:10px;background:conic-gradient(from 200deg,var(--accent),#7c3aed,#0891b2,var(--accent));animation:spin 14s linear infinite}
.photo-ring img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:6px solid var(--bg);animation:spin 14s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.photo-card{position:absolute;bottom:4%;inset-inline-end:-2%;background:var(--card);border-radius:16px;padding:12px 16px;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow)}
.photo-card b{display:block;font-size:16px;line-height:1.2}.photo-card span{font-size:13px;color:var(--muted)}
.float{position:absolute;display:flex;align-items:center;gap:6px;background:var(--card);padding:8px 14px;border-radius:999px;font-weight:600;font-size:14px;box-shadow:var(--shadow);animation:bob 5s ease-in-out infinite}
.f1{top:8%;inset-inline-start:-4%}.f2{top:42%;inset-inline-end:-8%;animation-delay:-1.6s}.f3{bottom:22%;inset-inline-start:-10%;animation-delay:-3.2s}
@keyframes bob{50%{transform:translateY(-8px)}}
.avatar{border-radius:50%;object-fit:cover;flex:none}
.avatar.xs{width:28px;height:28px}.avatar.sm{width:44px;height:44px}

/* sections */
.section{padding-top:72px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.section h2,.page-head h1{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.03em;line-height:1.1;margin:0}
.section-sub{color:var(--ink-2);margin:8px 0 0}
.more{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-weight:600}
.more svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}

/* category chips */
.cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.cat{height:42px;padding:0 18px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:500;transition:background .2s,color .2s,border-color .2s}
.cat:hover{border-color:var(--ink)}
.cat[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* catalog layout */
.catalog{display:grid;grid-template-columns:290px 1fr;gap:28px;align-items:start}
.filters{position:sticky;top:88px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;max-height:calc(100vh - 110px);overflow:auto}
.filters-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.filters-head h3{margin:0;font-size:18px}
.sheet-close,.sheet-apply{display:none!important}
.fgroup{padding:16px 0;border-top:1px solid var(--line)}
.fgroup:first-of-type{border-top:0}
.flabel{font-weight:700;font-size:14px;margin-bottom:10px;display:flex;flex-direction:column}
.flabel small{font-weight:400;color:var(--muted);font-size:12px}
.fsub{font-size:13px;color:var(--ink-2);margin:12px 0 6px}
.fopts{display:grid;gap:6px}
.fopts.two{grid-template-columns:1fr 1fr}
.fopts.three{grid-template-columns:repeat(3,1fr)}
.ftoggle{position:relative;display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);font-size:14px;font-weight:500;text-align:start;transition:border-color .2s,background .2s,box-shadow .2s}
.ftoggle:hover{border-color:#b6c2d4}
.ftoggle>span:nth-last-child(2){flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fopts.three .ftoggle{justify-content:center;padding:0}
.fopts.three .ftoggle>span:nth-last-child(2){flex:none}
.fopts.three .fcheck{display:none}
.fcheck{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;transition:background .2s,border-color .2s}
.fcheck svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none;opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s var(--ease)}
.ftoggle[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.ftoggle[aria-pressed="true"] .fcheck{background:var(--accent);border-color:var(--accent)}
.ftoggle[aria-pressed="true"] .fcheck svg{opacity:1;transform:none}
.fopts.three .ftoggle[aria-pressed="true"]{color:var(--accent);font-weight:700}
.switch-group{background:var(--soft);margin:4px -20px -20px;padding:16px 20px 20px;border-radius:0 0 var(--r) var(--r);border-top:1px solid var(--line)}

.results-bar{display:flex;gap:10px;align-items:center}
.search{flex:1;display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;background:var(--card);border:1px solid var(--line);border-radius:999px;transition:border-color .2s,box-shadow .2s}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.search .ic{color:var(--muted)}
.search input{flex:1;border:0;outline:0;background:none;min-width:0}
.filter-open{display:none}
.fcount{display:none;min-width:20px;height:20px;border-radius:10px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;place-items:center;padding:0 6px}
.fcount.on{display:inline-grid}
.result-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 16px;min-height:32px}
#rcount{font-weight:600;color:var(--ink-2);font-size:15px}
.active-chips{display:flex;gap:6px;flex-wrap:wrap}
.achip{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px 0 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:600}
.achip svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none}
.achip:hover{background:#d8e4ff}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease);animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card-media{position:relative;display:block;aspect-ratio:4/3;background:#e9edf3;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card-media img{transform:scale(1.05)}
.tested{position:absolute;top:12px;inset-inline-start:12px;display:inline-flex;align-items:center;gap:4px;background:var(--ok);color:#fff;font-size:12px;font-weight:700;padding:4px 10px 4px 9px;border-radius:999px}
.tested .ic{width:14px;height:14px;color:#fff}.tested .ic svg{stroke-width:3}
.tested.big{font-size:14px;padding:6px 14px;top:16px;inset-inline-start:16px}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.brand{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.card-title{font-weight:700;font-size:17px;line-height:1.3;margin-top:-4px}
.card-title:hover{color:var(--accent)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px 0 8px;border-radius:8px;font-size:12.5px;font-weight:600;background:var(--soft)}
.tag .ic{width:15px;height:15px}
.tag-wifi{background:#e8efff;color:#1e40af}.tag-zigbee{background:#fee9e9;color:#991b1b}.tag-thread{background:#e2f4f1;color:#115e59}.tag-matter{background:#f1eafe;color:#5b21b6}
.tags.lg .tag{height:32px;font-size:14px;padding:0 12px 0 10px}.tags.lg .ic{width:18px;height:18px}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;border-radius:999px;border:1px dashed #b6c2d4;font-size:12.5px;color:var(--ink-2)}
.pill .ic{width:15px;height:15px;color:var(--ink-2)}
.verdict{margin:2px 0 0;font-size:14px;color:var(--ink-2);line-height:1.5;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line);margin-top:4px}
.ecos{display:flex;gap:4px}
.eco{position:relative;width:30px;height:30px;border-radius:9px;background:var(--soft);display:grid;place-items:center}
.eco .ic{width:18px;height:18px}
.eco>span:last-child{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--ink);color:#fff;font-size:12px;white-space:nowrap;padding:4px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s,transform .2s var(--ease)}
.eco:hover>span:last-child{opacity:1;transform:translateX(-50%)}
.price{font-weight:800;font-size:16px;white-space:nowrap}
.price.lg{font-size:28px}
.empty{grid-column:1/-1;text-align:center;padding:50px 20px;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:var(--r)}
.empty .ic{width:36px;height:36px;margin:0 auto}
.footnote{font-size:13px;color:var(--muted);margin-top:14px}

/* articles */
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.acard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.acard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.acard-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#e9edf3}
.acard-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.acard:hover .acard-media img{transform:scale(1.05)}
.atype{position:absolute;top:12px;inset-inline-start:12px;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;background:#fff;color:var(--ink)}
.atype-review{background:#7c3aed;color:#fff}.atype-guide{background:var(--accent);color:#fff}
.atype.static{position:static;display:inline-block;margin-bottom:14px}
.acard-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.acard-title{font-weight:700;font-size:19px;line-height:1.3}
.acard-title:hover{color:var(--accent)}
.acard-body p{margin:0;color:var(--ink-2);font-size:15px;flex:1}
.ameta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:6px}
.page-head{padding:40px 0 4px}
.page-head .cats{margin-top:22px}

.article{padding-bottom:10px}
.article h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-.035em;margin:0 0 14px}
.article .lead{font-size:20px;color:var(--ink-2);margin:0 0 24px}
.byline{display:flex;align-items:center;gap:12px;padding-bottom:28px}
.byline b{display:block;line-height:1.2}.byline span{font-size:14px;color:var(--muted)}
.stars{margin-inline-start:auto;display:flex;align-items:center;gap:2px}
.star svg{width:20px;height:20px;fill:#e2e8f0;stroke:none}
.star.on svg{fill:#f59e0b}
.star{position:relative;display:inline-flex}.star .hf{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}.star .hf svg{fill:#f59e0b}
.stars b{margin-inline-start:6px}
.article-cover{width:min(1040px,100% - 40px)}
.article-cover img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:24px}
.article-cover a{display:block;border-radius:24px;overflow:hidden}
.article-cover a img{transition:transform .6s var(--ease)}
.article-cover a:hover img{transform:scale(1.02)}
.prose{font-size:18px;line-height:1.8;padding-top:30px}
.prose h2{font-size:26px;letter-spacing:-.02em;line-height:1.25;margin:40px 0 10px}
.prose p,.prose li{color:#1e293b}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:#a9c0f7;transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--accent)}
.prose ul{padding-inline-start:22px}
.prose li{margin:6px 0}
.prose figure{margin:30px 0}
.prose figure a{display:block;border-radius:18px;overflow:hidden;text-decoration:none}
.prose figure img{width:100%;border-radius:18px;transition:transform .5s var(--ease)}
.prose figure a:hover img{transform:scale(1.02)}
.prose figcaption{font-size:14px;color:var(--muted);text-align:center;margin-top:10px}
.prose .callout{background:#fff7e6;border:1px solid #fde4b0;border-radius:var(--r-sm);padding:14px 18px;font-size:16px}
.pembed{display:flex;align-items:center;gap:16px;margin:24px 0;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:18px;text-decoration:none!important;color:var(--ink)!important;transition:box-shadow .3s,transform .3s var(--ease)}
.pembed:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.pembed img{width:84px;height:84px;border-radius:12px;object-fit:cover}
.pembed-body{flex:1;display:flex;flex-direction:column;gap:4px;line-height:1.3}
.pembed-body b{font-size:17px}
.pembed-cta{display:flex;align-items:center;gap:2px;color:var(--accent);font-weight:600;font-size:15px;white-space:nowrap}
.pembed-cta svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}

/* product page */
.crumbs{font-size:14px;color:var(--muted);margin:28px 0 20px}
.crumbs a:hover{color:var(--ink)}
.product{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.product-media{position:sticky;top:90px;background:#e9edf3;border-radius:24px;overflow:hidden}
.product-media img{width:100%;aspect-ratio:1;object-fit:cover}
.product-info h1{font-size:clamp(28px,3.4vw,42px);line-height:1.1;letter-spacing:-.03em;margin:4px 0 16px}
.product-info .pills{margin-top:10px}
.quote{display:flex;gap:14px;align-items:flex-start;margin:24px 0;padding:18px 20px;background:var(--accent-soft);border-radius:18px}
.quote p{margin:0;font-size:17px;font-weight:500;line-height:1.5}
.quote cite{font-style:normal;font-size:14px;color:var(--accent);font-weight:600}
.price-row{display:flex;align-items:baseline;gap:10px}
.buy{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 8px}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.proscons>div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.product-info h3{font-size:17px;margin:26px 0 10px}
.proscons h3{margin:0 0 8px!important;font-size:15px}
.pros,.cons{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:14.5px}
.pros li,.cons li{display:flex;gap:8px}
.pros li::before{content:"+";color:var(--ok);font-weight:800}
.cons li::before{content:"−";color:var(--bad);font-weight:800}
.compat{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:15px}
.compat th,.compat td{padding:10px 16px;border-bottom:1px solid var(--line);text-align:start}
.compat tr:last-child th,.compat tr:last-child td{border-bottom:0}
.compat th{font-weight:500;vertical-align:middle;white-space:nowrap}
.compat th .ic{vertical-align:-4px;margin-inline-end:10px}
.compat td{vertical-align:middle}
.compat td{width:50%}
.compat td svg{width:18px;height:18px;fill:none;stroke-width:2.6;stroke-linecap:round;vertical-align:-4px;margin-inline-end:6px}
.compat td.yes svg{stroke:var(--ok)}.compat td.no svg{stroke:#cbd5e1}
.compat td.no{color:var(--muted)}

/* about */
.about{display:grid;grid-template-columns:360px 1fr;gap:48px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:36px}
.about-photo{width:100%;aspect-ratio:1;object-fit:cover;border-radius:22px}
.about-copy h2{margin-bottom:14px!important}
.about-copy p{color:var(--ink-2);font-size:17px}

.empty-page{text-align:center;padding:80px 0}

/* footer */
.site-footer{margin-top:90px;border-top:1px solid var(--line);background:var(--card);padding:34px 0 26px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer-brand{display:flex;gap:12px;align-items:center}
.footer-brand b{display:block}.footer-brand span{font-size:14px;color:var(--muted)}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;font-weight:500;color:var(--ink-2)}
.footer-links a:hover{color:var(--accent)}
.footer-note{font-size:13px;color:var(--muted);margin-top:20px}

.sheet-scrim{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:60;opacity:0;transition:opacity .3s}
.sheet-scrim.show{opacity:1}

/* responsive */
@media (max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}.grid.g4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .nav{display:none}.group-btn{margin-inline-start:auto}
  .hero-grid{grid-template-columns:1fr;gap:10px}.hero-photo{width:min(320px,80%);order:-1}
  .f3{inset-inline-start:-14%}.f2{inset-inline-end:-14%}
  .catalog{grid-template-columns:1fr}
  .filter-open{display:inline-flex}
  .filters{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:70;max-height:86vh;border-radius:24px 24px 0 0;transform:translateY(100%);visibility:hidden;transition:transform .4s var(--ease),visibility 0s .4s;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .filters.open{transform:none;visibility:visible;transition:transform .4s var(--ease)}
  .sheet-close,.sheet-apply{display:inline-flex!important}
  .sheet-apply{position:sticky;bottom:0;margin-top:14px;box-shadow:0 -10px 20px 6px #fff}
  .filters-head{gap:10px}.filters-head h3{flex:1}
  .switch-group{margin:4px -20px 16px;border-radius:0}
  .agrid{grid-template-columns:1fr 1fr}
  .product{grid-template-columns:1fr;gap:24px}.product-media{position:static}
  .about{grid-template-columns:1fr;padding:22px;gap:22px}.about-photo{max-width:280px}
  .grid.g4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .wrap,.wrap.narrow,.article-cover{width:calc(100% - 28px)}
  .header-inner{height:62px;gap:12px}
  .logo-text{font-size:16px}.logo-mark svg{width:34px;height:34px}
  .group-btn{height:36px;padding:0 12px;font-size:13px}
  .hero{padding-top:24px}
  .stats{gap:24px}.stats b{font-size:26px}
  .float{font-size:12px;padding:6px 10px}.float .ic{width:15px;height:15px}
  .grid,.grid.g4{grid-template-columns:1fr}
  .agrid{grid-template-columns:1fr}
  .proscons{grid-template-columns:1fr}
  .prose{font-size:17px}
  .pembed{gap:12px}.pembed img{width:64px;height:64px}.pembed-cta{display:none}
  .cats{flex-wrap:nowrap;overflow-x:auto;margin-inline:-14px;padding-inline:14px;scrollbar-width:none}
  .cats::-webkit-scrollbar{display:none}
  .cat{flex:none}
  .stars{margin-inline-start:0;width:100%}
  .byline{flex-wrap:wrap}
}

/* ===== v2: community, real products, posts ===== */
.header-community{display:flex;gap:8px;margin-inline-start:8px}
.cicon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;transition:transform .2s var(--ease),box-shadow .2s}
.cicon:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(15,23,42,.18)}
.cicon .ic{width:22px;height:22px;color:#fff}
.cicon.sm{width:30px;height:30px}.cicon.sm .ic{width:17px;height:17px}
.c-facebook{background:#1877f2}.c-whatsapp{background:#25d366}.c-telegram{background:#229ed9}.c-coffee{background:#ffdd00;color:#1f2937!important}
.cicon .ic svg .f,.cbtn .ic svg .f{fill:currentColor;stroke:none}
.c-whatsapp .ic svg path:first-child{stroke-width:1.8}
.community{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cbtn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 14px;border-radius:999px;color:#fff;font-weight:600;font-size:15px;transition:transform .2s var(--ease),box-shadow .2s,filter .2s}
.cbtn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.18);filter:saturate(1.1)}
.cbtn .ic{width:20px;height:20px;color:currentColor}
.cbtn.c-coffee{color:#1f2937}
.inline-community{display:inline-flex;gap:6px;vertical-align:middle;margin-inline-start:6px}
.hero .stats{display:flex;gap:40px;margin-top:10px}
.cnum{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;margin-inline-start:8px;border-radius:999px;background:var(--soft);font-size:12px;font-weight:700;color:var(--ink-2);transition:background .2s,color .2s}
.cat[aria-pressed="true"] .cnum{background:rgba(255,255,255,.18);color:#fff}
.select{height:48px;padding:0 16px 0 36px;border-radius:999px;border:1px solid var(--line);background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%230f172a' stroke-width='2'/%3E%3C/svg%3E") no-repeat left 14px center/14px;appearance:none;-webkit-appearance:none;font:inherit;font-size:15px;color:var(--ink)}
.card-media{aspect-ratio:1;background:#fff;border-bottom:1px solid var(--line)}
.card-media img{object-fit:contain;padding:8px}
.noimg{display:grid;place-items:center;width:100%;height:100%;color:#cbd5e1}
.noimg .ic{width:48px;height:48px}
.ali{font-size:12.5px;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:-2px}
.card-foot{border-top:0;padding-top:4px;margin-top:auto}
.buy-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:12px;background:var(--accent);color:#fff;font-weight:600;font-size:15px;margin-top:8px;transition:background .2s,box-shadow .2s}
.buy-btn:hover{background:var(--accent-d);box-shadow:0 6px 16px rgba(37,99,235,.25)}
.buy-btn .ic{width:18px;height:18px;color:#fff}
.buy-btn.lg{height:52px;font-size:17px;padding:0 28px;border-radius:999px;display:inline-flex}
.more-wrap{text-align:center;margin-top:26px}
.more-wrap .btn[hidden]{display:none}
.product-media{background:#fff;border:1px solid var(--line)}
.product-media img{object-fit:contain;padding:16px}
.product-media .noimg{aspect-ratio:1}
.ali-lg{color:var(--ink-2);margin:-6px 0 16px;font-size:15px}
.note-box{background:#fff7e6;border:1px solid #fde4b0;border-radius:12px;padding:10px 14px;margin:16px 0 0;font-size:15px}
.price-row{margin-top:20px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pcard{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:16px;transition:transform .25s var(--ease),box-shadow .25s,border-color .2s}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#c7d7ff}
.pcard-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff;background:#1877f2}
.pcard-ic.v{background:#ef4444}
.pcard-ic .ic{width:22px;height:22px;color:#fff}
.pcard-body{flex:1;display:flex;flex-direction:column;line-height:1.35;min-width:0}
.pcard-body b{font-size:15.5px}
.pcard-body span{font-size:13px;color:var(--muted)}
.pcard-ext{color:var(--muted)}
.pgroup{font-size:18px;margin:28px 0 12px}
.adraft{position:absolute;top:12px;inset-inline-end:12px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:#fff7e6;color:#92400e}
.adraft.static{position:static;display:inline-block;margin-bottom:14px}
.pembed .noimg{width:84px;height:84px}
@media (max-width:1100px){.pgrid{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.header-community{margin-inline-start:auto}}
@media (max-width:600px){
  .pgrid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .card-body{padding:10px 10px 12px;gap:6px}
  .card-title{font-size:14.5px}
  .ali{display:none}
  .tag{height:22px;font-size:11px;padding:0 6px}.tag .ic{width:13px;height:13px}
  .pill{height:22px;font-size:11px;padding:0 6px}.pill .ic{width:13px;height:13px}
  .ecos{display:none}
  .buy-btn{height:38px;font-size:13.5px;border-radius:10px}
  .header-community{gap:6px}.cicon{width:34px;height:34px}.cicon .ic{width:19px;height:19px}
  .results-bar{flex-wrap:wrap}.results-bar .search{flex-basis:100%}.results-bar .select{flex:1}
  .cbtn{height:40px;font-size:14px}
  .hero .stats{gap:22px}
}

/* ===== v3: sub-categories + brands ===== */
.subs{display:flex;gap:8px;flex-wrap:wrap;margin:-10px 0 24px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.subs[hidden]{display:none}
.sub{height:36px;padding:0 14px;border-radius:999px;background:var(--soft);font-weight:500;font-size:14.5px;transition:background .2s,color .2s}
.sub:hover{background:#e2e8f0}
.sub[aria-pressed="true"]{background:var(--accent);color:#fff}
.sub[aria-pressed="true"] .cnum{background:rgba(255,255,255,.2);color:#fff}
.brands{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bchip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:13.5px;font-weight:500;transition:border-color .2s,background .2s,color .2s}
.bchip span{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:14px;text-align:center}
.bchip:hover{border-color:#b6c2d4}
.bchip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.bchip[aria-pressed="true"] span{color:var(--accent)}
.bmore{font-size:13px;padding:0 4px}
.brand-link{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--accent);margin-bottom:4px}
.brand-link:hover{text-decoration:underline}
.card .brand{margin-bottom:-2px}
@media (max-width:600px){.subs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-14px;border-radius:0;border-inline:0}.subs::-webkit-scrollbar{display:none}.sub{flex:none}}
.site-header.scrolled{background:rgba(245,247,251,.98)}
.prose .orig{margin-top:36px;padding-top:20px;border-top:1px solid var(--line)}
.prose .orig a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600}
.prose .orig .ic{color:#1877f2;width:20px;height:20px}.prose .orig .ic svg .f{fill:currentColor;stroke:none}

/* ===== coupons ===== */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.coupon{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.coupon::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,#f59e0b,#ef4444)}
.coupon h3{margin:0;font-size:19px;line-height:1.3}
.coupon p{margin:0;color:var(--ink-2);font-size:15px;flex:1}
.coupon-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.coupon-tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#b45309;background:#fff7e6;padding:4px 10px;border-radius:999px}
.coupon-tag .ic{width:15px;height:15px;color:#b45309}
.coupon-until{font-size:12.5px;color:var(--muted)}
.coupon-code{display:flex;align-items:center;justify-content:space-between;gap:10px;height:48px;padding:0 6px 0 14px;border:2px dashed #f59e0b;border-radius:12px;background:#fffbeb;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;font-weight:700;letter-spacing:.06em;transition:background .2s,border-color .2s}
.coupon-code b{font-family:var(--font);font-size:13px;letter-spacing:0;background:#f59e0b;color:#fff;border-radius:8px;padding:6px 12px;min-width:76px;text-align:center;transition:background .2s}
.coupon-code:hover{background:#fef3c7}
.coupon-code.copied{border-color:var(--ok);background:#ecfdf3}
.coupon-code.copied b{background:var(--ok)}
.coupon .buy-btn{margin-top:4px}
@media (max-width:1000px){.cgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cgrid{grid-template-columns:1fr}}
.page-head + .cgrid{margin-top:28px}

/* ===== post articles ===== */
.prose .pblock{margin:0 0 22px}
.prose .pblock p{margin:0 0 4px}
.prose .pbtn{margin:6px 0 10px!important}
.prose a.plink{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;background:var(--accent);color:#fff!important;text-decoration:none!important;font-size:14.5px;font-weight:600;vertical-align:middle;transition:background .2s}
.prose a.plink:hover{background:var(--accent-d)}
.prose a.plink::before{content:"";width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 10.5a1.5 1.5 0 0 0 1.5 1.2h8.6a1.5 1.5 0 0 0 1.5-1.1L21 8H6.2'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.4'/%3E%3Ccircle cx='17' cy='19.5' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat}
.post-cover{margin-top:6px}
.post-cover img{width:100%;max-height:560px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:20px}
.pcard.has-cover{padding:10px 14px 10px 10px}
.pcard-cover{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none;background:#e9edf3}
.acard-media .noimg{display:grid;place-items:center;height:100%;color:#cbd5e1}
.acard-media img{object-fit:cover}
.agrid + h3.pgroup{margin-top:40px}

/* product embeds inside articles */
.prose .pembed{display:flex;align-items:center;gap:14px;margin:12px 0 18px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:18px;transition:box-shadow .3s,transform .3s var(--ease)}
.prose .pembed:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.prose .pembed-main{flex:1;display:flex;align-items:center;gap:16px;min-width:0;text-decoration:none!important;color:var(--ink)!important}
.prose .pembed img{width:84px;height:84px;border-radius:12px;object-fit:contain;background:#fff;border:1px solid var(--line);flex:none}
.prose .pembed .noimg{width:84px;height:84px}
.prose .pembed-body{display:flex;flex-direction:column;gap:6px;min-width:0;line-height:1.3}
.prose .pembed-body b{font-size:16.5px}
.prose .pembed-en{font-size:14px!important;font-weight:600;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prose .pembed-price{font-size:14px;font-weight:700;color:var(--ink)}
.prose .pembed-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:none}
.prose .pembed-cta{display:flex;align-items:center;justify-content:center;gap:2px;color:var(--accent)!important;font-weight:600;font-size:14.5px;text-decoration:none!important}
.prose .pembed-cta svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.prose .pembed-buy{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 16px;border-radius:999px;background:var(--accent);color:#fff!important;text-decoration:none!important;font-weight:600;font-size:14.5px;white-space:nowrap}
.prose .pembed-buy:hover{background:var(--accent-d)}
.prose .pembed-buy .ic{width:16px;height:16px;color:#fff}
@media (max-width:600px){.prose .pembed{flex-wrap:wrap}.prose .pembed img{width:64px;height:64px}.prose .pembed-actions{flex-direction:row;width:100%}.prose .pembed-actions>*{flex:1}.prose .pembed-cta{display:none}}

/* support / coffee box */
.prose .support{margin:40px 0 8px;padding:22px 24px;background:#fffbea;border:1px solid #fde68a;border-radius:20px;color:#78350f}
.prose .support-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.prose .support-head b{font-size:19px;color:#78350f}
.prose .support-ic{width:36px;height:36px;border-radius:50%;background:#ffdd00;display:grid;place-items:center;flex:none}
.prose .support-ic svg,.coffee-ic svg{width:20px;height:20px;fill:none;stroke:#1f2937;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.prose .support p{margin:0 0 16px;color:#92400e;font-size:16.5px;line-height:1.75}
.prose a.coffee-btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px 0 18px;border-radius:12px;background:#ffdd00;color:#1f2937!important;text-decoration:none!important;font-weight:700;font-size:16px;box-shadow:0 2px 0 #e6c200;transition:transform .2s var(--ease),box-shadow .2s,filter .2s}
.prose a.coffee-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(230,194,0,.45);filter:saturate(1.1)}
.coffee-ic{display:inline-grid;place-items:center}

/* share */
.buy{align-items:center}
.share{position:relative}
.share-btn{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 22px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:600;font-size:16px;transition:border-color .2s,background .2s}
.share-btn:hover{border-color:var(--ink)}
.share-btn .ic{width:20px;height:20px;color:var(--ink)}
.share-btn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.share-btn[aria-expanded="true"] .ic{color:var(--accent)}
.share-menu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:30;min-width:210px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;animation:pop-in .18s var(--ease)}
.share-menu[hidden]{display:none}
@keyframes pop-in{from{opacity:0;transform:translateY(-6px)}}
.share-menu a,.share-menu button{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:10px;font-size:15px;font-weight:500;color:var(--ink);text-align:start;width:100%}
.share-menu a:hover,.share-menu button:hover{background:var(--soft)}
.share-menu .ic{width:20px;height:20px}
.share-menu .ic svg .f{fill:currentColor;stroke:none}
.share-menu .ic-whatsapp{color:#25d366}.share-menu .ic-telegram{color:#229ed9}.share-menu .ic-facebook{color:#1877f2}.share-menu .ic-link{color:var(--ink-2)}
.share-menu button.copied{color:var(--ok)}
.share-menu button.copied .ic{color:var(--ok)}
@media (max-width:600px){.buy{flex-wrap:nowrap}.buy .buy-btn.lg{flex:1;padding:0 16px}.share-btn{padding:0 16px}.share-menu{inset-inline-start:auto;inset-inline-end:0}}
.compat td.yes .yc{display:inline-flex;align-items:flex-start;gap:6px;line-height:1.45}
.compat td.yes .yc svg{flex:none;margin:2px 0 0!important}