:root{
  --bg:#f6f9ff;
  --text:#0a1a2b;
  --muted:#6b7a90;
  --primary:#0e6efb;
  --primary-600:#0b5adb;
  --primary-100:#eaf1ff;
  --card:#ffffff;
  --border:#e5e9f2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans";
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
.container{max-width:1100px;margin:0 auto;padding:20px}
.flex{display:flex}.between{justify-content:space-between}.center-v{align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid-3{grid-template-columns:1fr}}

.site-header{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--border);
}
.logo{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);font-weight:700}
.logo img{width:36px;height:36px}
.nav a{margin:0 8px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--text)}
.nav a:hover{background:var(--primary-100)}
.nav a.active{background:var(--primary);color:white}
.search{display:flex;gap:8px}
.search input{padding:10px 12px;border:1px solid var(--border);border-radius:12px;min-width:220px;background:white}
.search button{padding:10px 14px;border:none;border-radius:12px;background:var(--primary);color:white;font-weight:600;cursor:pointer}
.search.large input{width:100%;min-width:0}
.search.large{margin:14px 0}

.hero{
  background: linear-gradient(120deg, var(--primary) 0%, #22a2ff 50%, #00d4ff 100%);
  color:white;margin:20px 0;border-radius:24px;overflow:hidden;
}
.hero-inner{padding:60px 28px;text-align:center}
.hero .btn{background:white;color:var(--primary)}
.hero .btn.ghost{background:rgba(255,255,255,.15);color:white;border:1px solid rgba(255,255,255,.3)}

.btn{display:inline-block;padding:12px 16px;border-radius:14px;background:var(--primary);color:white;text-decoration:none;font-weight:700}
.btn.ghost{background:transparent;border:1px solid var(--primary);color:var(--primary)}

.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 6px 18px rgba(16,48,96,.06)}
.card h3{margin-top:0}

.product{display:block;overflow:hidden}
.product img{width:100%;aspect-ratio:1/1.1;object-fit:cover;border-radius:14px}
.product-body h3{margin:.6rem 0}
.price{font-weight:800}
.desc{color:var(--muted)}

.product-detail{display:grid;grid-template-columns: 1fr 1fr;gap:24px}
.product-detail .cover{width:100%;border-radius:20px;object-fit:cover}
.product-detail .info .price{font-size:24px;margin:.4rem 0 1rem}
.product-detail .info select{padding:10px;border-radius:12px;border:1px solid var(--border);margin-right:10px}
.alert{background:#fff9e6;border:1px solid #ffe4a3;padding:12px;border-radius:12px;margin:12px 0}
.alert.success{background:#eaffef;border-color:#b7f0c3}

.site-footer{margin-top:40px;border-top:1px solid var(--border);background:white}
.site-footer .foot-note{padding:12px 0;color:var(--muted);font-size:14px;border-top:1px dashed var(--border);margin-top:10px}

.checklist{padding-left:18px}
.checklist li{margin:.3rem 0}
code{background:var(--primary-100);padding:2px 6px;border-radius:8px;border:1px solid #d8e6ff}