:root{
  --bg:#ffffff;
  --text:#121212;
  --muted:#4a4a4a;
  --btn:#0b0b0b;
  --btnText:#ffffff;
  --stroke:#d9d9d9;
  --radius:18px;
  --maxw:720px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-monospace, monospace;
  background:var(--bg);
  color:var(--text);
  -webkit-text-size-adjust:100%;
}

.wrap,.page{
  max-width:var(--maxw);
  margin:0 auto;
  padding:28px 18px 40px;
}

.hero{text-align:center}
.avatar{
  width:120px;height:120px;
  margin:0 auto 14px;
  border-radius:999px;
  border:2px solid #111;
  overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover}

.title{margin:0;font-size:28px}
.subtitle{margin:10px 0;color:var(--muted)}

.social{display:flex;justify-content:center;gap:16px}
.icon{
  display:inline-flex;
  width:40px;height:40px;
  border:1px solid var(--stroke);
  border-radius:10px;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--text);
}
.icon svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

.buttons{margin-top:18px;display:flex;flex-direction:column;gap:14px}

.bigBtn{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  background:var(--btn);
  color:var(--btnText);
  border-radius:var(--radius);
  text-decoration:none;
}

.thumb{width:46px;height:46px;border-radius:12px;background:#222}

.btnText{flex:1}
.btnTitle{text-transform:uppercase}
.btnSub{font-size:12px;opacity:.8}

.productCard{
  display:flex;
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  overflow:hidden;
}

.productImage{width:45%}
.productImage img{width:100%;height:100%;object-fit:cover}

.productInfo{padding:14px}

.buyBtn{
  display:inline-block;
  padding:12px;
  background:#111;
  color:#fff;
  text-decoration:none;
  border-radius:12px;
}

@media(max-width:640px){
  .productCard{flex-direction:column}
  .productImage{width:100%}
  .buyBtn{width:100%;text-align:center}
}