Ecommerce
Category: Footers
I'm sharing you a component below for reference the HTML structure with the exact COMPUTED CSS styles inlined into the style tags. Use this to understand exactly how it looks (dimensions, colors, flexbox behavior):
<div style="display: block; position: static; width: 1520.8px; height: 470.1px; padding: 40px 0px 25px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(0, 204, 59); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><ul style="cursor: crosshair; display: flex; position: static; width: 1520.8px; height: 40px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: center; gap: 10px; opacity: 1; overflow: visible;">
<li style="display: flex; position: static; width: 40px; height: 40px; border: 0px solid rgb(0, 80, 5); border-radius: 2.68435e+07px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(252, 246, 232); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; opacity: 1; overflow: visible; cursor: crosshair;">
<a target="_blank" rel="noopener" data-link-group="footer" data-link-type="footer-social" href="https://www.facebook.com/getjoyfood" title="Get Joy on Facebook" style="display: block; position: static; width: 15px; height: 15px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">
<svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 14222 14222" style="display: inline-block; position: static; width: 15px; height: 15px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;">
<path d="M14222 7112c0 3549.352-2600.418 6491.344-6000 7024.72V9168h1657l315-2056H8222V5778c0-562 275-1111 1159-1111h897V2917s-814-139-1592-139c-1624 0-2686 984-2686 2767v1567H4194v2056h1806v4968.72C2600.418 13603.344 0 10661.352 0 7112 0 3184.703 3183.703 1 7111 1s7111 3183.703 7111 7111zm-8222 7025c362 57 733 86 1111 86-377.945 0-749.003-29.485-1111-86.28zm2222 0v-.28a7107.458 7107.458 0 0 1-167.717 24.267A7407.158 7407.158 0 0 0 8222 14137zm-167.717 23.987C7745.664 14201.89 7430.797 14223 7111 14223c319.843 0 634.675-21.479 943.283-62.013z" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path>
</svg>
<span style="display: block; position: absolute; inset: 11251.2px 801.9px -10441.8px 717.9px; width: 1px; height: 1px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;">Facebook</span>
</a>
</li><li style="display: flex; position: static; width: 40px; height: 40px; border: 0px solid rgb(0, 80, 5); border-radius: 2.68435e+07px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(252, 246, 232); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; opacity: 1; overflow: visible; cursor: crosshair;">
<a target="_blank" rel="noopener" data-link-group="footer" data-link-type="footer-social" href="https://www.instagram.com/getjoyfood" title="Get Joy on Instagram" style="display: block; position: static; width: 15px; height: 15px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">
<svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 32 32" style="display: inline-block; position: static; width: 15px; height: 15px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;">
<path fill="#444" d="M16 3.094c4.206 0 4.7.019 6.363.094 1.538.069 2.369.325 2.925.544.738.287 1.262.625 1.813 1.175s.894 1.075 1.175 1.813c.212.556.475 1.387.544 2.925.075 1.662.094 2.156.094 6.363s-.019 4.7-.094 6.363c-.069 1.538-.325 2.369-.544 2.925-.288.738-.625 1.262-1.175 1.813s-1.075.894-1.813 1.175c-.556.212-1.387.475-2.925.544-1.663.075-2.156.094-6.363.094s-4.7-.019-6.363-.094c-1.537-.069-2.369-.325-2.925-.544-.737-.288-1.263-.625-1.813-1.175s-.894-1.075-1.175-1.813c-.212-.556-.475-1.387-.544-2.925-.075-1.663-.094-2.156-.094-6.363s.019-4.7.094-6.363c.069-1.537.325-2.369.544-2.925.287-.737.625-1.263 1.175-1.813s1.075-.894 1.813-1.175c.556-.212 1.388-.475 2.925-.544 1.662-.081 2.156-.094 6.363-.094zm0-2.838c-4.275 0-4.813.019-6.494.094-1.675.075-2.819.344-3.819.731-1.037.4-1.913.944-2.788 1.819S1.486 4.656 1.08 5.688c-.387 1-.656 2.144-.731 3.825-.075 1.675-.094 2.213-.094 6.488s.019 4.813.094 6.494c.075 1.675.344 2.819.731 3.825.4 1.038.944 1.913 1.819 2.788s1.756 1.413 2.788 1.819c1 .387 2.144.656 3.825.731s2.213.094 6.494.094 4.813-.019 6.494-.094c1.675-.075 2.819-.344 3.825-.731 1.038-.4 1.913-.944 2.788-1.819s1.413-1.756 1.819-2.788c.387-1 .656-2.144.731-3.825s.094-2.212.094-6.494-.019-4.813-.094-6.494c-.075-1.675-.344-2.819-.731-3.825-.4-1.038-.944-1.913-1.819-2.788s-1.756-1.413-2.788-1.819c-1-.387-2.144-.656-3.825-.731C20.812.275 20.275.256 16 .256z" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path><path fill="#444" d="M16 7.912a8.088 8.088 0 0 0 0 16.175c4.463 0 8.087-3.625 8.087-8.088s-3.625-8.088-8.088-8.088zm0 13.338a5.25 5.25 0 1 1 0-10.5 5.25 5.25 0 1 1 0 10.5zM26.294 7.594a1.887 1.887 0 1 1-3.774.002 1.887 1.887 0 0 1 3.774-.003z" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path>
</svg>
<span style="display: block; position: absolute; inset: 11251.2px 751.9px -10441.8px 767.9px; width: 1px; height: 1px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;">Instagram</span>
</a>
</li><li style="display: flex; position: static; width: 40px; height: 40px; border: 0px solid rgb(0, 80, 5); border-radius: 2.68435e+07px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(252, 246, 232); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; opacity: 1; overflow: visible; cursor: crosshair;">
<a target="_blank" rel="noopener" data-link-group="footer" data-link-type="footer-social" href="https://www.tiktok.com/@getjoyfood" title="Get Joy on TikTok" style="display: block; position: static; width: 15px; height: 15px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">
<svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 2859 3333" style="display: inline-block; position: static; width: 15px; height: 15px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;">
<path d="M2081 0c55 473 319 755 778 785v532c-266 26-499-61-770-225v995c0 1264-1378 1659-1932 753-356-583-138-1606 1004-1647v561c-87 14-180 36-265 65-254 86-398 247-358 531 77 544 1075 705 992-358V1h551z" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path>
</svg>
<span style="display: block; position: absolute; inset: 11251.2px 701.9px -10441.8px 817.9px; width: 1px; height: 1px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;">TikTok</span>
</a>
</li>
</ul><div style="display: block; position: static; width: 1520.8px; height: 355.1px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden;">
<div data-image-banner="" data-section-type="image-banner" style="cursor: crosshair; display: flex; position: relative; left: 760.4px; right: -760.4px; width: 1520.8px; height: 355.1px; padding: 22.8px 0px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: center; gap: 8px; opacity: 1; overflow: visible;">
<div style="display: block; position: static; width: 309.5px; height: 309.5px; max-width: 320px; max-height: 320px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<img src="//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=1024" srcset="
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=180 180w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=320 320w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=480 480w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=768 768w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=1024 1024w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=1440 1440w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=1720 1720w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=1920 1920w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=2048 2048w
" sizes="(max-width: 767px) 34.6vw, 20vw" data-src="//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=1024" data-srcset="
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=180 180w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=320 320w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=480 480w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=768 768w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=1024 1024w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=1440 1440w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=1720 1720w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=1920 1920w,
//getjoyfood.com/cdn/shop/files/Golden_Licking_Image.jpg?v=1744742801&width=2048 2048w
" data-sizes="(max-width: 767px) 34.6vw, 20vw" width="1783" height="1193" alt="Golden retriever smiling " loading="lazy" decoding="async" style="cursor: crosshair; display: block; position: static; width: 309.5px; height: 309.5px; max-width: 100%; border: 0px solid rgb(0, 80, 5); border-radius: 12px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip;">
</div>
<div style="display: block; position: static; width: 309.5px; height: 309.5px; max-width: 320px; max-height: 320px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<img src="//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=1024" srcset="
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=180 180w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=320 320w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=480 480w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=768 768w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=1024 1024w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=1440 1440w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=1720 1720w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=1920 1920w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=2048 2048w
" sizes="(max-width: 767px) 34.6vw, 20vw" data-src="//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=1024" data-srcset="
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=180 180w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=320 320w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=480 480w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=768 768w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=1024 1024w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=1440 1440w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=1720 1720w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=1920 1920w,
//getjoyfood.com/cdn/shop/files/Homepage_10.png?v=1750947380&width=2048 2048w
" data-sizes="(max-width: 767px) 34.6vw, 20vw" width="913" height="913" alt="" loading="lazy" decoding="async" style="display: block; position: static; width: 309.5px; height: 309.5px; max-width: 100%; border: 0px solid rgb(0, 80, 5); border-radius: 12px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: crosshair;">
</div>
<div style="display: block; position: static; width: 309.5px; height: 309.5px; max-width: 320px; max-height: 320px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<img src="//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=1024" srcset="
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=180 180w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=320 320w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=480 480w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=768 768w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=1024 1024w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=1440 1440w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=1720 1720w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=1920 1920w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=2048 2048w
" sizes="(max-width: 767px) 34.6vw, 20vw" data-src="//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=1024" data-srcset="
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=180 180w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=320 320w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=480 480w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=768 768w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=1024 1024w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=1440 1440w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=1720 1720w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=1920 1920w,
//getjoyfood.com/cdn/shop/files/Homepage_8.png?v=1750947380&width=2048 2048w
" data-sizes="(max-width: 767px) 34.6vw, 20vw" width="913" height="913" alt="" loading="lazy" decoding="async" style="cursor: crosshair; display: block; position: static; width: 309.5px; height: 309.5px; max-width: 100%; border: 0px solid rgb(0, 80, 5); border-radius: 12px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip;">
</div>
<div style="display: block; position: static; width: 309.5px; height: 309.5px; max-width: 320px; max-height: 320px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<img src="//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=1024" srcset="
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=180 180w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=320 320w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=480 480w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=768 768w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=1024 1024w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=1440 1440w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=1720 1720w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=1920 1920w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=2048 2048w
" sizes="(max-width: 767px) 34.6vw, 20vw" data-src="//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=1024" data-srcset="
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=180 180w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=320 320w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=480 480w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=768 768w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=1024 1024w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=1440 1440w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=1720 1720w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=1920 1920w,
//getjoyfood.com/cdn/shop/files/home_hero_image.jpg?v=1744306211&width=2048 2048w
" data-sizes="(max-width: 767px) 34.6vw, 20vw" width="1440" height="1920" alt="" loading="lazy" decoding="async" style="cursor: crosshair; display: block; position: static; width: 309.5px; height: 309.5px; max-width: 100%; border: 0px solid rgb(0, 80, 5); border-radius: 12px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip;">
</div>
<div style="display: block; position: static; width: 309.5px; height: 309.5px; max-width: 320px; max-height: 320px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<img src="//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=1024" srcset="
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=180 180w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=320 320w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=480 480w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=768 768w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=1024 1024w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=1440 1440w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=1720 1720w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=1920 1920w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=2048 2048w
" sizes="(max-width: 767px) 34.6vw, 20vw" data-src="//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=1024" data-srcset="
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=180 180w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=320 320w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=480 480w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=768 768w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=1024 1024w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=1440 1440w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=1720 1720w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=1920 1920w,
//getjoyfood.com/cdn/shop/files/Homepage_1_f8d1ac3a-5d38-400c-897e-908e6adc7d79.png?v=1750947382&width=2048 2048w
" data-sizes="(max-width: 767px) 34.6vw, 20vw" width="5116" height="3412" alt="" loading="lazy" decoding="async" style="display: block; position: static; width: 309.5px; height: 309.5px; max-width: 100%; border: 0px solid rgb(0, 80, 5); border-radius: 12px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: crosshair;">
</div>
</div>
</div>
</div>
I'm sharing you a component below for reference the HTML structure with the exact COMPUTED CSS styles inlined into the style tags. Use this to understand exactly how it looks (dimensions, colors, flexbox behavior):
<footer data-section-id="footer" data-section-type="footer" style="display: block; position: static; width: 1520.8px; height: 652px; padding: 25px 0px 0px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(0, 204, 59); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">
<div style="cursor: crosshair; display: flex; position: relative; width: 1440px; height: 250px; max-width: 1440px; margin: 0px 40.4px; padding: 0px 40px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; gap: normal 20px; grid-template-columns: repeat(12, minmax(0px, 1fr)); opacity: 1; overflow: visible;"><div style="cursor: crosshair; display: block; position: static; width: 272px; height: 200px; max-width: 365px; margin: 0px 68px 50px 0px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><div style="display: block; position: static; width: 272px; height: 72px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<div style="display: block; position: static; width: 272px; height: 72px; margin: 0px 0px 15px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<p style="cursor: crosshair; display: block; position: static; width: 272px; height: 24px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 18px; font-weight: 700; line-height: 24px; text-align: left; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Subscribe to our newsletter</p>
<div style="display: block; position: static; width: 272px; height: 48px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<p style="cursor: crosshair; display: block; position: static; width: 272px; height: 48px; margin: 0px 0px 20px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 18px; font-weight: 400; line-height: 24px; text-align: left; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Stay in the loop — sign up for updates, offers, and more.</p>
</div>
</div>
<div style="display: block; position: static; width: 272px; height: 0px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div style="transform: translate(0px, 0px); display: block; position: static; width: 272px; height: 0px; border: 0px none rgb(0, 80, 5); background: none 0px 0px / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: left; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><form aria-live="polite" data-testid="klaviyo-form-UHQ2mK" novalidate="" style="display: flex; flex-flow: row; box-sizing: border-box; width: 272px; overflow: visible; max-width: 450px; float: left; border-radius: 0px; border: 0px none rgb(0, 0, 0); background: none 0px 50% / auto no-repeat scroll padding-box border-box rgba(255, 255, 255, 0); padding: 0px; flex: 1 1 0%; position: static; height: 108px; color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: left; opacity: 1;"><div style="display: flex; flex-flow: column; width: 272px; margin: 0px; padding: 0px; justify-content: center; position: static; height: 108px; border: 0px none rgb(0, 0, 0); background: none 0px 0px / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: left; flex: 0 1 auto; opacity: 1; overflow: visible;"><div data-testid="form-row" style="display: flex; flex-flow: row; align-items: stretch; position: relative; width: 272px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0px 0px / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: left; flex: 0 1 auto; opacity: 1; overflow: visible;"><div component="[object Object]" data-testid="form-component" style="display: flex; justify-content: flex-start; padding: 0px; position: relative; background: none 0px 0px / auto repeat scroll padding-box border-box rgba(255, 255, 255, 0); flex: 1 0 0px; width: 272px; height: 48px; border: 0px none rgb(0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: left; flex-flow: row; opacity: 1; overflow: visible;"><div style="display: flex; flex: 1 1 auto; flex-flow: column; align-self: flex-end; position: static; width: 272px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0px 0px / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: left; opacity: 1; overflow: visible;"><input type="email" autocomplete="email" name="email" tabindex="0" placeholder="Enter your email" aria-label="Enter your email" aria-required="true" aria-invalid="false" options="[object Object]" style="box-sizing: border-box; border-radius: 8px; padding: 15px; height: 48px; text-align: left; color: rgb(0, 0, 0); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0px; background: none 0px 0px / auto repeat scroll padding-box border-box rgb(255, 255, 255); border: 0px none rgb(0, 0, 0); cursor: crosshair; display: block; position: static; width: 272px; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip;"><div style="width: 272px; position: relative; display: block; height: 0px; border: 0px none rgb(0, 0, 0); background: none 0px 0px / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: left; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"></div></div></div></div><div data-testid="form-row" style="display: flex; flex-flow: row; align-items: stretch; position: relative; width: 272px; height: 60px; border: 0px none rgb(0, 0, 0); background: none 0px 0px / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: left; flex: 0 1 auto; opacity: 1; overflow: visible;"><div component="[object Object]" data-testid="form-component" style="display: flex; justify-content: flex-start; padding: 10px 0px 0px; position: relative; flex: 1 0 0px; width: 272px; height: 50px; border: 0px none rgb(0, 0, 0); background: none 0px 0px / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; text-align: left; flex-flow: row; opacity: 1; overflow: visible;"><button type="button" tabindex="0" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(202, 247, 192); border-radius: 50px; border: 0px none rgb(0, 0, 0); color: rgb(65, 77, 75); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0px; line-height: 16px; font-style: normal; white-space: normal; padding: 17px 22px; text-align: center; word-break: break-word; align-self: flex-end; cursor: pointer; pointer-events: auto; height: 16px; width: 228px; display: flex; position: relative; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; opacity: 1; overflow: visible;">Subscribe</button></div></div></div><input type="submit" tabindex="-1" value="Submit" style="display: none; position: static; width: auto; height: 48px; padding: 15px; border: 0px none rgb(0, 80, 5); border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; text-align: center; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip; cursor: default;"></form></div></div>
</div>
</div><div style="display: block; position: static; width: 235px; height: 250px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 1 1 0%; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<p style="cursor: crosshair; display: block; position: static; width: 235px; height: 39px; padding: 0px 0px 15px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 20px; font-weight: 400; line-height: 24px; text-align: start; letter-spacing: -0.2px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">
Shop
</p>
<button type="button" data-id="footer" aria-controls="Footer-footer-1" aria-expanded="false" aria-current="false" aria-disabled="false" style="display: none; position: static; width: 100%; height: auto; padding: 15px 0px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; justify-content: space-between; align-items: center; opacity: 1; overflow: visible; cursor: pointer;">
<span style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">
Shop
</span>
<span style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" style="display: block; position: static; width: 19px; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;">
<path d="M21.125 9.75L13 17.875L4.875 9.75" stroke="#005005" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path>
</svg>
</span>
</button>
<div style="display: block; position: static; width: 235px; height: 160px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<div style="display: block; position: static; width: 235px; height: 160px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<div style="display: block; position: static; width: 235px; height: 160px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<div style="display: block; position: static; width: 235px; height: 160px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<ul style="display: block; position: static; width: 235px; height: 160px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><li style="cursor: crosshair; display: list-item; position: static; width: 235px; height: 24px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">
<a href="/products/freeze-dried-raw" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Freeze Dried Raw</a>
</li><li style="display: list-item; position: static; width: 235px; height: 24px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/products/organ-treat-beef" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Superfood Treats</a>
</li><li style="display: list-item; position: static; width: 235px; height: 24px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/products/joy-meal" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Fresh Meals</a>
</li><li style="display: list-item; position: static; width: 235px; height: 24px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/products/calm-supplement" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Supplements</a>
</li><li style="display: list-item; position: static; width: 235px; height: 24px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/products/gift-card-1" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Gift Cards</a>
</li></ul>
</div>
</div>
</div>
</div>
</div><div style="display: block; position: static; width: 235px; height: 250px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 1 1 0%; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<p style="cursor: crosshair; display: block; position: static; width: 235px; height: 39px; padding: 0px 0px 15px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 20px; font-weight: 400; line-height: 24px; text-align: start; letter-spacing: -0.2px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">
Experience
</p>
<button type="button" data-id="footer" aria-controls="Footer-menu_M89QVQ" aria-expanded="false" aria-current="false" aria-disabled="false" style="display: none; position: static; width: 100%; height: auto; padding: 15px 0px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; justify-content: space-between; align-items: center; opacity: 1; overflow: visible; cursor: pointer;">
<span style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">
Experience
</span>
<span style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" style="display: block; position: static; width: 19px; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;">
<path d="M21.125 9.75L13 17.875L4.875 9.75" stroke="#005005" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path>
</svg>
</span>
</button>
<div style="display: block; position: static; width: 235px; height: 58px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<div style="display: block; position: static; width: 235px; height: 58px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<div style="display: block; position: static; width: 235px; height: 58px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<div style="display: block; position: static; width: 235px; height: 58px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<ul style="display: block; position: static; width: 235px; height: 58px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><li style="display: list-item; position: static; width: 235px; height: 24px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/pages/store-locator" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Find in store</a>
</li><li style="display: list-item; position: static; width: 235px; height: 24px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/pages/get-joy-health" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">24/7 televet</a>
</li></ul>
</div>
</div>
</div>
</div>
</div><div style="display: block; position: static; width: 235px; height: 250px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 1 1 0%; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<p style="display: block; position: static; width: 235px; height: 39px; padding: 0px 0px 15px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 20px; font-weight: 400; line-height: 24px; text-align: start; letter-spacing: -0.2px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
Learn
</p>
<button type="button" data-id="footer" aria-controls="Footer-menu_FrTzyL" aria-expanded="false" aria-current="false" aria-disabled="false" style="display: none; position: static; width: 100%; height: auto; padding: 15px 0px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; justify-content: space-between; align-items: center; opacity: 1; overflow: visible; cursor: pointer;">
<span style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">
Learn
</span>
<span style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" style="display: block; position: static; width: 19px; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;">
<path d="M21.125 9.75L13 17.875L4.875 9.75" stroke="#005005" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path>
</svg>
</span>
</button>
<div style="display: block; position: static; width: 235px; height: 92px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<div style="display: block; position: static; width: 235px; height: 92px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<div style="display: block; position: static; width: 235px; height: 92px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<div style="display: block; position: static; width: 235px; height: 92px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<ul style="display: block; position: static; width: 235px; height: 92px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><li style="display: list-item; position: static; width: 235px; height: 24px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/pages/our-story" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Our story</a>
</li><li style="display: list-item; position: static; width: 235px; height: 24px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/pages/our-ingredients" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Our ingredients</a>
</li><li style="display: list-item; position: static; width: 235px; height: 24px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/blogs/dog-food-blog" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Word around the park</a>
</li></ul>
</div>
</div>
</div>
</div>
</div><div style="display: block; position: static; width: 235px; height: 250px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 1 1 0%; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<p style="display: block; position: static; width: 235px; height: 39px; padding: 0px 0px 15px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 20px; font-weight: 400; line-height: 24px; text-align: start; letter-spacing: -0.2px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
Support
</p>
<button type="button" data-id="footer" aria-controls="Footer-menu_UfYhjF" aria-expanded="false" aria-current="false" aria-disabled="false" style="display: none; position: static; width: 100%; height: auto; padding: 15px 0px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; justify-content: space-between; align-items: center; opacity: 1; overflow: visible; cursor: pointer;">
<span style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">
Support
</span>
<span style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" style="display: block; position: static; width: 19px; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;">
<path d="M21.125 9.75L13 17.875L4.875 9.75" stroke="#005005" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path>
</svg>
</span>
</button>
<div style="display: block; position: static; width: 235px; height: 160px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<div style="display: block; position: static; width: 235px; height: 160px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<div style="display: block; position: static; width: 235px; height: 160px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<div style="display: block; position: static; width: 235px; height: 160px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<ul style="display: block; position: static; width: 235px; height: 160px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><li style="display: list-item; position: static; width: 235px; height: 24px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="https://shopify.com/1559199790/account/profile?locale=en&region_country=US" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Log in</a>
</li><li style="display: list-item; position: static; width: 235px; height: 24px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="https://shopify.com/1559199790/account/profile?locale=en&region_country=US" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Create Account</a>
</li><li style="display: list-item; position: static; width: 235px; height: 24px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/pages/faq" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">FAQ & Support</a>
</li><li style="display: list-item; position: static; width: 235px; height: 24px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/pages/register" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Wholesale inquiries</a>
</li><li style="display: list-item; position: static; width: 235px; height: 24px; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/pages/become-affiliate-partner" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Become a partner</a>
</li></ul>
</div>
</div>
</div>
</div>
</div><div style="display: none; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><button type="button" data-id="footer" aria-controls="Footer-lower-menu" aria-expanded="false" aria-current="false" aria-disabled="false" style="display: none; position: static; width: 100%; height: auto; padding: 15px 0px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; justify-content: space-between; align-items: center; opacity: 1; overflow: visible; cursor: pointer;">
<span style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">
Policies
</span>
<span style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" style="display: block; position: static; width: 19px; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;">
<path d="M21.125 9.75L13 17.875L4.875 9.75" stroke="#005005" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: Literata, serif; font-size: 32px; font-weight: 400; line-height: 36px; text-align: center; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path>
</svg>
</span>
</button><div style="display: block; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<div style="display: block; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<div style="display: block; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<ul style="display: block; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><li style="display: list-item; position: static; width: auto; height: auto; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/policies/privacy-policy" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Privacy Policy</a>
</li><li style="display: list-item; position: static; width: auto; height: auto; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/policies/refund-policy" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Refund Policy</a>
</li><li style="display: list-item; position: static; width: auto; height: auto; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/policies/shipping-policy" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Shipping Policy</a>
</li><li style="display: list-item; position: static; width: auto; height: auto; margin: 0px 0px 10px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">
<a href="/policies/terms-of-service" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 16px; font-weight: 700; line-height: 16px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Terms of Service</a>
</li></ul>
</div>
</div>
</div>
</div>
</div>
<div style="display: block; position: static; width: 1520.8px; height: 352px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">
<div style="cursor: crosshair; display: block; position: static; width: 1520.8px; height: 312px; margin: 25px 0px 0px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">
<img src="//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=1024" srcset="
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=180 180w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=320 320w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=480 480w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=768 768w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=1024 1024w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=1440 1440w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=1720 1720w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=1920 1920w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=2048 2048w
" sizes="(max-width: 1439px) 100vw, 1200px" data-src="//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=1024" data-srcset="
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=180 180w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=320 320w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=480 480w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=768 768w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=1024 1024w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=1440 1440w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=1720 1720w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=1920 1920w,
//getjoyfood.com/cdn/shop/files/Layer_0_1.png?v=1751483552&width=2048 2048w
" data-sizes="(max-width: 1439px) 100vw, 1200px" width="1171" height="312" alt="" loading="lazy" decoding="async" style="cursor: crosshair; display: block; position: static; width: 1171px; height: 312px; max-width: 100%; margin: 0px 174.9px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip;">
</div>
<div style="display: block; position: static; width: 1520.8px; height: 40px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(252, 246, 232); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">
<div style="display: flex; position: static; width: 1440px; height: 40px; max-width: 1440px; margin: 0px 40.4px; padding: 0px 40px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: space-between; align-items: center; opacity: 1; overflow: visible;">
<div style="display: block; position: static; width: 234.163px; height: 24px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">
<span style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 12px; font-weight: 700; line-height: 12px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">© Get Joy 2025. All rights reserved.
</span>
</div>
<div style="display: block; position: static; width: 489.888px; height: 24px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><p style="display: none; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">
Policies
</p><div style="display: block; position: static; width: 489.888px; height: 24px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">
<ul style="display: flex; position: static; width: 489.888px; height: 24px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; gap: 30px; opacity: 1; overflow: visible;"><li style="display: list-item; position: static; width: 95.5125px; height: 24px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">
<a href="/policies/privacy-policy" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 12px; font-weight: 700; line-height: 12px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Privacy Policy</a>
</li><li style="display: list-item; position: static; width: 92.4125px; height: 24px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">
<a href="/policies/refund-policy" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 12px; font-weight: 700; line-height: 12px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Refund Policy</a>
</li><li style="display: list-item; position: static; width: 101.225px; height: 24px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">
<a href="/policies/shipping-policy" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 12px; font-weight: 700; line-height: 12px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Shipping Policy</a>
</li><li style="display: list-item; position: static; width: 110.738px; height: 24px; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">
<a href="/policies/terms-of-service" data-link-group="footer" data-link-depth="L0" data-link-type="footer-main" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 80, 5); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 80, 5); font-family: DMSans, sans-serif; font-size: 12px; font-weight: 700; line-height: 12px; text-align: start; text-transform: uppercase; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Terms of Service</a>
</li></ul>
</div>
</div>
</div>
</div>
</div>
</footer>
recreate this component as footer, we want this footer in the middle of the canvas
Created by: LandingHero
