*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#14233f;font:14px Arial}.wrap{max-width:1180px;margin:auto;padding:0 20px}header{background:#fff;border-bottom:1px solid #e5e9f1}.top{height:78px;display:flex;align-items:center;gap:14px}.top img{width:58px;height:58px;object-fit:contain;border-radius:50%}.top h1{font-size:20px;margin:3px 0}.top small{color:var(--p);letter-spacing:2px;font-weight:bold;font-size:10px}.top a{margin-left:auto;color:var(--p);font-weight:bold}.search{display:flex;gap:10px;margin:24px 0}.search>*{height:44px;border:1px solid #dfe5ef;border-radius:10px;padding:0 12px;background:#fff}.search input{flex:1}.search button,.add,.foot button{background:var(--b);color:#fff;border:0;border-radius:10px;padding:0 17px;font-weight:bold}.hero{padding:35px;border-radius:22px;background:linear-gradient(120deg,#0b2d70,#123d91);color:#fff;min-height:210px}.hero b{letter-spacing:3px}.hero h2{font-size:34px;max-width:700px}.head{display:flex;justify-content:space-between;align-items:center;margin:28px 0 14px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-bottom:100px}.card{background:#fff;border:1px solid #e5e9f1;border-radius:16px;overflow:hidden}.photo{height:220px;background:#f0f3f8;display:flex;align-items:center;justify-content:center;color:var(--p)}.photo img{width:100%;height:100%;object-fit:contain}.body{padding:15px}.body small{color:var(--p);font-weight:bold;text-transform:uppercase;font-size:10px}.body h3{font-size:17px}.body p{color:#718099;height:36px;overflow:hidden}.ok{color:#16854d;font-size:12px;margin:9px 0}.out{color:#b33;font-size:12px;margin:9px 0}.add{height:40px;width:100%}.cart{display:none;position:fixed;right:18px;bottom:18px;width:360px;max-width:calc(100% - 36px);background:#fff;padding:15px;border:1px solid #e5e9f1;border-radius:16px;box-shadow:0 15px 40px #0002}.cart.show{display:block}.cart>span{float:right;color:#718099}.cart>div{padding:8px 0;border-bottom:1px solid #eee}.cart button{border:0;background:none;color:#a33}.foot{display:flex;justify-content:space-between;align-items:center}@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.search{flex-wrap:wrap}.search>*{width:100%}.grid{grid-template-columns:1fr 1fr;gap:10px}.photo{height:170px}.hero h2{font-size:25px}}