*{box-sizing:border-box}body{margin:0;background:#f5f6f8;color:#202124;font:15px/1.5 system-ui,sans-serif}a{color:#bd3a00;text-decoration:none}header{background:white;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:14px max(16px,calc((100% - 1240px)/2));border-bottom:1px solid #e8eaed}header nav{display:flex;gap:16px;flex:1}.logo{font-size:23px;font-weight:900;color:#202124;white-space:nowrap}main{max-width:1280px;margin:auto;padding:18px}.hero{border-radius:18px;background:linear-gradient(115deg,#a93200,#ec4d00 70%,#fa6e20);color:white;padding:32px}.hero h1{font-size:clamp(25px,5vw,45px);margin:4px 0}.hero p{margin:4px 0}.panel,article,aside,.table,.empty{background:white;border:1px solid #eceef0;border-radius:12px;padding:16px;margin:14px 0}.filters,form{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.panel form{margin-top:12px}.filters input[name=q]{flex:1;min-width:200px}button,.button{display:inline-block;background:#c93c00;color:white;border:0;border-radius:8px;padding:9px 14px;font:inherit;font-weight:650;cursor:pointer}.secondary{background:#4b5158}input,select{max-width:100%;padding:8px;border:1px solid #ced2d7;border-radius:7px;font:inherit}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.grid .empty{grid-column:1/-1}article{margin:0;overflow:hidden}article img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}article h3{overflow-wrap:anywhere}.price{color:#bd3a00;font-weight:bold}.notice{background:#fff2eb;padding:12px;border-radius:8px}.workspace{display:grid;grid-template-columns:185px minmax(0,1fr);gap:18px}.workspace aside{align-self:start}.workspace aside a{display:block;padding:9px;color:#30343a}.workspace aside a.active{background:#fff0e6;color:#a93100;border-radius:8px;font-weight:bold}.table{overflow:auto;padding:0}table{border-collapse:collapse;width:100%;text-align:left}td,th{padding:10px;white-space:nowrap;border-bottom:1px solid #eceef0}.detail{display:flex;gap:20px;flex-wrap:wrap}.detail img{width:min(100%,420px);object-fit:contain}.empty{color:#5c646e;text-align:center}@media(max-width:650px){main{padding:12px}.hero{padding:19px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace{display:block}.workspace aside{display:flex;overflow:auto;white-space:nowrap}.workspace aside a{flex:none}header{gap:9px}header form{width:100%}}

:root{--accent:#d93d00}body{background:#f5f6f8;color:#17191d}header{gap:16px;position:sticky;top:0;z-index:5}.logo{font-size:26px}.searchbar{display:flex;flex:1;min-width:160px;max-width:640px;border:2px solid var(--accent);border-radius:30px;overflow:hidden;background:white}.searchbar input{width:100%;border:0;padding-left:16px;min-width:0}.searchbar button{border-radius:0;white-space:nowrap;background:var(--accent)}header nav{flex:none;gap:5px}header nav button,.categories button{background:white;color:#26282d}.store{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px}.categories{margin:0;align-self:start}.categories strong{display:block;padding:5px 8px 10px}.categories button{display:block;width:100%;text-align:left;margin:3px 0}.categories button[aria-pressed=true]{color:#ac3000;background:#fff0e8}.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 92% 115%,#ffae55 0%,transparent 57%),linear-gradient(115deg,#c23400,#ff5b18);padding:30px 34px}.hero a{display:inline-block;background:white;border-radius:20px;padding:7px 14px;margin-top:12px;font-weight:700}.shelf-title{display:flex;justify-content:space-between;align-items:center}.shelf-title span{font-size:13px;color:#636973}.grid article{padding:10px;border-radius:12px}.grid article img{display:block}.grid h3{margin:8px 0 3px}.grid p{margin:4px 0;font-size:13px}.grid .price{font-size:17px}.badge{display:inline-block;font-size:12px;font-weight:650;background:#e6f4e8;color:#226232;border-radius:5px;padding:2px 6px}.badge.muted{background:#eee;color:#575757}@media(max-width:740px){header{position:static;gap:8px;padding:10px 12px}header .logo{font-size:21px}header .searchbar{order:3;flex-basis:100%;max-width:none}header label{font-size:12px}header nav button{padding:5px}main{padding:10px}.store{display:flex;flex-direction:column;gap:9px}.categories{width:100%;padding:4px 6px}.categories strong{display:none}.categories>div{display:flex;overflow:auto;gap:4px}.categories button{width:auto;white-space:nowrap;padding:6px 10px}.hero{padding:15px 18px}.hero h1{font-size:26px}.hero p{font-size:13px}.hero a{margin-top:6px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.grid h3{font-size:14px}}
