:root{color:#18241f;background:#f6f8f6;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}main{max-width:760px;margin:auto;padding:24px 16px 48px}header{padding:26px 8px 18px}.eyebrow,footer{color:#638070;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;font-weight:700}h1{margin:4px 0;font-size:2rem}header p{color:#52645a;margin:4px 0}nav{z-index:2;background:#f6f8f6;gap:8px;padding:8px 0 18px;display:flex;position:sticky;top:0;overflow:auto}button{white-space:nowrap;color:#244333;font:inherit;cursor:pointer;background:#fff;border:1px solid #cbd8cf;border-radius:999px;padding:9px 14px}button:focus-visible{outline-offset:2px;outline:3px solid #7dbd93}.menu>section{padding:12px 0 22px}h2{font-size:1.25rem}.products{gap:12px;display:grid}article{background:#fff;border:1px solid #e1e8e3;border-radius:14px;gap:14px;min-height:112px;padding:12px;display:flex}article img,.placeholder{object-fit:cover;background:#e8efe9;border-radius:10px;flex:none;width:88px;height:88px}h3{margin:2px 0 6px;font-size:1rem}article p{color:#63736a;margin:0 0 8px;font-size:.9rem;line-height:1.35}strong{color:#12633b;margin-top:8px;display:block}small{color:#a04e30;font-weight:600}.unavailable{opacity:.58}.state{text-align:center;place-content:center;min-height:55vh;display:grid}.spinner{border:3px solid #cfe0d4;border-top-color:#217447;border-radius:50%;width:28px;height:28px;margin:auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}footer{text-align:center;padding:28px}@media (width>=700px){.products{grid-template-columns:1fr 1fr}}