/* ============ 目录式：极致冷静，商品即一切，MUJI 无印良品感 ============ */
:root{
  --bg:#FFFFFF;
  --ink:#111111;
  --soft:#888888;
  --soft-2:#B8B8B8;
  --line:#EAEAEA;
  --line-2:#F2F2F2;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Inter","Helvetica Neue",-apple-system,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;font-size:14px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* 极简顶栏 */
.topbar{border-bottom:1px solid var(--line);padding:10px 32px;display:flex;justify-content:space-between;font-size:12px;color:var(--soft);letter-spacing:.5px}
.wrap{max-width:1400px;margin:0 auto;padding:0 32px}

header.nav{border-bottom:1px solid var(--line);padding:24px 0;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:20px;font-weight:600;letter-spacing:4px}
.menu{display:flex;gap:32px;list-style:none}
.menu a{font-size:13px;color:var(--ink);transition:.2s}
.menu a:hover{color:var(--soft)}
.nav-actions{display:flex;gap:24px;font-size:13px;color:var(--ink)}
.nav-actions a{cursor:pointer;transition:.2s}
.nav-actions a:hover{color:var(--soft)}
.burger{display:none;background:none;border:none;font-size:18px;cursor:pointer}

/* 简短 hero：一句话，无图 */
.intro{padding:80px 0 48px;border-bottom:1px solid var(--line)}
.intro-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.intro h1{font-size:clamp(36px,5vw,64px);font-weight:500;letter-spacing:-1px;line-height:1.05}
.intro .desc{color:var(--soft);font-size:15px;max-width:420px;padding-bottom:8px}

/* 工具栏：筛选 + 排序，工业感 */
.toolbar{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:16px}
.filters{display:flex;gap:0;flex-wrap:wrap}
.filter{padding:8px 0;margin-right:32px;font-size:13px;color:var(--soft);cursor:pointer;border-bottom:1px solid transparent;transition:.2s;background:none;border-left:none;border-right:none;border-top:none}
.filter.active{color:var(--ink);border-bottom-color:var(--ink)}
.filter:hover{color:var(--ink)}
.sort{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--soft)}
.sort select{border:1px solid var(--line);padding:6px 28px 6px 12px;font-size:13px;background:#fff;cursor:pointer;outline:none;font-family:inherit}

/* 商品网格：极致冷静，无装饰 */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 32px;padding:48px 0 96px}
.item{cursor:pointer}
.item-media{aspect-ratio:1/1;background:var(--line-2);display:grid;place-items:center;overflow:hidden;position:relative;transition:.3s}
.item-media:hover{background:#EAEAEA}
.item-emoji{font-size:88px;opacity:.5;transition:.3s}
.item:hover .item-emoji{opacity:.7;transform:scale(1.05)}
.item-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.4s}
.item:hover .item-media img{transform:scale(1.04)}
.item-tag{position:absolute;top:12px;left:12px;font-size:10px;letter-spacing:1px;color:var(--ink);background:#fff;padding:3px 8px}
.item-info{padding-top:16px}
.item-info .name{font-size:14px;font-weight:400;color:var(--ink)}
.item-info .sub{font-size:12px;color:var(--soft);margin-top:2px}
.item-info .row{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
.item-info .price{font-size:14px;color:var(--ink)}
.item-info .old{font-size:12px;color:var(--soft-2);text-decoration:line-through;margin-left:6px}
.add-btn{margin-top:12px;width:100%;padding:10px;border:1px solid var(--line);background:#fff;font-size:12px;letter-spacing:1px;cursor:pointer;transition:.2s;font-family:inherit;color:var(--ink);opacity:0}
.item:hover .add-btn{opacity:1}
.add-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 信任横条：纯文字 */
.pledge{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:48px 0}
.pledge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.pledge-item h3{font-size:13px;font-weight:500;margin-bottom:6px;letter-spacing:.5px}
.pledge-item p{font-size:12px;color:var(--soft);line-height:1.5}

/* 分页 */
.pager{display:flex;justify-content:center;gap:4px;padding:0 0 96px}
.pager a{width:36px;height:36px;display:grid;place-items:center;font-size:13px;color:var(--soft);cursor:pointer;border:1px solid transparent;transition:.2s}
.pager a:hover{border-color:var(--line)}
.pager a.active{color:var(--ink);border-color:var(--ink)}

/* 简单订阅 */
.subs{border-top:1px solid var(--line);padding:64px 0;text-align:center}
.subs h2{font-size:24px;font-weight:500;margin-bottom:8px;letter-spacing:-.5px}
.subs p{font-size:13px;color:var(--soft);margin-bottom:24px}
.subs form{display:flex;max-width:420px;margin:0 auto;border:1px solid var(--line)}
.subs input{flex:1;border:none;padding:14px 16px;font-size:14px;outline:none;font-family:inherit}
.subs button{border:none;background:var(--ink);color:#fff;padding:0 28px;font-size:13px;letter-spacing:1px;cursor:pointer;font-family:inherit}

/* 页脚 */
footer{background:#FAFAFA;border-top:1px solid var(--line);padding:64px 0 32px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid var(--line)}
.foot h4{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);margin-bottom:16px;font-weight:600}
.foot ul{list-style:none}
.foot li{margin-bottom:8px}
.foot a{font-size:13px;color:var(--soft);transition:.2s}
.foot a:hover{color:var(--ink)}
.foot-bottom{padding-top:24px;font-size:12px;color:var(--soft-2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

@media(max-width:1000px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .intro-inner{grid-template-columns:1fr;gap:24px}
  .foot{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:700px){
  .grid{grid-template-columns:repeat(2,1fr);gap:32px 20px}
  .menu{display:none}
  .burger{display:block}
  .pledge-grid{grid-template-columns:1fr 1fr;gap:24px}
  .topbar{font-size:11px;padding:8px 20px}
  .wrap{padding:0 20px}
}