
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#f4f4f5;
  --primary:#d90429;
  --secondary:#111111;
  --accent:#6b7280;
  --ring:#e11d48;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);}
.container{max-width:1200px;max-height:1500px;margin:0 auto;padding:30px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.hidden{display:none}
.badge{background:var(--primary);color:#fff;border-radius:999px;padding:2px 8px;font-weight:600;margin-left:6px}
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700}
.nav{display:flex;gap:14px;flex-wrap:wrap}
.nav a{padding:8px 10px;border-radius:12px}
.nav a:hover{background:var(--muted)}
.header-actions{display:flex;align-items:center;gap:10px}
.btn{border:none;border-radius:14px;padding:10px 16px;font-weight:600;cursor:pointer;transition:transform .06s ease, box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 8px 16px rgba(217,4,41,.2)}
.btn.ghost{background:#fff;border:1px solid #e5e7eb;color:#111}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.hero{padding:40px 0}
.hero h1{font-size:32px;margin:0 0 10px}
.hero p{color:#555;margin:0 0 18px}
.category-card{padding:18px;border:1px solid #eee;border-radius:16px;display:block;background:linear-gradient(180deg,#fff, #fafafa);transition:box-shadow .2s, transform .2s}
.category-card:hover{box-shadow:0 16px 32px rgba(0,0,0,.08);transform:translateY(-2px)}
.category-card.ev{border-left:5px solid #22c55e}
.category-card.gas{border-left:5px solid #0ea5e9}
.category-card.hybrid{border-left:5px solid #f59e0b}
.product-card{border:1px solid #eee;border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:box-shadow .2s, transform .2s}
.product-media{aspect-ratio:16/10;background:#f5f5f5;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-body{padding:12px;display:flex;flex-direction:column;gap:8px}
.price{font-weight:700;color:var(--secondary)}
.product-actions{margin-top:auto;display:flex;gap:8px}
.tag{font-size:12px;background:var(--muted);padding:4px 8px;border-radius:999px;display:inline-block}
.footer-inner{text-align:center;padding:30px 0;color:#666}
.back-to-top{position:fixed;right:20px;bottom:20px;border-radius:999px;border:1px solid #eee;padding:10px 12px;background:#fff;box-shadow:0 8px 16px rgba(0,0,0,.08);display:none}
.back-to-top.show{display:block}
.filter-form .row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.filter-form .row.actions{grid-template-columns:1fr 1fr}
.filter-form label{display:flex;flex-direction:column;gap:6px}
.filter-form input, .filter-form select, .form-grid input, .form-grid select, .form-grid textarea{border:1px solid #e5e7eb;border-radius:12px;padding:10px;font-size:14px;outline:none}
input:focus, select:focus, textarea:focus{border-color:var(--ring);box-shadow:0 0 0 4px rgba(225,29,72,.1)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.form-grid .full{grid-column:1/-1}
.radio{display:flex;align-items:center;gap:8px}
.success{border-color:#10b981;background:#ecfdf5}
.cart-item{display:grid;grid-template-columns:80px 1fr auto auto auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #eee}
.cart-item:last-child{border-bottom:none}
.qty{width:72px}
.totals{display:flex;justify-content:flex-end;gap:16px;padding-top:12px;font-weight:700}
@media (max-width: 900px){
  .grid3{grid-template-columns:1fr 1fr}
  .filter-form .row{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
}
