:root{
  --bg:#f6f7f9; --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb;
  --brand:#0b5cff; --brand2:#ff2d2d; --ok:#0a7d32; --card:#fff;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:16px}
header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:20}
.topbar{display:flex;gap:12px;align-items:center;padding:12px 16px;flex-wrap:wrap}
.logo{font-weight:900;letter-spacing:.2px;display:flex;gap:8px;align-items:center}
.logo .mark{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--brand2)}
.logo b{color:var(--brand)}
.search{flex:1;display:flex;gap:8px;min-width:260px}
.search input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.pay{background:#111;border-color:#111;color:#fff}
.pill{font-size:12px;border:1px dashed var(--line);padding:2px 8px;border-radius:999px;color:var(--muted)}
.badge{font-size:12px;background:#eef2ff;color:#353f72;padding:2px 6px;border-radius:6px;border:1px solid #dbe3ff;display:inline-block}
.badge.pay{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
nav.tabs{display:flex;gap:8px;padding:8px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:auto}
nav.tabs a{padding:8px 10px;border:1px solid var(--line);border-radius:999px;color:#111;background:#fff;white-space:nowrap}
.grid{display:grid;gap:12px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.card.header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.title{font-weight:800}
.price{font-weight:900}
.muted{color:var(--muted)}
.list-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dashed var(--line)}
.footer{margin-top:40px;padding:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.product-layout{display:grid;grid-template-columns:2fr 1fr;gap:16px}
@media (max-width:1000px){.product-layout{grid-template-columns:1fr}}
.cart-line{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:8px;padding:8px;border-bottom:1px dashed var(--line)}
.cart-line.bundle{background:#f5fbf7;border:1px solid #d7efe0;border-radius:10px}
.cart .qty{display:flex;align-items:center;gap:6px}
.qty button{width:28px;height:28px;border-radius:6px;border:1px solid var(--line);background:#fff}
.totals{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:16px;margin-top:12px}
.save{color:var(--ok);font-weight:800}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.form{display:grid;gap:10px}
.input{display:grid;gap:6px}
.input input, .input textarea, .input select{padding:10px 12px;border:1px solid var(--line);border-radius:10px;width:100%}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.two-col{grid-template-columns:1fr}}
.notice{background:#fff7ed;border:1px solid #ffedd5;border-radius:10px;padding:10px;color:#9a3412}
.radio-group{display:grid;gap:8px;margin-top:8px}