*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f1f3f6;color:#172033}
button,input{font:inherit}button{cursor:pointer}.topbar{background:#2874f0;color:#fff}
.nav{height:64px;display:flex;align-items:center;gap:20px;width:min(1250px,94%);margin:auto}
.logo{font-size:25px;font-weight:800;font-style:italic;white-space:nowrap}.logo small{display:block;font-size:11px;font-weight:600;text-align:right}
.search{flex:1;max-width:620px;padding:12px 16px;border:0;border-radius:3px;outline:none}.nav-btn{background:transparent;border:0;color:#fff;font-weight:700;padding:10px 8px}
.cart-btn{border:0;background:#fff;color:#2874f0;border-radius:3px;padding:11px 18px;font-weight:800}.badge{background:#ff6161;color:#fff;border-radius:12px;padding:2px 7px;font-size:11px;margin-left:3px}
.categories{background:#fff;box-shadow:0 1px 2px #ddd}.category-row{width:min(1250px,94%);margin:auto;display:flex;justify-content:space-between;overflow:auto}
.cat{min-width:105px;text-align:center;padding:14px 8px;border:0;background:#fff;font-weight:700;color:#333}.cat:hover,.cat.active{color:#2874f0}.cat-icon{font-size:25px;display:block;margin-bottom:5px}
main{width:min(1250px,94%);margin:14px auto 60px}.page{display:none}.page.active{display:block}
.hero{background:linear-gradient(110deg,#2874f0,#0d47a1);color:#fff;min-height:260px;padding:42px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;overflow:hidden}
.hero h1{font-size:42px;margin:0 0 10px}.hero p{font-size:17px;max-width:600px;line-height:1.55}.hero-art{font-size:130px}
.section{background:#fff;margin-top:14px;padding:18px}.section-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding-bottom:13px;margin-bottom:15px}.section-head h2{margin:0;font-size:22px}
.view-all{color:#2874f0;border:0;background:none;font-weight:700}.products{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.product{border:1px solid #eee;background:#fff;min-width:0;transition:.15s}.product:hover{box-shadow:0 3px 12px #ccc;transform:translateY(-2px)}
.product-image{height:190px;background:#f8fafc;display:grid;place-items:center;font-size:85px;position:relative}.discount{position:absolute;top:8px;left:8px;background:#e8f5e9;color:#16803c;padding:4px 7px;border-radius:2px;font-size:11px;font-weight:700}
.product-info{padding:12px}.category-name{font-size:11px;color:#878787}.product h3{font-size:14px;margin:6px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rating{display:inline-block;background:#388e3c;color:#fff;font-size:11px;padding:3px 5px;border-radius:3px}
.price{font-weight:800;font-size:17px;margin:8px 0}.old{font-size:12px;color:#888;text-decoration:line-through;margin-left:5px;font-weight:400}
.qty{display:flex;border:1px solid #ddd;height:38px}.qty button{width:36px;border:0;background:#f7f7f7;font-size:19px}.qty span{flex:1;display:grid;place-items:center;font-weight:700}.add{width:100%;height:38px;border:0;background:#ff9f00;color:#fff;font-weight:800}
.form-page{max-width:430px;margin:35px auto;background:#fff;padding:30px}.form-page h1{text-align:center}.form-page label,.modal-box label{display:block;margin:15px 0 6px;font-weight:700;font-size:13px}.form-page input{width:100%;padding:12px;border:1px solid #bbb}.form-page button{width:100%;padding:13px;margin-top:18px;background:#2874f0;color:#fff;border:0;font-weight:800}
.cart-panel,.orders{background:#fff;padding:25px}.cart-line{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px;align-items:center;padding:15px 0;border-bottom:1px solid #eee}.empty{text-align:center;padding:60px}.checkout{background:#fb641b;color:#fff;border:0;padding:14px 30px;font-weight:800;float:right}
.order{border:1px solid #ddd;padding:18px;margin-bottom:12px}.status{color:#16803c;font-weight:800}.footer{background:#172337;color:#ddd;padding:35px;text-align:center}
.modal{display:none;position:fixed;inset:0;background:#0008;z-index:50;align-items:center;justify-content:center;padding:15px}.modal.active{display:flex}.modal-box{background:#fff;width:min(520px,100%);padding:25px;border-radius:4px}.full-input{width:100%;padding:11px;border:1px solid #ccc;margin-bottom:3px}.modal-pay{margin-top:15px}.cancel{margin-top:10px;width:100%}.center{text-align:center}
@media(max-width:1000px){.products{grid-template-columns:repeat(4,1fr)}.hero-art{font-size:90px}}@media(max-width:750px){.products{grid-template-columns:repeat(2,1fr)}.nav{gap:8px}.search{display:none}.hero{padding:25px}.hero h1{font-size:30px}}@media(max-width:430px){.products{grid-template-columns:1fr 1fr}.category-row{justify-content:flex-start}.cat{min-width:88px}}