*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,sans-serif}
body{background:#f5f5f5}
header{padding:14px 5%;display:flex;justify-content:space-between;align-items:center;background:#fff;position:sticky;top:0;z-index:10;border-bottom:1px solid #ddd}
.logo{font-weight:900;font-size:20px;letter-spacing:1px}.logo span{font-weight:400;color:#888}
.cart{font-weight:700;cursor:pointer;background:#000;color:#fff;padding:8px 14px;border-radius:20px}
.hero{text-align:center;padding:50px 5%;background:#000;color:#fff}
.hero h1{font-size:38px;letter-spacing:-1px}.hero p{color:#aaa;margin-top:8px}
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;padding:20px 5%;max-width:1100px;margin:auto}
.card{background:#fff;border-radius:16px;overflow:hidden;border:1px solid #eee;padding-bottom:12px}
.card img{width:100%;height:260px;object-fit:cover;background:#eee}
.card h4{margin:10px 12px 2px}.card .price{margin:0 12px;font-weight:800}
.stock{font-size:11px;margin:6px 12px;display:inline-block;padding:4px 8px;border-radius:12px;background:#e6f5e9}
.btn{width:90%;margin:10px 5%;padding:11px;background:#000;color:#fff;border:none;border-radius:10px;cursor:pointer}
.btn.primary{background:#000}
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);display:flex;justify-content:center;align-items:center;z-index:99}
.hidden{display:none}
.modal-content{background:#fff;width:95%;max-width:400px;padding:20px;border-radius:16px;position:relative;max-height:90vh;overflow:auto}
.close{position:absolute;right:12px;top:8px;font-size:22px;cursor:pointer}
.m-img{width:100%;height:200px;object-fit:cover;border-radius:12px;background:#eee}
label{display:block;text-align:left;font-size:11px;font-weight:700;margin-top:10px}
input,select{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;margin-top:4px}
.error{color:red;font-size:11px}
.cart-item{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px solid #eee}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:20px 5%;background:#111;color:#aaa;font-size:12px}
.teo{display:flex;align-items:center;gap:8px}.teo-logo{width:28px;height:28px;border-radius:50%;background:#fff}.teo a{color:#fff}
.small{font-size:12px;color:#666;margin:6px 0}