.mhero{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:34px 0 30px}
.mhero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;filter:saturate(1.1)}
.mhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,26,23,.2),rgba(30,26,23,.9))}
.mhero .wrap{position:relative;z-index:1}
.mhero h1{font-size:clamp(2rem,8vw,3.6rem);text-shadow:0 4px 30px rgba(0,0,0,.5)}
.mhero p{opacity:.85;margin-top:6px;max-width:48ch}
.mhero .eyebrow{color:var(--gold)}
.mhero .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mhero .meta span{font-size:.75rem;font-weight:700;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.mbar{position:sticky;top:66px;z-index:800;background:rgba(255,248,236,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.mbar .search{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:0 14px;height:42px;margin:8px 0 8px}
.mbar .search svg{width:18px;height:18px;color:var(--mute);flex:none}
.mbar .search input{flex:1;border:0;outline:0;font:inherit;background:none;min-width:0}
.mbar .search button{font-size:.75rem;font-weight:800;color:var(--red);display:none}
.mbar .search.has button{display:block}
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 16px 10px;margin:0 -16px;scrollbar-width:none;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:9px 14px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font-size:.82rem;font-weight:700;white-space:nowrap;transition:.3s var(--ease);scroll-snap-align:start;display:flex;gap:6px;align-items:center}
.chip small{color:var(--mute);font-weight:700;font-size:.7rem}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.on small{color:var(--gold)}
.chip.pop{border-color:var(--gold);background:var(--cream-2)}
.chip.pop.on{background:var(--red);border-color:var(--red)}
.mcat{padding:26px 0 8px;scroll-margin-top:150px}
.mcat .head{display:flex;align-items:end;justify-content:space-between;margin-bottom:12px;gap:14px}
.mcat h2{font-size:1.6rem}
.mcat .head small{color:var(--mute);font-weight:700;font-size:.8rem;white-space:nowrap}
.items{display:grid;gap:10px}
.mi{display:grid;grid-template-columns:1fr auto;gap:12px;background:#fff;border-radius:18px;padding:12px 14px;animation:mi-in .5s var(--ease) both;border:1.5px solid var(--line);align-items:center;transition:.35s var(--ease);position:relative}
.mi:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:transparent}
.mi.has-img{grid-template-columns:78px 1fr auto}
.mi img{width:78px;height:78px;border-radius:14px;object-fit:cover}
@keyframes mi-in{from{opacity:0;transform:translateY(10px)}}
.mi h3{font-family:var(--font-b);font-size:1rem;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mi h3 .v,.mi h3 .nv{width:12px;height:12px;border:1.5px solid var(--green);border-radius:3px;background:radial-gradient(circle,var(--green) 40%,transparent 45%);flex:none}
.mi h3 .nv{border-color:var(--red);background:radial-gradient(circle,var(--red) 40%,transparent 45%)}
.mi h3 .pop{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:3px 7px;border-radius:999px}
.mi p{font-size:.82rem;color:var(--mute);margin-top:3px}
.mi .right{display:grid;gap:6px;justify-items:end}
.mi .add{display:inline-flex;align-items:center;gap:5px;background:var(--ink);color:#fff;font-size:.74rem;font-weight:800;padding:7px 11px;border-radius:999px;transition:.3s}
.mi .add:hover{background:var(--red)}
.mi .add svg{width:14px;height:14px}
.mi.hide{display:none}
.mcat.hide{display:none}
.empty{text-align:center;padding:60px 20px;color:var(--mute);display:none}
.empty.show{display:block}
.empty b{display:block;font-family:var(--font-h);font-size:1.4rem;color:var(--ink);margin-bottom:6px}
.mnote{background:var(--cream-2);border-radius:18px;padding:16px;font-size:.85rem;color:var(--ink-2);margin:26px 0 10px;display:flex;gap:12px;align-items:start}
.mnote svg{width:22px;height:22px;color:var(--green);flex:none}
.sticky-cta{display:none;position:sticky;bottom:24px;z-index:850;justify-content:center;pointer-events:none;margin-top:10px}
.sticky-cta a{pointer-events:auto;box-shadow:0 18px 40px -14px rgba(180,35,28,.8)}
@media(min-width:900px){
  .mhero{padding:70px 0 60px}
  .mbar{top:78px}
  .mbar .wrap{display:flex;align-items:center;gap:20px}
  .mbar .search{width:320px;flex:none;margin:12px 0}
  .chips{margin:0;padding:0;flex:1}
  .mcat{padding:40px 0 10px;scroll-margin-top:160px}
  .items{grid-template-columns:1fr 1fr;gap:14px}
  .mi.has-img{grid-template-columns:110px 1fr auto}
  .mi img{width:110px;height:110px}
  .sticky-cta{display:flex}
}