.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.intro{padding:44px 0 28px}
.intro h1{font-size:clamp(38px,5.5vw,58px);margin:12px 0 14px}
.intro p{color:var(--muted);font-size:18px;max-width:680px;margin:0}
.legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 0;max-width:780px}
.legend div{background:var(--wash);border-radius:12px;padding:12px 14px}
.legend dt{font-weight:800;font-size:14px}
.legend dd{margin:2px 0 0;color:var(--muted);font-size:13.5px}

.catalog>h2{font-size:22px;margin:0 0 14px}
.finder{position:sticky;top:64px;z-index:5;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;background:var(--paper);padding:10px 0;border-bottom:1px solid var(--line)}
.find{flex:1 1 260px;max-width:380px}
.find input{width:100%;height:46px;border:1px solid #c9d8cd;border-radius:12px;padding:0 14px 0 40px;font:inherit;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23617066' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 13px center/18px}
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.filters::-webkit-scrollbar{display:none}
.filter{flex:none;min-height:44px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 16px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.filter[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.result-line{color:var(--muted);font-size:14px;margin:12px 0 0;min-height:1.4em}

.group{margin-top:28px}
.group[hidden]{display:none}
.group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:12px}
.group-head h3{margin:0;font-size:19px}
.group-head .count{color:var(--muted);font-weight:600;font-size:15px}
.group-head p{margin:0;color:var(--muted);font-size:14px}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.store{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 10px 14px}
.store[hidden]{display:none}
.store img{width:56px;height:56px;border-radius:14px;object-fit:contain;background:#fff;box-shadow:0 2px 8px #183b2a1a}
.store>span{font-weight:800;font-size:15px;line-height:1.25}
.caps{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.caps li{font-size:11.5px;font-weight:700;color:var(--green-dark);background:var(--mint);border-radius:999px;padding:2px 8px}
.caps li.ro{color:#6a5a22;background:#f4ecd2}
.empty{color:var(--muted);margin-top:24px}
@media(max-width:760px){.legend{grid-template-columns:1fr}}
@media(max-width:560px){.intro{padding-top:26px}.finder{top:58px}.find{max-width:none}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.store{padding:14px 8px 12px}.store img{width:48px;height:48px}}
.result-line:empty{display:none}
.group:first-of-type{margin-top:20px}
@media(max-width:560px){.legend{gap:8px}.legend div{padding:10px 12px}.legend dd{display:none}.intro p{font-size:16px}}