{"id":8,"date":"2025-11-03T13:48:22","date_gmt":"2025-11-03T13:48:22","guid":{"rendered":"https:\/\/rosiespantry.co.uk\/?page_id=8"},"modified":"2025-11-04T16:14:04","modified_gmt":"2025-11-04T16:14:04","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/rosiespantry.co.uk\/","title":{"rendered":"Rosies Pantry"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8\" class=\"elementor elementor-8\">\n\t\t\t\t<div class=\"elementor-element elementor-element-55face3 e-con-full e-flex e-con e-parent\" data-id=\"55face3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc06794 elementor-widget elementor-widget-html\" data-id=\"cc06794\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ROSIE'S PANTRY \u2013 Elementor HTML block with fixed popups + Formspree AJAX + wishlist -->\n<style>\n  :root{\n    --brand-green:#5A7D4D; --brand-fox:#B24A2E; --brand-ink:#4A2E2A; --brand-cream:#FAF5EE;\n    --ring:0 0 0 3px rgba(90,125,77,.2);\n  }\n  .rp *{box-sizing:border-box} .rp{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--brand-ink)}\n  .rp .wrap{max-width:1100px;margin:0 auto;padding:0 20px}\n  .rp a{text-decoration:none;color:var(--brand-green)} .rp a:hover{text-decoration:underline}\n\n  \/* Buttons *\/\n  .rp .btns{display:flex;flex-wrap:wrap;gap:12px}\n  .rp .btn{display:inline-block;padding:14px 22px;border-radius:14px;font-weight:600;line-height:1;transition:transform .08s,box-shadow .08s,background .2s,color .2s,border-color .2s}\n  .rp .btn:active{transform:translateY(1px)}\n  .rp .btn-primary{background:var(--brand-green);color:#fff;box-shadow:var(--ring)}\n  .rp .btn-primary:hover{filter:brightness(1.05)}\n  .rp .btn-outline{border:2px solid var(--brand-green);color:var(--brand-green);background:transparent}\n  .rp .btn-outline:hover{background:color-mix(in srgb,var(--brand-green) 8%,#fff)}\n\n  \/* Hero *\/\n  .rp .hero{background:var(--brand-cream)}\n  .rp .hero .grid{display:grid;grid-template-columns:420px 1fr;gap:40px;align-items:center;padding:72px 0}\n  .rp .logo{width:320px;height:320px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.08)}\n  .rp h1{margin:0 0 10px;font-size:clamp(28px,4vw,44px);color:var(--brand-green)}\n  .rp .lead{margin:0 0 22px;font-size:clamp(16px,2.2vw,19px);max-width:46ch}\n  .rp .notice{margin:28px 0 0;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--brand-fox) 10%,#fff);border:1px solid color-mix(in srgb,var(--brand-fox) 25%,#fff);font-weight:600}\n\n  \/* Steps *\/\n  .rp .steps{padding:54px 0}\n  .rp .cards{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}\n  .rp .card{background:#fff;border:1px solid #eee;border-radius:16px;padding:22px;box-shadow:0 8px 30px rgba(0,0,0,.06)}\n  .rp .card h3{margin:10px 0 6px;font-size:20px;color:var(--brand-fox)} .rp .card p{margin:0;line-height:1.55}\n  .rp .icon{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--brand-green) 12%,#fff)}\n  .rp .icon svg{width:22px;height:22px;fill:var(--brand-green)}\n\n  \/* Feature *\/\n  .rp .feature{padding:54px 0;display:grid;gap:28px;grid-template-columns:1.1fr .9fr;align-items:center}\n  .rp .frame{background:#fff;border:1px solid #eee;border-radius:22px;padding:14px;box-shadow:0 8px 30px rgba(0,0,0,.06);text-align:center}\n  .rp .rosie-photo{display:inline-block;width:100%;max-width:300px;height:auto;border-radius:18px;object-fit:cover;box-shadow:0 10px 28px rgba(0,0,0,.08)}\n\n  \/* Split *\/\n  .rp .split{background:var(--brand-cream);padding:48px 0}\n  .rp .rows{display:grid;grid-template-columns:1fr 1fr;gap:22px}\n  .rp .panel{background:#fff;border:1px solid #eee;border-radius:16px;padding:22px;box-shadow:0 8px 30px rgba(0,0,0,.06)}\n  .rp .panel h3{margin:0 0 8px;color:var(--brand-green)}\n\n  \/* Footer *\/\n  .rp .footer{padding:30px 0 50px;color:#6b5b58;font-size:14px}\n  .rp .mini{display:flex;gap:16px;flex-wrap:wrap;align-items:center}\n  .rp .dot{width:6px;height:6px;border-radius:50%;background:#d7cdc8}\n\n  \/* ===== Popups (GLOBAL selectors so they work outside .rp) ===== *\/\n  .modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:999999}\n  .modal.open{display:flex}\n  .dialog{background:#fff;width:100%;max-width:560px;border-radius:16px;box-shadow:0 20px 70px rgba(0,0,0,.25);overflow:hidden}\n  .dialog header{padding:16px 18px;background:var(--brand-cream);border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}\n  .dialog header h3{margin:0;color:var(--brand-green)}\n  .dialog .content{padding:18px}\n  .dialog label{display:block;margin:10px 0 6px}\n  .dialog input,.dialog textarea{width:100%;padding:12px;border:1px solid #d9d9d9;border-radius:12px;font:inherit}\n  .dialog .actions{display:flex;gap:10px;justify-content:flex-end;padding:16px 18px;border-top:1px solid #eee}\n  .xbtn{background:transparent;border:0;font-size:18px;cursor:pointer;color:#333}\n  .small{font-size:12px;color:#6b5b58;margin-top:6px}\n\n  @media (max-width:960px){\n    .rp .hero .grid{grid-template-columns:1fr;text-align:center}\n    .rp .lead{margin-inline:auto}\n    .rp .btns{justify-content:center}\n    .rp .cards{grid-template-columns:1fr}\n    .rp .feature{grid-template-columns:1fr}\n    .rp .rows{grid-template-columns:1fr}\n  }\n  \/* Compact modal spacing + stepper *\/\n.dialog .content { padding:16px; }\n.dialog label { margin:6px 0 4px; }\n.dialog input, .dialog textarea, .dialog select { padding:10px 12px; }\n.dialog .actions { padding:12px 16px; }\n\n.stepper {\n  display:flex; gap:8px; align-items:center; padding:10px 16px; border-bottom:1px solid #eee; background:#faf7f2;\n}\n.stepper .dot {\n  width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;\n  border:2px solid var(--brand-green); color:var(--brand-green); font-weight:700; font-size:12px;\n}\n.stepper .active .dot { background:var(--brand-green); color:#fff; }\n.stepper .label { font-weight:600; color:#4A2E2A; font-size:13px; }\n.stepper .item { display:flex; gap:8px; align-items:center; opacity:.6 }\n.stepper .active { opacity:1 }\n.stepper .sep { flex:1; height:2px; background:#e5e2de; border-radius:2px; }\n\n.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }\n@media (max-width:600px){ .grid-2{ grid-template-columns:1fr; } }\n\n.checkbox-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }\n@media (max-width:600px){ .checkbox-grid{ grid-template-columns:1fr; } }\n\n.small-note { font-size:12px; color:#6b5b58; margin-top:6px; }\n\/* Inputs *\/\n.dialog .field { margin:8px 0 }\n.dialog .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px }\n@media (max-width:600px){ .dialog .grid-2{ grid-template-columns:1fr } }\n\n.dialog input[type=\"text\"],\n.dialog input[type=\"email\"],\n.dialog input[type=\"tel\"],\n.dialog input[type=\"file\"],\n.dialog select,\n.dialog textarea{\n  width:100%; padding:10px 12px; border:1px solid #d9d9d9; border-radius:12px; font:inherit;\n}\n\n\/* Checkbox rows *\/\n.checkrow{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 16px; margin:6px 0 }\n@media (max-width:600px){ .checkrow{ grid-template-columns:1fr } }\n.check{ display:flex; align-items:center; gap:8px; line-height:1.3 }\n\n\/* Repeater blocks *\/\n.pet{ border:1px solid #eee; border-radius:14px; padding:12px; margin:10px 0; background:#fff }\n.pet .pethead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px }\n.pet .pettitle{ font-weight:600; color:var(--brand-green) }\n.pet .remove-pet{ border:0; background:transparent; color:#B24A2E; cursor:pointer; font-weight:600 }\n.add-pet{ margin-top:6px }\n.small-note{ font-size:12px; color:#6b5b58 }\n\/* Nicer select UI *\/\n.dialog select{\n  background:#fff;\n  appearance:none; -webkit-appearance:none; -moz-appearance:none;\n  background-image:\n    linear-gradient(45deg, transparent 50%, #8a8a8a 50%),\n    linear-gradient(135deg, #8a8a8a 50%, transparent 50%),\n    linear-gradient(to right, #ddd, #ddd);\n  background-position:\n    calc(100% - 16px) 52%,\n    calc(100% - 9px) 52%,\n    calc(100% - 2.2em) 50%;\n  background-size: 6px 6px, 6px 6px, 1px 1.6em;\n  background-repeat:no-repeat;\n  padding-right:2.6em;\n}\n.check input{ margin:0; } \/* checkbox alignment *\/\n\/* Make dialog scroll properly and keep header visible *\/\n.dialog{\n  max-height:92vh;            \/* never taller than viewport *\/\n  display:flex;\n  flex-direction:column;\n}\n.stepper{ position:sticky; top:0; z-index:2; }   \/* stays visible *\/\n.dialog .content{\n  flex:1;                     \/* take remaining height *\/\n  overflow:auto;              \/* inner scrolling *\/\n  padding:16px 18px;\n}\n\n\/* Keep action buttons visible while scrolling *\/\n.step .actions{\n  position:sticky;\n  bottom:0;\n  background:#fff;\n  border-top:1px solid #eee;\n  padding:12px 16px;\n  margin-top:10px;\n}\n\n\/* Minor responsive help for wide pet blocks *\/\n.pet{ margin:10px 0; }\n.add-pet{ width:100%; }\n\n\n<\/style>\n\n<section class=\"rp\" aria-label=\"Rosie\u2019s Pantry landing\">\n  <!-- HERO -->\n  <div class=\"hero\">\n    <div class=\"wrap\">\n      <div class=\"grid\">\n        <div>\n          <img decoding=\"async\" class=\"logo\" src=\"https:\/\/rosiespantry.co.uk\/wp-content\/uploads\/2025\/11\/Rosies-Pantry.png\" alt=\"Rosie\u2019s Pantry logo\">\n        <\/div>\n        <div>\n          <h1>Every Paw Deserves a Full Bowl<\/h1>\n          <p class=\"lead\">\n            Rosie\u2019s Pantry is a small pet food bank helping local pets and families in need.\n            If you can give, thank you. If you need help, we\u2019re here \u2014 with kindness and no judgment.\n          <\/p>\n          <div class=\"btns\">\n            <a class=\"btn btn-primary\" href=\"#\" data-open=\"requestModal\">Request Help<\/a>\n            <a class=\"btn btn-outline\" href=\"#\" data-open=\"donateModal\">Donate Food \/ \u00a3<\/a>\n          <\/div>\n          <div class=\"notice\" role=\"status\" aria-live=\"polite\">\n            <strong>Most needed this week:<\/strong> Dry dog food (medium), wet cat food, litter. \n            <a href=\"https:\/\/www.amazon.co.uk\/hz\/wishlist\/ls\/1S9ANK5VGS4LJ?ref_=wl_share\" target=\"_blank\" rel=\"noopener\">See wish list<\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- HOW IT WORKS -->\n  <div class=\"steps\">\n    <div class=\"wrap\">\n      <div class=\"cards\">\n        <div class=\"card\">\n          <span class=\"icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 12v8a2 2 0 0 1-2 2h-4V12h6Zm-8 0v10H8a2 2 0 0 1-2-2v-8h6Zm8-6h-2.18a3 3 0 0 0-5.64-1.2L12 5.2l-.18-.4A3 3 0 0 0 6.18 6H4a2 2 0 0 0-2 2v2h20V8a2 2 0 0 0-2-2ZM8.5 4a1.5 1.5 0 1 1 0 3H6.18A1.18 1.18 0 0 1 5 5.82C5 5.37 5.37 5 5.82 5H8.5Zm7 0a1.5 1.5 0 1 1 0 3h-2.68A1.82 1.82 0 0 1 11 5.18C11 4.53 11.53 4 12.18 4H15.5Z\"\/><\/svg><\/span>\n          <h3>Donate<\/h3>\n          <p>Drop food locally or give \u00a3 \u2014 every bit helps keep bowls full.<\/p>\n        <\/div>\n        <div class=\"card\">\n          <span class=\"icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 2h6a2 2 0 0 1 2 2h1a2 2 0 0 1 2 2v12a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V6a2 2 0 0 1 2-2h1a2 2 0 0 1 2-2Zm0 2v2h6V4H9Z\"\/><\/svg><\/span>\n          <h3>Request<\/h3>\n          <p>Tell us what your pet needs. We answer kindly and quickly.<\/p>\n        <\/div>\n        <div class=\"card\">\n          <span class=\"icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M3 7a2 2 0 0 1 2-2h9v10H4a1 1 0 0 1-1-1V7Zm11 3h3.5l3 3V15a1 1 0 0 1-1 1H14V10Zm-6.5 9a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm11 0a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z\"\/><\/svg><\/span>\n          <h3>Collect \/ Deliver<\/h3>\n          <p>We\u2019ll arrange a pick-up or collection that works for you.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- MEET ROSIE -->\n  <div class=\"feature\">\n    <div class=\"wrap\">\n      <div>\n        <h2 style=\"margin:0 0 10px;\">Meet Rosie<\/h2>\n        <p style=\"margin:0 0 12px;max-width:58ch\">\n          Rosie is our gentle rescue lab \u2014 with a little <strong>half-heart<\/strong> patch on her chest and a big heart for helping.\n          She\u2019s the face of our mission: no judgment, just kindness for pets and the people who love them.\n        <\/p>\n        <p style=\"margin:0 0 12px;max-width:58ch\">\n  Rosie had a tough start and is scheduled to have the end of her tail removed this month after an old injury.\n  She\u2019s already finding her confidence again with lots of love, gentle walks, and full bowls. Thank you for helping\n  us help pets like Rosie. \ud83d\udc9b\n<\/p>\n\n        <div class=\"btns\">\n          <a class=\"btn btn-primary\" href=\"#\" data-open=\"requestModal\">Need a hand?<\/a>\n          <a class=\"btn btn-outline\" href=\"#\" data-open=\"donateModal\">Want to help?<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"wrap\">\n      <div class=\"frame\">\n        <img decoding=\"async\" class=\"rosie-photo\" src=\"https:\/\/rosiespantry.co.uk\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-10-17-at-23.33.34_b27e51e5.jpg\" alt=\"Rosie the fox-red Labrador\">\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- SPLIT CTA -->\n  <div class=\"split\">\n    <div class=\"wrap\">\n      <div class=\"rows\">\n        <div class=\"panel\">\n          <h3>Need support?<\/h3>\n          <p>If you\u2019re struggling to feed your pet, please reach out. We\u2019re here to help with kindness and dignity.<\/p>\n          <div class=\"btns\"><a class=\"btn btn-primary\" href=\"#\" data-open=\"requestModal\">Request Help<\/a><\/div>\n        <\/div>\n        <div class=\"panel\">\n          <h3>Want to help out?<\/h3>\n          <p>Food tins, bags, or \u00a3 \u2014 every donation keeps tails wagging. Thank you for supporting Rosie\u2019s Pantry.<\/p>\n          <div class=\"btns\">\n            <a class=\"btn btn-outline\" href=\"#\" data-open=\"donateModal\">Donate Items <\/a>\n            <a class=\"btn btn-outline\" href=\"https:\/\/www.amazon.co.uk\/hz\/wishlist\/ls\/1S9ANK5VGS4LJ?ref_=wl_share\" target=\"_blank\" rel=\"noopener\">Wish List<\/a>\n             <a class=\"btn btn-outline\" href=\"https:\/\/www.gofundme.com\/f\/risoe-pantry-pet-food-bank\" target=\"_blank\" rel=\"noopener\">GoFundMe<\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- FOOTER -->\n  <div class=\"footer\">\n    <div class=\"wrap mini\">\n      <span>&copy; <span id=\"year\"><\/span> Rosie\u2019s Pantry<\/span><span class=\"dot\"><\/span>\n      <span><a href=\"\/about\">About<\/a><\/span><span class=\"dot\"><\/span>\n      <span><a href=\"\/contact\">Contact<\/a><\/span><span class=\"dot\"><\/span>\n      <span><a href=\"\/privacy\">Privacy<\/a><\/span>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- POPUPS (GLOBAL, not scoped) -->\n<div class=\"modal\" id=\"requestModal\" aria-hidden=\"true\" role=\"dialog\" aria-label=\"Request Help form\">\n  <div class=\"dialog\">\n    <div class=\"stepper\" id=\"reqStepper\">\n  <div class=\"item active\"><span class=\"dot\">1<\/span><span class=\"label\">About you<\/span><\/div>\n  <div class=\"sep\"><\/div>\n  <div class=\"item\"><span class=\"dot\">2<\/span><span class=\"label\">About pet<\/span><\/div>\n  <div class=\"sep\"><\/div>\n  <div class=\"item\"><span class=\"dot\">3<\/span><span class=\"label\">Help needed<\/span><\/div>\n  <div class=\"sep\"><\/div>\n  <div class=\"item\"><span class=\"dot\">4<\/span><span class=\"label\">Agreements<\/span><\/div>\n<\/div>\n\n\n    <header style=\"display:none\"><h3>Request Help<\/h3><button class=\"xbtn\" data-close>&times;<\/button><\/header>\n\n    <!-- Set your real Formspree ID below -->\n    <form\n  class=\"content js-form\"\n  id=\"requestForm\"\n  data-formspree=\"mqagoryg\"\n  action=\"https:\/\/formspree.io\/f\/mqagoryg\"\n  method=\"POST\">\n\n      <!-- STEP 1: ABOUT YOU -->\n      <div class=\"step\" data-step=\"1\">\n        <div class=\"grid-2\">\n          <label>Your name* <input type=\"text\" name=\"name\" required><\/label>\n          <label>Email* <input type=\"email\" name=\"email\" required><\/label>\n        <\/div>\n        <div class=\"grid-2\">\n          <label>Phone (optional) <input type=\"tel\" name=\"phone\"><\/label>\n          <label>Postcode\/Town* <input type=\"text\" name=\"location\" required><\/label>\n        <\/div>\n        <div class=\"actions\">\n          <button type=\"button\" class=\"xbtn\" data-close>Cancel<\/button>\n          <button type=\"button\" class=\"btn btn-primary\" data-next>Next<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"step\" data-step=\"2\" style=\"display:none\">\n  <div id=\"petsRepeater\">\n\n    <!-- PET ITEM (template instance 0) -->\n    <div class=\"pet\" data-index=\"0\">\n      <div class=\"pethead\">\n        <div class=\"pettitle\">Pet #1<\/div>\n        <button type=\"button\" class=\"remove-pet\" style=\"display:none\">Remove<\/button>\n      <\/div>\n\n      <div class=\"grid-2\">\n        <label class=\"field\">Type of pet* \n          <select name=\"pets[0][type]\" required>\n            <option value=\"\" disabled selected>Select type\u2026<\/option>\n            <option>Dog<\/option>\n            <option>Cat<\/option>\n            <option>Other<\/option>\n          <\/select>\n        <\/label>\n\n        <label class=\"field\">Breed (or description)\n          <input type=\"text\" name=\"pets[0][breed]\" placeholder=\"e.g., Labrador mix\">\n        <\/label>\n      <\/div>\n\n      <fieldset class=\"field\" style=\"border:0;padding:0;margin:2px 0 8px\">\n        <legend style=\"font-weight:600;margin-bottom:6px\">What do you need?* (tick all that apply)<\/legend>\n        <div class=\"checkrow\">\n          <label class=\"check\"><input type=\"checkbox\" name=\"pets[0][needs][]\" value=\"Wet food\">Wet food<\/label>\n          <label class=\"check\"><input type=\"checkbox\" name=\"pets[0][needs][]\" value=\"Dry food\">Dry food<\/label>\n          <label class=\"check\"><input type=\"checkbox\" name=\"pets[0][needs][]\" value=\"Treats\">Treats<\/label>\n          <label class=\"check\"><input type=\"checkbox\" name=\"pets[0][needs][]\" value=\"Poo bags\">Poo bags<\/label>\n          <label class=\"check\"><input type=\"checkbox\" name=\"pets[0][needs][]\" value=\"Toys\">Toys<\/label>\n          <label class=\"check\"><input type=\"checkbox\" class=\"needs-other\" name=\"pets[0][needs][]\" value=\"Other\">Other<\/label>\n        <\/div>\n      <\/fieldset>\n\n      <div class=\"field needs-other-wrap\" style=\"display:none\">\n        <label>Describe the \u201cOther\u201d item\n          <input type=\"text\" name=\"pets[0][needs_other]\" placeholder=\"e.g., puppy pads, cat litter, sensitive stomach food\">\n        <\/label>\n      <\/div>\n        <div class=\"grid-2\">\n  <label class=\"field\">Weight (kg)\n    <input type=\"number\" name=\"pets[0][weight_kg]\" inputmode=\"decimal\" step=\"0.1\" min=\"0\" placeholder=\"e.g., 22.5\">\n  <\/label>\n  <!-- keep this empty column to balance layout or add another small field later -->\n  <div><\/div>\n<\/div>\n\n      <label class=\"field\">Diet notes \/ allergies (optional)\n        <textarea name=\"pets[0][diet_notes]\" rows=\"3\" placeholder=\"Grain-free, chicken allergy, brand\/size preferences\u2026\"><\/textarea>\n      <\/label>\n    <\/div>\n    <!-- \/PET ITEM -->\n\n  <\/div>\n\n  <button type=\"button\" class=\"btn btn-outline add-pet\" id=\"addPetBtn\">+ Add another pet<\/button>\n  <p class=\"small-note\">You can add each pet that needs help. Photos are optional.<\/p>\n\n  <div class=\"actions\">\n    <button type=\"button\" class=\"btn btn-outline\" data-back>Back<\/button>\n    <button type=\"button\" class=\"btn btn-primary\" data-next>Next<\/button>\n  <\/div>\n<\/div>\n\n<!-- STEP 3: HELP NEEDED -->\n<div class=\"step\" data-step=\"3\" style=\"display:none\">\n  <p>Tell us a bit about the type of help you need \u2014 it helps us prepare the right food parcels for your pets. \ud83d\udc9b<\/p>\n\n  <fieldset class=\"field\" style=\"border:0;padding:0;margin:2px 0 8px\">\n    <legend style=\"font-weight:600;margin-bottom:6px\">Which best describes your current need?*<\/legend>\n    <div class=\"checkrow\">\n      <label class=\"check\"><input type=\"radio\" name=\"help_type\" value=\"Full weekly food support\" required> I need a full week\u2019s worth of food for my pet(s)<\/label>\n      <label class=\"check\"><input type=\"radio\" name=\"help_type\" value=\"Top-up support (have some food)\"> I have some food (like meat) but need top-ups such as dry mix, tins, or treats<\/label>\n      <label class=\"check\"><input type=\"radio\" name=\"help_type\" value=\"Emergency single meal\"> I just need help with a small emergency portion \/ single meal<\/label>\n    <\/div>\n  <\/fieldset>\n\n  <label class=\"field\">Anything else we should know?\n    <textarea name=\"help_notes\" rows=\"3\" placeholder=\"e.g. special diet, large breed portions, or how many pets you\u2019re feeding\"><\/textarea>\n  <\/label>\n\n  <div class=\"actions\">\n    <button type=\"button\" class=\"btn btn-outline\" data-back>Back<\/button>\n    <button type=\"button\" class=\"btn btn-primary\" data-next>Next<\/button>\n  <\/div>\n<\/div>\n\n\n      <!-- STEP 4: AGREEMENTS -->\n      <div class=\"step\" data-step=\"3\" style=\"display:none\">\n        <label style=\"display:flex;gap:10px;align-items:flex-start\">\n          <input type=\"checkbox\" required name=\"consent_support\" value=\"yes\" style=\"margin-top:4px\">\n          <span>I consent to Rosie\u2019s Pantry storing my details to process this request. We won\u2019t share your info without permission.<\/span>\n        <\/label>\n\n        <label style=\"display:flex;gap:10px;align-items:flex-start\">\n          <input type=\"checkbox\" name=\"consent_social\" value=\"yes\" style=\"margin-top:4px\">\n          <span>I\u2019m happy for my pet\u2019s name\/photo\/story to be shared on Rosie\u2019s Pantry social media (optional).<\/span>\n        <\/label>\n        <label style=\"display:flex;gap:10px;align-items:flex-start\">\n  <input type=\"checkbox\" name=\"can_donate\" value=\"yes\" style=\"margin-top:4px\">\n  <span>If you\u2019re able, would you be happy to make a small donation (even \u00a31 or \u00a32) to help us keep other pets fed too? (No Judgement if you cannot , the person delivering will not know how you have answered this) <\/span>\n<\/label>\n\n        <p class=\"small-note\">Submitting sends your request to our team. We\u2019ll aim to reply within 48 hours.<\/p>\n\n        <div class=\"actions\">\n          <button type=\"button\" class=\"btn btn-outline\" data-back>Back<\/button>\n          <button type=\"submit\" class=\"btn btn-primary\">Send Request<\/button>\n        <\/div>\n      <\/div>\n    <\/form>\n  <\/div>\n<\/div>\n\n\n\n\n<div class=\"modal\" id=\"donateModal\" aria-hidden=\"true\" role=\"dialog\" aria-label=\"Donation interest form\">\n  <div class=\"dialog\">\n    <header><h3>Donate \u2013 We\u2019ll Reach Out<\/h3><button class=\"xbtn\" data-close aria-label=\"Close\">&times;<\/button><\/header>\n    <form class=\"content js-form\" data-formspree=\"mvgvnevp\">\n      <label>Your name* <input type=\"text\" name=\"name\" required><\/label>\n      <label>Email* <input type=\"email\" name=\"email\" required><\/label>\n      <label>What would you like to donate?* <textarea name=\"donation\" rows=\"3\" required placeholder=\"Food, treats, toys, \u00a3 etc.\"><\/textarea><\/label>\n      <label>How can we help? <textarea name=\"notes\" rows=\"3\" placeholder=\"Drop-off, collection, questions\u2026\"><\/textarea><\/label>\n      <label style=\"display:flex;gap:10px;align-items:flex-start\">\n  <input type=\"checkbox\" required name=\"consent\" value=\"yes\" style=\"margin-top:4px\">\n  <span>I consent to Rosie\u2019s Pantry storing my details to arrange my donation and contact me about next steps.<\/span>\n<\/label>\n\n      <div class=\"actions\">\n        <button type=\"button\" class=\"btn btn-outline\" data-close>Cancel<\/button>\n        <button type=\"submit\" class=\"btn btn-primary\">Send<\/button>\n      <\/div>\n    <\/form>\n  <\/div>\n<\/div>\n<iframe name=\"fs_sink\" style=\"display:none;width:0;height:0;border:0\" aria-hidden=\"true\"><\/iframe>\n\n<script>\n  \/\/ Year\n  (function(){var y=document.getElementById('year');if(y)y.textContent=new Date().getFullYear();})();\n\n  \/\/ Open\/close modals\n  document.addEventListener('click',function(e){\n    const open = e.target.getAttribute('data-open');\n    const wantsClose = e.target.hasAttribute('data-close') || e.target.classList.contains('modal');\n    if(open){ e.preventDefault(); document.getElementById(open)?.classList.add('open'); }\n    if(wantsClose){ e.preventDefault(); e.target.closest('.modal')?.classList.remove('open'); }\n  });\n  document.addEventListener('keydown',function(e){\n    if(e.key==='Escape'){ document.querySelectorAll('.modal.open').forEach(m=>m.classList.remove('open')); }\n  });\n\n  \/\/ ---------- Robust Formspree submit (AJAX -> iframe POST -> mailto) ----------\n  async function submitFormspree(form){\n    const id = form.getAttribute('data-formspree'); \/\/ e.g. mqagoryg\n    if(!id){ return fallbackMailto(form); }\n\n    const data = new FormData(form);\n\n    \/\/ 1) Try AJAX fetch\n    try{\n      const res = await fetch(`https:\/\/formspree.io\/f\/${id}`, {\n        method:'POST',\n        body:data,\n        headers:{ 'Accept':'application\/json' },\n        credentials:'omit',\n        mode:'cors'\n      });\n\n      if(res.ok){ showThanks(form); return true; }\n\n      \/\/ Show helpful error if Formspree responds but not ok\n      let msg = 'Submission error.';\n      try {\n        const j = await res.json();\n        if(j?.errors?.length) msg = j.errors.map(e=>e.message).join(' ');\n        if(j?.error) msg = j.error;\n      } catch(_) {}\n      if(res.status===400) msg += ' (Tip: verify the form via the confirmation email from Formspree.)';\n      if(res.status===403) msg += ' (Tip: add your site under Form Settings \u2192 Allowed domains.)';\n      if(res.status===422) msg += ' (Tip: check required fields or spam settings.)';\n      showError(form, msg);\n      return false;\n\n    }catch(err){\n      \/\/ 2) Fallback: regular POST to Formspree in a hidden iframe\n      try{\n        const originalTarget = form.getAttribute('target');\n        const originalAction = form.getAttribute('action');\n        form.setAttribute('target', 'fs_sink');\n        form.setAttribute('action', `https:\/\/formspree.io\/f\/${id}`);\n        form.submit();\n        \/\/ restore attributes\n        if(originalTarget !== null) form.setAttribute('target', originalTarget); else form.removeAttribute('target');\n        if(originalAction !== null) form.setAttribute('action', originalAction); else form.removeAttribute('action');\n        showThanks(form);\n        return true;\n      }catch(e){\n        \/\/ 3) Last resort: mailto\n        return fallbackMailto(form);\n      }\n    }\n  }\n\n  function showThanks(form){\n    form.innerHTML = '<p><strong>Thank you!<\/strong> We\u2019ve received your message and will be in touch soon.<\/p>' +\n                     '<div class=\"actions\"><button type=\"button\" class=\"btn btn-primary\" data-close>Close<\/button><\/div>';\n  }\n  function showError(form, msg){\n    form.insertAdjacentHTML('afterbegin',\n      `<div style=\"margin:0 0 10px;padding:10px;border:1px solid #f3c0c0;background:#fff3f3;border-radius:10px;color:#7a2b2b\">${msg}<\/div>`);\n  }\n  function fallbackMailto(form){\n    const to='hello@rosiespantry.co.uk';\n    const subject='Rosie\u2019s Pantry form submission';\n    const data = new FormData(form);\n    let body=''; for(const [k,v] of data.entries()){ body+=`${k}: ${v}\\n`; }\n    window.location.href = `mailto:${to}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;\n    return false;\n  }\n\n  \/\/ Bind all forms with .js-form\n  document.querySelectorAll('form.js-form').forEach(f=>{\n    f.addEventListener('submit', function(ev){\n      ev.preventDefault();\n      submitFormspree(this);\n    });\n  });\n<\/script>\n\n<script>\n  (function(){\n    const modal = document.getElementById('requestModal');\n    if(!modal) return;\n    const form = modal.querySelector('#requestForm');\n    const steps = Array.from(form.querySelectorAll('.step'));\n    const stepper = document.getElementById('reqStepper');\n    let idx = 0;\n\n    function updateUI(){\n      steps.forEach((s,i)=> s.style.display = i===idx ? 'block' : 'none');\n      const items = stepper.querySelectorAll('.item');\n      items.forEach((it,i)=> it.classList.toggle('active', i===idx));\n    }\n\n    function validateStep(i){\n      \/\/ Simple required check only for fields in the current step\n      const fields = steps[i].querySelectorAll('[required]');\n      for(const f of fields){\n        if(f.type === 'checkbox'){\n          \/\/ At least one pet_type or consent checkbox\n          const groupName = f.name.replace('[]','');\n          const group = steps[i].querySelectorAll(`input[name=\"${groupName}\"], input[name=\"${groupName}[]\"]`);\n          const anyChecked = Array.from(group).some(x=>x.checked);\n          if(!anyChecked){ f.focus(); return false; }\n        }else if(!f.value.trim()){\n          f.focus(); return false;\n        }\n      }\n   if(i===1){\n  if(!(window.__petsHasNeeds && window.__petsHasNeeds())){\n    alert('Please select at least one needed item for your pet(s).');\n    return false;\n  }\n}\n\/\/ ensure they pick a help_type on new step\nif(i===2){\n  const checked = form.querySelector('input[name=\"help_type\"]:checked');\n  if(!checked){\n    alert('Please tell us what type of help you need.');\n    return false;\n  }\n}\n\n\n      return true;\n    }\n\n    form.addEventListener('click', function(e){\n      if(e.target.matches('[data-next]')){\n        if(validateStep(idx)){ idx=Math.min(idx+1, steps.length-1); updateUI(); }\n      }\n      if(e.target.matches('[data-back]')){\n        idx=Math.max(idx-1, 0); updateUI();\n      }\n    });\n\n    \/\/ Toggle \u201cOther\u201d input\n    form.addEventListener('change', function(e){\n      if(e.target && e.target.id==='needsOtherChk'){\n        const wrap = document.getElementById('needsOtherWrap');\n        if(wrap) wrap.style.display = e.target.checked ? 'block' : 'none';\n      }\n    });\n\n    \/\/ Reset to step 1 when modal opens\n    document.addEventListener('click', function(e){\n      const open = e.target.getAttribute('data-open');\n      if(open==='requestModal'){ idx=0; updateUI(); }\n    });\n\n    updateUI();\n  })();\n<\/script>\n<script>\n(function(){\n  const repeater = document.getElementById('petsRepeater');\n  const addBtn = document.getElementById('addPetBtn');\n  if(!repeater || !addBtn) return;\n\n  function bindPet(pet){\n    \/\/ toggle \"Other\"\n    pet.addEventListener('change', function(e){\n      if(e.target.classList.contains('needs-other')){\n        const wrap = pet.querySelector('.needs-other-wrap');\n        if(wrap) wrap.style.display = e.target.checked ? 'block' : 'none';\n      }\n    });\n    \/\/ remove pet\n    const rem = pet.querySelector('.remove-pet');\n    if(rem){\n      rem.addEventListener('click', ()=> {\n        pet.remove();\n        renumber();\n      });\n    }\n  }\n\n  function renumber(){\n    [...repeater.querySelectorAll('.pet')].forEach((pet, i)=>{\n      pet.dataset.index = i;\n      pet.querySelector('.pettitle').textContent = `Pet #${i+1}`;\n      const rem = pet.querySelector('.remove-pet');\n      if(rem) rem.style.display = (i===0 && repeater.children.length===1) ? 'none' : 'inline';\n      \/\/ update names\n      pet.querySelectorAll('input, select, textarea').forEach(inp=>{\n        const name = inp.getAttribute('name');\n        if(!name) return;\n        const n = name.replace(\/pets\\[\\d+\\]\/, `pets[${i}]`);\n        inp.setAttribute('name', n);\n      });\n    });\n  }\n\n  addBtn.addEventListener('click', ()=>{\n    const first = repeater.querySelector('.pet');\n    const clone = first.cloneNode(true);\n    \/\/ reset values\n    clone.querySelectorAll('input').forEach(inp=>{\n      if(inp.type==='checkbox' || inp.type==='radio') inp.checked=false;\n      else if(inp.type==='file') inp.value=null;\n      else inp.value='';\n    });\n    clone.querySelectorAll('textarea').forEach(t=> t.value='');\n    const otherWrap = clone.querySelector('.needs-other-wrap');\n    if(otherWrap) otherWrap.style.display='none';\n    repeater.appendChild(clone);\n    repeater.appendChild(clone);\nrenumber();\nbindPet(clone);\n\/* NEW: scroll new block into view inside the modal *\/\nconst scroller = document.querySelector('#requestModal .content');\nif(scroller){ clone.scrollIntoView({behavior:'smooth', block:'end'}); }\n\n    renumber();\n    bindPet(clone);\n  });\n\n  \/\/ initial bind\n  [...repeater.querySelectorAll('.pet')].forEach(bindPet);\n  renumber();\n\n  \/\/ Strengthen validation hook: integrate with your existing validateStep()\n  \/\/ If you used the earlier stepper script, add this helper globally:\n  window.__petsHasNeeds = function(){\n    const needChecks = repeater.querySelectorAll('input[name^=\"pets\"][name$=\"[needs][]\"]:checked');\n    return needChecks.length > 0;\n  };\n\n})();\n<\/script>\n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Every Paw Deserves a Full Bowl Rosie\u2019s Pantry is a small pet food bank helping local pets and families in need. If you can give, thank you. If you need help, we\u2019re here \u2014 with kindness and no judgment. Request Help Donate Food \/ \u00a3 Most needed this week: Dry dog food (medium), wet cat [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rosiespantry.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rosiespantry.co.uk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rosiespantry.co.uk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rosiespantry.co.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rosiespantry.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":61,"href":"https:\/\/rosiespantry.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":82,"href":"https:\/\/rosiespantry.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/82"}],"wp:attachment":[{"href":"https:\/\/rosiespantry.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}