:root{
  --max:1100px;
  --pad:14px;
  --b:#e8e8e8;
  --fg:#111;
  --mut:#666;
  --bg:#fff;
  --r:12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,select{font:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.row{display:flex;gap:12px;align-items:center}
.space{justify-content:space-between}
.mut{color:var(--mut)}
.card{border:1px solid var(--b);border-radius:var(--r);padding:12px;background:#fff}
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr 1fr}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.h1{font-size:20px;font-weight:700;margin:14px 0}
.h2{font-size:16px;font-weight:700;margin:10px 0}
.badge{font-size:12px;border:1px solid var(--b);padding:4px 8px;border-radius:999px}
.price{font-weight:800}
.price s{color:var(--mut);font-weight:500;margin-left:8px}
.btn{border:1px solid #111;background:#111;color:#fff;border-radius:10px;padding:10px 12px;font-weight:700;cursor:pointer}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.outline{background:#fff;color:#111}
.btn.small{padding:8px 10px;border-radius:10px;font-size:14px}
.input{border:1px solid var(--b);border-radius:10px;padding:10px 12px;width:100%}
.select{border:1px solid var(--b);border-radius:10px;padding:10px 12px;width:100%;background:#fff}
.hr{height:1px;background:var(--b);margin:12px 0}

.header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--b);z-index:50}
.header .bar{height:56px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{font-weight:900;letter-spacing:.2px}
.search{flex:1;display:flex;gap:8px}
.search input{flex:1}
.cartBtn{position:relative}
.cartCount{position:absolute;top:-6px;right:-6px;background:#111;color:#fff;border-radius:999px;font-size:12px;line-height:1;padding:4px 6px;min-width:20px;text-align:center}

.drawerBack{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:70}
.drawer{position:fixed;top:0;right:0;width:min(420px,92vw);height:100vh;background:#fff;border-left:1px solid var(--b);transform:translateX(100%);transition:transform .18s ease;z-index:80;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawerBack.open{display:block}
.drawerHead{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--b)}
.drawerBody{padding:14px;overflow:auto;flex:1}
.drawerFoot{padding:14px;border-top:1px solid var(--b)}
.line{display:flex;gap:10px;align-items:flex-start}
.line img{width:64px;height:64px;border-radius:10px;border:1px solid var(--b);object-fit:cover}
.line .meta{flex:1}
.qtyRow{display:flex;align-items:center;gap:8px}
.qtyRow button{width:34px;height:34px;border-radius:10px}
.notice{font-size:13px;color:var(--mut)}
.error{color:#b00020;font-size:13px;margin-top:8px}
.success{color:#0a7a2f;font-size:13px;margin-top:8px}
.tagline{ font-size:14px;letter-spacing:.08em; color:#666;}