:root{
  --bg:oklch(0.9816 0.0017 247.839);--fg:oklch(0.1649 0.0352 281.8285);--card:#fff;
  --primary:oklch(0.6726 0.2904 341.4084);--primary-fg:#fff;--muted:oklch(0.9595 0.02 286.0164);
  --muted-fg:oklch(0.45 0.03 285);--border:oklch(0.92 0.01 286);--accent:oklch(0.8903 0.1739 171.269);
  --font:'Manrope',system-ui,sans-serif;--heading:'Onest',system-ui,sans-serif;
  --r-sm:8px;--r-md:12px;--r-lg:16px;
  --gutter:12px;--gap-block:18px;--chip-h:32px;--search-h:36px;--icon:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#e9e9ee;font-family:var(--font);color:var(--fg);-webkit-font-smoothing:antialiased}
.stage{display:flex;gap:32px;justify-content:center;padding:28px;align-items:flex-start;flex-wrap:wrap}
.phone{width:390px;height:844px;background:var(--bg);border-radius:40px;overflow:hidden;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.18);border:8px solid #111}
.screen{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding-bottom:72px}
.screen::-webkit-scrollbar{display:none}
.label{width:390px;text-align:center;font:600 13px/1.4 var(--font);color:#444;margin-top:10px}
.label b{display:block;font-size:15px;color:#111}
h1,h2,h3{font-family:var(--heading);letter-spacing:-.01em}
/* header */
.hdr{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 var(--gutter)}
.hdr .logo{font:700 20px/1 var(--heading);letter-spacing:.02em}
.hdr .icons{display:flex;gap:6px}
.ibtn{width:36px;height:36px;display:grid;place-items:center;border-radius:999px;position:relative;color:var(--fg)}
.ibtn svg{width:var(--icon);height:var(--icon);stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--primary);color:#fff;font:700 10px/16px var(--font);text-align:center}
/* search */
.search{margin:0 var(--gutter);height:var(--search-h);display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:999px;background:var(--muted);color:var(--muted-fg);font-size:14px}
.search svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* sections */
.sec{margin-top:var(--gap-block)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;padding:0 var(--gutter);margin-bottom:10px}
.sec-h h2{font-size:17px;font-weight:700}
.sec-h a{font-size:13px;color:var(--muted-fg);text-decoration:none}
.hs{display:flex;gap:8px;overflow-x:auto;padding:0 var(--gutter);scrollbar-width:none}
.hs::-webkit-scrollbar{display:none}
/* chips */
.chips{display:flex;gap:6px;overflow-x:auto;padding:0 var(--gutter);scrollbar-width:none}
.chip{flex:0 0 auto;height:var(--chip-h);padding:0 12px;border-radius:999px;background:var(--muted);font:600 13px/var(--chip-h) var(--font);color:var(--fg);white-space:nowrap}
.chip.on{background:var(--fg);color:#fff}
.chip.pri{background:var(--primary);color:#fff}
/* product grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;padding:0 var(--gutter)}
.p{position:relative}
.p .ph{aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:#fff;position:relative}
.p .ph img{width:100%;height:100%;object-fit:cover}
.p .tag{position:absolute;top:8px;left:8px;padding:3px 7px;border-radius:6px;background:var(--fg);color:#fff;font:700 10px/1.3 var(--font);letter-spacing:.02em}
.p .tag.sale{background:var(--primary)}
.p .fav{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,.85);display:grid;place-items:center}
.p .fav svg{width:15px;height:15px;stroke:var(--fg);fill:none;stroke-width:1.8}
.p .brand{margin-top:8px;font:600 11px/1.2 var(--font);color:var(--muted-fg);text-transform:uppercase;letter-spacing:.06em}
.p .name{margin-top:2px;font:500 13px/1.3 var(--font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p .price{margin-top:4px;font:700 14px/1.2 var(--font);display:flex;gap:6px;align-items:baseline}
.p .price s{font-weight:500;color:var(--muted-fg);font-size:12px}
.p .price .pct{color:var(--primary);font-size:12px}
/* tabbar */
.tab{position:absolute;left:0;right:0;bottom:0;height:64px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:center;padding-bottom:8px}
.tab a{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 10px/1 var(--font);color:var(--muted-fg);text-decoration:none;letter-spacing:.02em}
.tab a.on{color:var(--fg)}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}