:root{--bg:#fff;--text:#111827;--muted:#6b7280;--panel:#f9fafb;--border:#e5e7eb;--accent:#111827;--ok:#16a34a}
*{box-sizing:border-box}
html,body{margin:0; padding:0; color-scheme:light; overflow-x:hidden}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;color:var(--text);background:var(--bg)}

.wrap{max-width:1200px;margin:0 auto;padding:28px 16px; overflow-x:hidden}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap;min-width:0}
.title{font-size:22px;font-weight:600}
.muted{color:var(--muted);font-size:13px}
.h1{font-size:24px;line-height:1.25;font-weight:700;margin:6px 0}
.desc{display:block;color:#374151;background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;padding:12px 14px;margin:6px 0 14px 0;line-height:1.65;font-size:16px}

/* GRID */
.grid{display:grid;grid-template-columns:1fr;gap:24px;min-width:0;max-width:100%}
@media(min-width:1024px){.grid{grid-template-columns:280px 1fr}}
.sidebar{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;padding-right:8px;display:none;min-width:0}
@media(min-width:1024px){.sidebar{display:block}}
.nav-btn{display:flex;align-items:center;gap:12px;margin-bottom:14px;cursor:pointer;border-radius:12px;padding:6px;border:1px solid transparent}
.nav-btn:hover{background:#f3f4f6}
.nav-btn.active{background:#eef2ff;border-color:#6366f1}
.thumb{width:74px;height:74px;border-radius:20%;overflow:hidden;border:2px solid var(--border);box-shadow:0 1px 4px rgba(0,0,0,.05);background:#fff;display:grid;place-items:center}
.thumb picture,.thumb img{display:block;width:130%;height:130%;object-fit:cover}
.group-name{font-weight:600}
.group-name.muted{color:#6b7280}
.mobile-strip{display:flex;gap:14px;overflow-x:auto;padding:6px 2px;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
@media(min-width:1024px){.mobile-strip{display:none}}

/* chips */
.sticky-chips{position:sticky;top:0;z-index:10;padding:8px 0;margin-top:-8px;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.2) blur(4px);overflow-x:hidden}
@media(max-width:640px){.sticky-chips.no-sticky{position:static;top:auto;background:transparent;backdrop-filter:none}}
.chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%}
@media(max-width:640px){
  .chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .chip{scroll-snap-align:start;flex:0 0 auto;white-space:nowrap;max-width:85vw}
}
.chip{font-size:14px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:#fff;cursor:pointer;display:flex;gap:8px;align-items:center;color:var(--text)}
.chip .sub{opacity:.8;font-size:12px}
.chip .size{opacity:.9;font-size:12px}
.chip.cube{background:#f0f9ff}
.chip.slice{background:#fdf2f8}
.chip.powder{background:#fffbeb}
.chip.whole{background:#ecfdf5}
.chip.active{background:#f3f4f6;border-color:var(--border);color:var(--text)}

/* details */
.detail{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;min-width:0;max-width:100%}
@media(min-width:1024px){.detail{grid-template-columns:1fr 1fr;gap:24px}}
.detail>*{min-width:0}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:12px;margin-bottom:10px}
.label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.img-wrap img{display:block;width:100%;height:320px;max-width:100%;border-radius:20px;box-shadow:0 10px 25px rgba(0,0,0,.08);object-fit:contain}
@media(max-width:640px){.img-wrap img{height:220px}}

/* pills */
.qbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;align-items:flex-start;min-width:0;max-width:100%}
.qpill{font-size:13px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:7px 10px;display:inline-flex;gap:8px;align-items:center;max-width:100%}
.qpill .k{color:#6b7280;text-transform:uppercase;font-size:10px;letter-spacing:.06em;white-space:nowrap}
.qpill .v{white-space:normal;overflow-wrap:anywhere}
.badge{padding:2px 8px;margin: 2px;border-radius:999px;border:1px solid var(--border);background:#fff;font-size:12px;color:#374151;display:inline-flex;align-items:center;white-space:nowrap;max-width:100%}
.badge.ok{border-color:#bbf7d0;background:#ecfdf5;color:#166534}

.pname{font-size:20px;font-weight:600;margin:0}
.item{padding:18px 0;border-top:1px solid #e5e7eb}
.item:first-child{border-top:none}
.ldslot{display:none}

/* --- v20 layout fix --- */
.grid{width:100%;grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){
  .grid{grid-template-columns:280px minmax(0,1fr)}
}
.grid > aside, .grid > main, main{min-width:0}