Seasonal Floral Availability Tool<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n :root {\n --primary: #8cc63f;\n --primary-dark: #7baa37;\n --accent: #b5e087;\n --bg-page: #f8f9fa; \/* Light gray for the page background *\/\n --bg-content: #f8f8f8; \/* White for content areas *\/\n --card-bg: #ffffff;\n --text: #333333;\n --text-muted: #555555;\n --border-light: #e9ecef;\n --border-input: #e2e8f0;\n --input-bg: #f9fafb;\n --radius: 10px;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.05);\n --font-family: 'Poppins', sans-serif;\n\n \/* New Seasonality Colors *\/\n --season-unavailable: #e74c3c; \/* Red *\/\n --season-available: #f1c40f; \/* Yellow *\/\n --season-peak: #2ecc71; \/* Green *\/\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: var(--font-family);\n background-color: var(--bg-page);\n color: var(--text);\n line-height: 1.6;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n .container {\n background-color: var(--bg-content);\n padding: 30px 30px; \/* Increased padding *\/\n width: 100%;\n text-align: center;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .content-wrapper {\n flex-grow: 1;\n max-width: 1400px;\n margin: 0 auto;\n width: 100%;\n }\n\n header h1 {\n color: var(--text);\n margin-bottom: 10px;\n font-size: 2.2em;\n font-weight: 600;\n }\n header h1 .accent-color {\n color: var(--primary);\n }\n\n header p {\n color: var(--text-muted);\n margin-bottom: 30px;\n font-size: 1.1em;\n }\n header p small {\n display: block; \/* Ensure it takes full width and allows margins *\/\n margin-top: 15px;\n font-size: 0.8em; \/* Slightly smaller than parent p *\/\n color: #6c757d; \/* A bit more muted *\/\n }\n\n \/* Legend text colors *\/\n .text-unavailable { color: var(--season-unavailable); font-weight: 500; }\n .text-available { color: var(--season-available); font-weight: 500; }\n .text-peak { color: var(--season-peak); font-weight: 500; }\n\n\n \/* --- Filter & Sort Area --- *\/\n .controls-area {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 15px;\n margin-bottom: 30px;\n padding: 20px;\n background-color: var(--card-bg); \/* White card style *\/\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n border: 1px solid var(--border-light);\n }\n\n .control-group {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 150px;\n flex-grow: 1;\n }\n\n .control-group label {\n font-weight: 500;\n margin-bottom: 6px;\n font-size: 0.9rem; \/* Slightly smaller label *\/\n color: var(--text-muted);\n }\n\n .control-group input[type=\"search\"],\n .control-group select {\n padding: 10px 12px;\n border: 1px solid var(--border-input);\n border-radius: var(--radius);\n font-size: 0.95rem;\n background-color: var(--input-bg);\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n width: 100%;\n height: 42px; \/* Consistent height *\/\n }\n .control-group input[type=\"search\"] {\n cursor: text;\n }\n .control-group select {\n cursor: pointer;\n }\n\n .control-group input[type=\"search\"]:focus,\n .control-group select:focus {\n outline: none;\n border-color: var(--primary);\n box-shadow: 0 0 0 3px rgba(140, 198, 63, 0.2);\n }\n\n .control-group button#clear-filters-btn {\n background: var(--primary);\n color: white;\n border: none;\n padding: 0 16px; \/* Adjusted padding for height consistency *\/\n border-radius: var(--radius);\n cursor: pointer;\n transition: background 0.2s ease;\n font-weight: 500;\n margin-top: 24.5px; \/* Align with inputs that have labels *\/\n height: 42px; \/* Consistent height *\/\n flex-grow: 0;\n align-self: flex-end;\n min-width: auto;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .control-group button#clear-filters-btn:hover {\n background: var(--primary-dark);\n }\n .control-group button#clear-filters-btn i {\n margin-right: 8px;\n }\n\n\n \/* Flower Grid *\/\n .flower-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));\n gap: 20px;\n margin-top: 20px;\n }\n\n .flower-card {\n background-color: var(--card-bg);\n border: 1px solid var(--border-light);\n border-radius: var(--radius);\n padding: 20px; \/* Increased padding *\/\n text-align: center;\n box-shadow: var(--shadow);\n transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n position: relative;\n cursor: default;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n\n .flower-card:hover {\n transform: translateY(-4px);\n box-shadow: var(--shadow-hover);\n }\n\n .flower-card img {\n width: 80px;\n height: 80px;\n object-fit: cover;\n border-radius: 50%;\n margin-bottom: 12px;\n border: 2px solid #f1f3f5;\n align-self: center;\n }\n\n .flower-card .flower-name {\n font-weight: 600;\n font-size: 1em;\n color: var(--text);\n margin-bottom: 5px;\n }\n\n .flower-card .flower-price-tier {\n font-size: 0.85em;\n color: #6c757d;\n margin-bottom: 12px;\n font-weight: 500;\n }\n\n .flower-card .card-buttons {\n display: flex;\n justify-content: center;\n margin-top: auto;\n }\n\n .flower-card .card-buttons button.details-btn {\n padding: 8px 14px;\n font-size: 0.85em;\n border: 1px solid var(--primary);\n border-radius: 8px; \/* Slightly smaller radius for smaller button *\/\n background-color: #f0f8e9;\n color: #588028;\n cursor: pointer;\n transition: background-color 0.2s, border-color 0.2s;\n min-width: 90px;\n font-weight: 500;\n }\n .flower-card .details-btn:hover {\n background-color: #e6f4d8;\n border-color: var(--primary-dark);\n }\n\n \/* No Results Message *\/\n .no-results {\n color: var(--text-muted);\n font-style: normal;\n margin-top: 30px;\n padding: 25px;\n background-color: var(--input-bg); \/* Using input-bg for a subtle difference *\/\n border-radius: var(--radius);\n border: 1px dashed var(--border-input); \/* Dashed border for notice *\/\n text-align: center;\n font-size: 1.05em;\n }\n\n \/* --- Modal Styles --- *\/\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: rgba(0,0,0,0.5);\n }\n\n .modal-content {\n background-color: var(--card-bg);\n margin: 8% auto;\n padding: 30px 35px;\n border: 1px solid var(--border-light);\n width: 85%;\n max-width: 600px;\n border-radius: var(--radius);\n position: relative;\n text-align: left;\n box-shadow: 0 5px 20px rgba(0,0,0,0.1);\n }\n\n .modal-close {\n color: #888;\n position: absolute;\n top: 15px;\n right: 20px;\n font-size: 32px;\n font-weight: normal;\n line-height: 1;\n cursor: pointer;\n }\n .modal-close:hover,\n .modal-close:focus {\n color: var(--text);\n text-decoration: none;\n }\n\n .modal h2 {\n margin-top: 0;\n margin-bottom: 20px;\n color: var(--primary); \/* Header color in modal *\/\n font-size: 1.8em;\n border-bottom: 1px solid #f1f3f5;\n padding-bottom: 15px;\n font-weight: 600;\n }\n .modal .modal-image {\n float: right;\n margin-left: 25px;\n margin-bottom: 15px;\n width: 100px;\n height: 100px;\n object-fit: cover;\n border-radius: 50%;\n border: 3px solid #f1f3f5;\n }\n\n .modal p {\n margin-bottom: 12px;\n line-height: 1.6;\n color: var(--text-muted);\n }\n .modal p strong {\n color: var(--text);\n min-width: 110px;\n display: inline-block;\n font-weight: 500;\n }\n .modal .season-indicator-list {\n display: flex;\n gap: 5px;\n flex-wrap: wrap;\n margin-top: 8px;\n }\n .month-indicator {\n display: inline-block;\n width: 2.4em;\n text-align: center;\n padding: 4px 0;\n border-radius: 5px;\n line-height: 1.3;\n font-size: 0.75em;\n font-weight: 500;\n \/* Default: Unavailable *\/\n background-color: var(--season-unavailable);\n color: white;\n }\n .month-indicator.available-season { \/* In Season *\/\n background-color: var(--season-available);\n color: var(--text); \/* Dark text for yellow bg *\/\n }\n .month-indicator.peak-season { \/* Peak Season *\/\n background-color: var(--season-peak);\n color: white;\n }\n\n \/* Responsive Adjustments *\/\n @media (max-width: 992px) {\n .control-group {\n min-width: 180px;\n }\n }\n @media (max-width: 768px) {\n .controls-area {\n flex-direction: column;\n align-items: stretch;\n padding: 15px;\n }\n .control-group {\n min-width: unset;\n width: 100%;\n }\n .control-group button#clear-filters-btn {\n margin-top: 10px;\n align-self: stretch;\n }\n .flower-grid {\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n gap: 15px;\n }\n .modal-content {\n width: 90%;\n margin: 10% auto;\n padding: 25px;\n }\n .modal .modal-image {\n float: none;\n display: block;\n margin: 0 auto 20px auto;\n }\n }\n\n @media (max-width: 480px) {\n header h1 { font-size: 1.9em; }\n header p { font-size: 1em; }\n .container { padding: 20px 15px; }\n\n .flower-grid {\n grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\n }\n .flower-card img { width: 70px; height: 70px; }\n .flower-card .card-buttons button.details-btn { font-size: 0.8em; padding: 6px 12px; }\n\n .modal h2 { font-size: 1.5em; }\n .modal p { font-size: 0.9em; }\n .modal p strong { min-width: auto; display: block; margin-bottom: 2px;}\n .modal-content { padding: 20px; }\n .modal-close { right: 15px; top: 12px; }\n .month-indicator { width: 2.1em; font-size: 0.7em;}\n }\n\n <\/style>\n<\/head>\n<body>\n\n <div class=\"container\">\n <div class=\"content-wrapper\">\n <header>\n <h1>Seasonal <span class=\"accent-color\">Flower<\/span> Availability Tool<\/h1>\n <p>\n Search or filter flowers by month, price, or category. Sort the results. Click 'Details' for complete info.\n <br>Availability: <span class=\"text-unavailable\">Red<\/span> = Low\/No availability, <span class=\"text-available\">Yellow<\/span> = Medium availability, <span class=\"text-peak\">Green<\/span> = High availability.\n <small>\n Note: Monthly availability and peak seasons indicated in this tool are based on floral market behavior and horticultural production in Southern Europe (especially Mediterranean climate regions like Spain, Italy, Portugal, and Southern France).\n <\/small>\n <\/p>\n <\/header>\n\n \n <div class=\"controls-area\">\n <div class=\"control-group\">\n <label for=\"search-input\">Search by Name:<\/label>\n <input type=\"search\" id=\"search-input\" placeholder=\"Enter a name...\">\n <\/div>\n <div class=\"control-group\">\n <label for=\"month-select\">Month:<\/label>\n <select id=\"month-select\">\n \n <\/select>\n <\/div>\n <div class=\"control-group\">\n <label for=\"price-filter\">Price Tier:<\/label>\n <select id=\"price-filter\">\n <option value=\"all\">All Prices<\/option>\n \n <\/select>\n <\/div>\n <div class=\"control-group\">\n <label for=\"category-filter\">Category:<\/label>\n <select id=\"category-filter\">\n <option value=\"all\">All Categories<\/option>\n \n <\/select>\n <\/div>\n <div class=\"control-group\">\n <label for=\"sort-select\">Sort by:<\/label>\n <select id=\"sort-select\">\n <option value=\"name-asc\">Name (A-Z)<\/option>\n <option value=\"price-asc\">Price (Low-High)<\/option>\n <option value=\"price-desc\">Price (High-Low)<\/option>\n <option value=\"vase-asc\">Vase Life (Short-Long)<\/option>\n <option value=\"vase-desc\">Vase Life (Long-Short)<\/option>\n <\/select>\n <\/div>\n <div class=\"control-group\">\n <button id=\"clear-filters-btn\"><i class=\"fas fa-eraser\"><\/i>Clear Filters<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"flower-results\" class=\"flower-grid\">\n \n <\/div>\n <div id=\"no-results-message\" class=\"no-results\" style=\"display: none;\">\n No flowers or greenery match your criteria. Try changing the filters or search terms.\n <\/div>\n <\/div> \n\n \n\n <\/div> \n\n \n <div id=\"flower-detail-modal\" class=\"modal\">\n <div class=\"modal-content\">\n <span class=\"modal-close\">\u00d7<\/span>\n <img decoding=\"async\" id=\"modal-img\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\" alt=\"Flower Image\" class=\"lazyload modal-image\">\n <h2 id=\"modal-name\">Flower Name<\/h2>\n <p><strong>Price Tier:<\/strong> <span id=\"modal-price\"><\/span><\/p>\n <p><strong>Category:<\/strong> <span id=\"modal-category\"><\/span><\/p>\n <p><strong>Est. Vase Life:<\/strong> <span id=\"modal-vaselife\"><\/span><\/p>\n <p><strong>Possible Substitutes:<\/strong> <span id=\"modal-substitutes\"><\/span><\/p>\n <p><strong>Notes:<\/strong> <span id=\"modal-notes\"><\/span><\/p>\n <p><strong>Availability:<\/strong><\/p>\n <div id=\"modal-season-indicators\" class=\"season-indicator-list\">\n \n <\/div>\n <\/div>\n <\/div>\n\n\n <script>\n \/\/ --- Flower Data ---\n const flowerData = [\n {\n id: \"rose_std\", name: \"Rose\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/freedommatina?1694615970\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [6, 7],\n priceTier: \"$$$\", category: \"Focal\", vaseLife: \"7-12 days\", substitutes: [\"Garden Rose\", \"Lisianthus\"], notes: \"Wide variety of types available.\"\n },\n {\n id: \"carnation_std\", name: \"Carnation\", image: \"https:\/\/images.unsplash.com\/photo-1527061011665-3652c757a4d4?q=80&w=1972&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [],\n priceTier: \"$\", category: \"Filler\/Focal\", vaseLife: \"10-20 days\", substitutes: [\"Mini Carnation\", \"Dianthus\"], notes: \"Very long-lasting.\"\n },\n {\n id: \"gerbera_std\", name: \"Gerbera\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/117074?1716375175\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [5, 6, 7, 8],\n priceTier: \"$$\", category: \"Focal\", vaseLife: \"5-9 days\", substitutes: [\"Sunflower (mini)\", \"Chrysanthemum (Daisy)\"], notes: \"Needs proper hydration.\"\n },\n {\n id: \"alstroemeria\", name: \"Alstroemeria\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/151302?1727083748\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [5, 6, 7],\n priceTier: \"$$\", category: \"Filler\/Focal\", vaseLife: \"10-14 days\", substitutes: [\"Lily (Asiatic, small)\", \"Freesia\"], notes: \"Long vase life, leaves yellow before flowers.\"\n },\n {\n id: \"anthurium\", name: \"Anthurium\", image: \"https:\/\/images.unsplash.com\/photo-1607334386016-091a546f457d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [],\n priceTier: \"$$$\", category: \"Focal\/Line\", vaseLife: \"14-28 days\", substitutes: [\"Calla Lily (large)\"], notes: \"Tropical, needs warmth, very long-lasting.\"\n },\n {\n id: \"babysbreath\", name: \"Gypsophila (Baby's Breath)\", image: \"https:\/\/images.unsplash.com\/photo-1648170037882-dbc37e0789e4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [6, 7, 8],\n priceTier: \"$\", category: \"Filler\", vaseLife: \"7-10 days\", substitutes: [\"Solidago\", \"Waxflower\", \"Statice\"], notes: \"May have a characteristic scent. Different varieties available.\"\n },\n {\n id: \"tulip_std\", name: \"Tulip\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/32564?1741178125\",\n seasons: [1, 2, 3, 4, 5, 11, 12], highSeasons: [3, 4],\n priceTier: \"$$\", category: \"Focal\/Line\", vaseLife: \"4-7 days\", substitutes: [\"Anemone\", \"Ranunculus\"], notes: \"Continues to grow after cutting, phototropic.\"\n },\n {\n id: \"peony\", name: \"Peony\", image: \"https:\/\/images.unsplash.com\/photo-1575178094668-132dc931ad35?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [4, 5, 6], highSeasons: [5],\n priceTier: \"$$$$\", category: \"Focal\", vaseLife: \"5-7 days\", substitutes: [\"Garden Rose\", \"Ranunculus (Cloni)\", \"Double Tulip\"], notes: \"Highly sought after, short season, variable opening.\"\n },\n {\n id: \"sunflower\", name: \"Sunflower\", image: \"https:\/\/images.unsplash.com\/photo-1597848212624-a19eb35e2651?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [6, 7, 8, 9, 10], highSeasons: [7, 8],\n priceTier: \"$$\", category: \"Focal\", vaseLife: \"6-10 days\", substitutes: [\"Gerbera\", \"Rudbeckia\", \"Chrysanthemum\"], notes: \"Can be top-heavy, ensure good hydration.\"\n },\n {\n id: \"daffodil\", name: \"Daffodil\", image: \"https:\/\/images.unsplash.com\/photo-1617585370679-920e8cde24f4?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [2, 3, 4], highSeasons: [3],\n priceTier: \"$$\", category: \"Focal\/Accent\", vaseLife: \"4-6 days\", substitutes: [\"Daffodil (other types)\"], notes: \"Exudes sap harmful to other flowers; condition separately first.\"\n },\n {\n id: \"lily_gen\", name: \"Lily (General)\", image: \"https:\/\/images.unsplash.com\/photo-1561897519-6e4fbd1fbc41?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [5, 6, 7, 8], highSeasons: [6, 7],\n priceTier: \"$$$\", category: \"Focal\/Line\", vaseLife: \"7-14 days\", substitutes: [\"Alstroemeria\"], notes: \"Specify Asiatic (unscented) or Oriental (scented).\"\n },\n {\n id: \"lily_asiatic\", name: \"Lily Asiatic\/Oriental\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/12002?1652864881\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [6, 7, 8, 12],\n priceTier: \"$$$\", category: \"Focal\/Line\", vaseLife: \"7-14 days\", substitutes: [\"Alstroemeria\"], notes: \"Asiatic often unscented, Oriental scented. Remove pollen.\"\n },\n {\n id: \"hyacinth\", name: \"Hyacinth\", image: \"https:\/\/images.unsplash.com\/photo-1580546360504-95e34ddc5ba0?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4], highSeasons: [3],\n priceTier: \"$$\", category: \"Focal\/Accent\", vaseLife: \"5-8 days\", substitutes: [\"Stock\", \"Delphinium (short)\"], notes: \"Strong fragrance, bulb flower.\"\n },\n {\n id: \"dahlia\", name: \"Dahlia\", image: \"https:\/\/images.unsplash.com\/photo-1620062317671-ef6441546d7d?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [7, 8, 9, 10], highSeasons: [8, 9],\n priceTier: \"$$$\", category: \"Focal\", vaseLife: \"4-7 days\", substitutes: [\"Chrysanthemum (large)\", \"Zinnia\"], notes: \"Great variety in shape and size. May have shorter vase life.\"\n },\n {\n id: \"chrysanthemum\", name: \"Chrysanthemum\", image: \"https:\/\/images.unsplash.com\/photo-1695384287398-5781a1f51c31?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [9, 10, 11],\n priceTier: \"$\", category: \"Focal\/Filler\", vaseLife: \"10-21 days\", substitutes: [\"Aster\", \"Daisy\", \"Gerbera\"], notes: \"Many types (pompon, spider, button, daisy). Very long-lasting.\"\n },\n {\n id: \"anemone\", name: \"Anemone\", image: \"https:\/\/images.unsplash.com\/photo-1559979334-dd5cc8ccd499?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4, 10, 11, 12], highSeasons: [3, 4, 11],\n priceTier: \"$$$\", category: \"Focal\/Accent\", vaseLife: \"4-8 days\", substitutes: [\"Ranunculus\", \"Poppy\"], notes: \"Distinctive dark center, petals close at night\/in cold.\"\n },\n {\n id: \"ranunculus\", name: \"Ranunculus\", image: \"https:\/\/images.unsplash.com\/photo-1578668436762-d8f781339bbe?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4, 5, 11, 12], highSeasons: [3, 4],\n priceTier: \"$$$\", category: \"Focal\/Filler\", vaseLife: \"5-9 days\", substitutes: [\"Peony (small)\", \"Garden Rose\", \"Anemone\"], notes: \"Many petals, opens beautifully. Cloni varieties are larger.\"\n },\n {\n id: \"lavender\", name: \"Lavender\", image: \"https:\/\/images.unsplash.com\/photo-1565011523534-747a8601f10a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [6, 7, 8], highSeasons: [7],\n priceTier: \"$\", category: \"Filler\/Accent\", vaseLife: \"7-10 days (fresh), long (dried)\", substitutes: [\"Limonium\", \"Statice\", \"Veronica\"], notes: \"Fragrant, often used dried.\"\n },\n {\n id: \"aster\", name: \"Aster\", image: \"https:\/\/images.unsplash.com\/photo-1718475424233-2de4952c6a26?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [8, 9, 10], highSeasons: [9],\n priceTier: \"$\", category: \"Filler\", vaseLife: \"7-12 days\", substitutes: [\"Solidago\", \"Chrysanthemum (button)\", \"Limonium\"], notes: \"Daisy-like filler, good autumn texture.\"\n },\n {\n id: \"callalily\", name: \"Calla Lily\", image: \"https:\/\/images.unsplash.com\/photo-1650355648621-1a0445f7f9b4?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [3, 4, 5, 6, 7, 8, 9, 10], highSeasons: [5, 6],\n priceTier: \"$$$\", category: \"Focal\/Line\", vaseLife: \"7-10 days\", substitutes: [\"Anthurium\", \"Tulip (French)\"], notes: \"Elegant shape, mini and large varieties available.\"\n },\n {\n id: \"hydrangea\", name: \"Hydrangea\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/132346?1718724376\",\n seasons: [5, 6, 7, 8, 9, 10, 11], highSeasons: [7, 8],\n priceTier: \"$$$\", category: \"Focal\/Filler\", vaseLife: \"5-9 days\", substitutes: [\"Viburnum (Snowball)\", \"Garden Rose (large)\"], notes: \"High water needs, 'antique' varieties available later.\"\n },\n {\n id: \"limonium\", name: \"Limonium (Statice)\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/145638?1743683386\",\n seasons: [4, 5, 6, 7, 8, 9, 10, 11], highSeasons: [7, 8, 9],\n priceTier: \"$\", category: \"Filler\", vaseLife: \"10-14 days (fresh), long (dried)\", substitutes: [\"Statice (other)\", \"Gypsophila\", \"Waxflower\"], notes: \"Good filler, airy texture, dries well.\"\n },\n {\n id: \"lisianthus\", name: \"Lisianthus (Eustoma)\", image: \"https:\/\/images.unsplash.com\/photo-1689085055401-2e6a7268d6ca?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [5, 6, 7, 8, 9, 10, 11], highSeasons: [7, 8],\n priceTier: \"$$$\", category: \"Focal\/Filler\", vaseLife: \"7-12 days\", substitutes: [\"Rose (Mini)\", \"Ranunculus\", \"Carnation\"], notes: \"Delicate petals, looks like a rose but more ruffled.\"\n },\n {\n id: \"orchid_gen\", name: \"Orchid\", image: \"https:\/\/images.unsplash.com\/photo-1610397648930-477b8c7f0943?q=80&w=1930&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [],\n priceTier: \"$$$$\", category: \"Focal\/Accent\", vaseLife: \"10-25 days\", substitutes: [\"Depends on type\"], notes: \"Specify type (Phalaenopsis, Cymbidium, Dendrobium, etc.).\"\n },\n {\n id: \"orchid_cymbidium\", name: \"Orchid Cymbidium\", image: \"https:\/\/images.unsplash.com\/photo-1684841881083-c0c54cf00995?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [10, 11, 12, 1, 2, 3, 4, 5], highSeasons: [11, 12, 1, 2],\n priceTier: \"$$$$\", category: \"Focal\/Line\", vaseLife: \"14-28 days\", substitutes: [\"Orchid Phalaenopsis\"], notes: \"Large stems, waxy flowers, very long-lasting.\"\n },\n {\n id: \"orchid_dendrobium\", name: \"Orchid Dendrobium\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/10651?1558961097\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5],\n priceTier: \"$$$\", category: \"Line\/Accent\", vaseLife: \"7-14 days\", substitutes: [\"Orchid Mokara\"], notes: \"Stems of smaller flowers, often used in tropical work.\"\n },\n {\n id: \"eucaliptus\", name: \"Eucalyptus\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Eucaliptus.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 9, 10, 11],\n priceTier: \"$$\", category: \"Greenery\", vaseLife: \"10-20 days\", substitutes: [\"Ruscus\", \"Salal\"],\n notes: \"Fragrant, diverse varieties (cinerea, parvifolia, populus, silver dollar, etc.). Ideal for volume and aroma.\"\n },\n {\n id: \"helecho\", name: \"Fern\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Helecho.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 9, 10, 11],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"7-14 days\", substitutes: [\"Aralia (leaf)\", \"Aspidistra (leaf)\"],\n notes: \"Classic for base greenery. Varieties like leatherleaf fern, sword fern.\"\n },\n {\n id: \"lentisco\", name: \"Mastic\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/lentisco.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 9, 10, 11],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"10-18 days\", substitutes: [\"Myrtle\", \"Pittosporum\"],\n notes: \"Robust and durable Mediterranean foliage, sometimes with small berries.\"\n },\n {\n id: \"aspidistra\", name: \"Aspidistra\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Aspidistra.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 6, 7, 8],\n priceTier: \"$$\", category: \"Greenery\", vaseLife: \"14-28 days\", substitutes: [\"Monstera (leaf)\", \"Ti leaf\"],\n notes: \"Large, wide, and very durable leaf. Ideal for lining containers or as a structural element.\"\n },\n {\n id: \"aralia\", name: \"Aralia\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Aralia.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 6, 7, 8],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"7-12 days\", substitutes: [\"Fern (large leaf)\", \"Fatsia\"],\n notes: \"Large palmate leaf, provides good base coverage.\"\n },\n {\n id: \"robellini\", name: \"Robellini Palm\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/roebelenii.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [6, 7, 8],\n priceTier: \"$$\", category: \"Greenery\", vaseLife: \"10-20 days\", substitutes: [\"Kentia Palm leaf\", \"Chico Leaf\"],\n notes: \"Elegant palm leaf, adds a tropical and linear touch.\"\n },\n {\n id: \"falsa_pimienta\", name: \"Pepper Tree Foliage\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Falsa-Pimienta.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [6, 7, 8],\n priceTier: \"$$\", category: \"Greenery\", vaseLife: \"7-14 days\", substitutes: [\"Eucalyptus (with seeds)\", \"Cotoneaster\"],\n notes: \"Draping branches with fine foliage, often with decorative pink berries. Fragrant.\"\n },\n {\n id: \"romero\", name: \"Rosemary\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Romero.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 9, 10, 11],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"5-10 days\", substitutes: [\"Lavender (foliage)\", \"Thyme (foliage)\"],\n notes: \"Aromatic, ideal for a rustic or Mediterranean touch. May have small flowers.\"\n },\n {\n id: \"salal\", name: \"Salal (Lemon Leaf)\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Salal.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 6, 7, 8],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"10-21 days\", substitutes: [\"Ruscus\", \"Pittosporum\"],\n notes: \"Robust, dark green leaves, very long-lasting. A staple in floristry.\"\n },\n {\n id: \"ilex\", name: \"Ilex (Holly)\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Ilex.webp\",\n seasons: [9, 10, 11, 12, 1, 2], highSeasons: [11, 12, 1],\n priceTier: \"$$$\", category: \"Greenery\", vaseLife: \"10-20 days\", substitutes: [\"Cotoneaster (with berries)\", \"Skimmia (with berries)\"],\n notes: \"Traditional Christmas greenery, with bright red berries. Green varieties (without berries) also available.\"\n },\n {\n id: \"hiedra\", name: \"Ivy\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Hiedra.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 9, 10, 11],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"7-14 days\", substitutes: [\"Ruscus (for garlands)\", \"Jasmine (foliage)\"],\n notes: \"Versatile, available in different sizes and variegations. Ideal for draping effects or covering bases.\"\n },\n {\n id: \"tuya\", name: \"Thuja (Arborvitae)\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Tuya.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [11, 12, 1],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"10-20 days\", substitutes: [\"Cypress\", \"Juniper\"],\n notes: \"Conifer foliage, flat and scaly texture. Resinous aroma, good for winter arrangements.\"\n },\n {\n id: \"chico_leaf\", name: \"Chico Leaf\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Chico.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 6, 7, 8],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"7-14 days\", substitutes: [\"Robellini Palm (small)\", \"Areca Palm leaf\"],\n notes: \"Small, delicate palm leaf, ideal for fine details, boutonnieres, or discreet tropical accents.\"\n }\n ];\n\n \/\/ --- DOM Elements ---\n const searchInput = document.getElementById('search-input');\n const monthSelect = document.getElementById('month-select');\n const priceFilter = document.getElementById('price-filter');\n const categoryFilter = document.getElementById('category-filter');\n const sortSelect = document.getElementById('sort-select');\n const clearFiltersBtn = document.getElementById('clear-filters-btn');\n const flowerResultsDiv = document.getElementById('flower-results');\n const noResultsMessageDiv = document.getElementById('no-results-message');\n const modal = document.getElementById('flower-detail-modal');\n const modalCloseBtn = document.querySelector('.modal-close');\n const modalImg = document.getElementById('modal-img');\n const modalName = document.getElementById('modal-name');\n const modalPrice = document.getElementById('modal-price');\n const modalCategory = document.getElementById('modal-category');\n const modalVaseLife = document.getElementById('modal-vaselife');\n const modalSubstitutes = document.getElementById('modal-substitutes');\n const modalNotes = document.getElementById('modal-notes');\n const modalSeasonIndicators = document.getElementById('modal-season-indicators');\n\n const months = [\n \"January\", \"February\", \"March\", \"April\", \"May\", \"June\",\n \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"\n ];\n const monthAbbr = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n\n function normalizeText(text) {\n if (typeof text !== 'string') return '';\n return text.normalize(\"NFD\").replace(\/[\\u0300-\\u036f]\/g, \"\").toLowerCase();\n }\n\n function parseVaseLife(vaseLifeStr) {\n if (!vaseLifeStr) return 0;\n const match = vaseLifeStr.match(\/\\d+\/);\n return match ? parseInt(match[0], 10) : 0;\n }\n function parsePriceTier(priceTierStr) {\n if (!priceTierStr) return 0;\n return priceTierStr.length;\n }\n function populateSelect(selectElement, optionsArray, defaultOptionText) {\n const firstOption = selectElement.options[0]; \/\/ Keep the \"All Prices\/Categories\"\n const selectedValue = selectElement.value; \/\/ Preserve selection\n selectElement.innerHTML = ''; \/\/ Clear existing options except the first one\n if (firstOption && firstOption.value === \"all\") {\n selectElement.appendChild(firstOption); \/\/ Re-add the default \"All\" option\n }\n\n [...new Set(optionsArray)].sort((a, b) => a.localeCompare(b, 'en')).forEach(optionText => {\n if(optionText) {\n const option = document.createElement('option');\n option.value = optionText;\n option.textContent = optionText;\n selectElement.appendChild(option);\n }\n });\n selectElement.value = selectedValue; \/\/ Restore selection\n }\n function createModalSeasonIndicators(flower) {\n modalSeasonIndicators.innerHTML = '';\n monthAbbr.forEach((abbr, index) => {\n const monthNum = index + 1;\n const monthSpan = document.createElement('span');\n monthSpan.className = 'month-indicator'; \/\/ Base class (default red)\n monthSpan.textContent = abbr;\n \n if (flower.highSeasons && flower.highSeasons.includes(monthNum)) {\n monthSpan.classList.remove('available-season'); \/\/ Ensure no conflict\n monthSpan.classList.add('peak-season'); \/\/ Green for peak season\n } else if (flower.seasons && flower.seasons.includes(monthNum)) {\n monthSpan.classList.add('available-season'); \/\/ Yellow for in season\n }\n \/\/ Default is red (unavailable), handled by .month-indicator base style\n modalSeasonIndicators.appendChild(monthSpan);\n });\n }\n function showFlowerDetails(flowerId) {\n const flower = flowerData.find(f => f.id === flowerId);\n if (!flower) return;\n modalName.textContent = flower.name;\n modalImg.src = flower.image;\n modalImg.alt = flower.name;\n modalImg.onerror = function() { this.src='https:\/\/via.placeholder.com\/100\/f0f0f0\/cccccc?text=No+Image'; };\n modalPrice.textContent = flower.priceTier || 'N\/A';\n modalCategory.textContent = flower.category || 'N\/A';\n modalVaseLife.textContent = flower.vaseLife || 'N\/A';\n modalSubstitutes.textContent = flower.substitutes ? (Array.isArray(flower.substitutes) ? flower.substitutes.join(', ') : flower.substitutes) : 'None listed';\n modalNotes.textContent = flower.notes || 'No notes.';\n createModalSeasonIndicators(flower);\n modal.style.display = \"block\";\n document.body.style.overflow = 'hidden'; \/\/ Prevent background scrolling\n }\n function closeModal() {\n modal.style.display = \"none\";\n document.body.style.overflow = 'auto'; \/\/ Restore background scrolling\n }\n\n function populateFilters() {\n const allMonthOption = document.createElement('option');\n allMonthOption.value = \"all\";\n allMonthOption.textContent = \"-- All Months --\";\n monthSelect.appendChild(allMonthOption);\n months.forEach((month, index) => {\n const option = document.createElement('option');\n option.value = index + 1;\n option.textContent = month;\n monthSelect.appendChild(option);\n });\n\n const allPrices = flowerData.map(f => f.priceTier).filter(Boolean);\n const allCategories = flowerData.map(f => f.category).filter(Boolean);\n\n populateSelect(priceFilter, allPrices, priceFilter.options[0].textContent);\n populateSelect(categoryFilter, allCategories, categoryFilter.options[0].textContent);\n }\n\n function displayFlowers() {\n flowerResultsDiv.innerHTML = '';\n noResultsMessageDiv.style.display = 'none';\n\n const searchTermRaw = searchInput.value.trim();\n const searchTerm = normalizeText(searchTermRaw);\n const selectedMonth = monthSelect.value;\n const selectedPrice = priceFilter.value;\n const selectedCategory = categoryFilter.value;\n const selectedSort = sortSelect.value;\n\n let filteredFlowers = [...flowerData];\n\n if (searchTerm) {\n filteredFlowers = filteredFlowers.filter(flower =>\n normalizeText(flower.name).includes(searchTerm)\n );\n }\n\n if (selectedMonth !== \"all\") {\n const monthInt = parseInt(selectedMonth);\n filteredFlowers = filteredFlowers.filter(flower => flower.seasons && flower.seasons.includes(monthInt));\n }\n\n if (selectedPrice !== \"all\") {\n filteredFlowers = filteredFlowers.filter(flower => flower.priceTier === selectedPrice);\n }\n\n if (selectedCategory !== \"all\") {\n filteredFlowers = filteredFlowers.filter(flower => flower.category && normalizeText(flower.category) === normalizeText(selectedCategory));\n }\n\n filteredFlowers.sort((a, b) => {\n switch (selectedSort) {\n case 'price-asc':\n return parsePriceTier(a.priceTier) - parsePriceTier(b.priceTier);\n case 'price-desc':\n return parsePriceTier(b.priceTier) - parsePriceTier(a.priceTier);\n case 'vase-asc':\n return parseVaseLife(a.vaseLife) - parseVaseLife(b.vaseLife);\n case 'vase-desc':\n return parseVaseLife(b.vaseLife) - parseVaseLife(a.vaseLife);\n case 'name-asc':\n default:\n return a.name.localeCompare(b.name, 'en');\n }\n });\n\n if (filteredFlowers.length === 0) {\n noResultsMessageDiv.textContent = \"No flowers or greenery match your criteria. Try changing the filters or search terms.\";\n noResultsMessageDiv.style.display = 'block';\n } else {\n filteredFlowers.forEach(flower => {\n const card = document.createElement('div');\n card.className = 'flower-card';\n card.dataset.flowerId = flower.id;\n\n const img = document.createElement('img');\n img.src = flower.image;\n img.alt = flower.name;\n img.onerror = function() { this.src='https:\/\/via.placeholder.com\/80\/f0f0f0\/cccccc?text=No+Img'; };\n\n const nameP = document.createElement('p');\n nameP.className = 'flower-name';\n nameP.textContent = flower.name;\n\n const priceP = document.createElement('p');\n priceP.className = 'flower-price-tier';\n priceP.textContent = flower.priceTier || '';\n\n const buttonsDiv = document.createElement('div');\n buttonsDiv.className = 'card-buttons';\n\n const detailsBtn = document.createElement('button');\n detailsBtn.className = 'details-btn card-btn';\n detailsBtn.textContent = 'Details';\n detailsBtn.dataset.flowerId = flower.id;\n\n buttonsDiv.appendChild(detailsBtn);\n\n card.appendChild(img);\n card.appendChild(nameP);\n card.appendChild(priceP);\n card.appendChild(buttonsDiv);\n\n flowerResultsDiv.appendChild(card);\n });\n }\n }\n\n\n searchInput.addEventListener('input', displayFlowers);\n monthSelect.addEventListener('change', displayFlowers);\n priceFilter.addEventListener('change', displayFlowers);\n categoryFilter.addEventListener('change', displayFlowers);\n sortSelect.addEventListener('change', displayFlowers);\n\n clearFiltersBtn.addEventListener('click', () => {\n searchInput.value = '';\n monthSelect.value = \"all\";\n priceFilter.value = \"all\";\n categoryFilter.value = \"all\";\n sortSelect.value = \"name-asc\";\n displayFlowers();\n });\n\n flowerResultsDiv.addEventListener('click', (event) => {\n const target = event.target.closest('.details-btn'); \/\/ Ensure clicking icon inside button still works\n if (target) {\n const flowerId = target.dataset.flowerId;\n showFlowerDetails(flowerId);\n }\n });\n\n modalCloseBtn.addEventListener('click', closeModal);\n window.addEventListener('click', (event) => {\n if (event.target == modal) {\n closeModal();\n }\n });\n window.addEventListener('keydown', (event) => {\n if (event.key === 'Escape' && modal.style.display === \"block\") {\n closeModal();\n }\n });\n\n\n function init() {\n populateFilters();\n displayFlowers();\n }\n\n document.addEventListener('DOMContentLoaded', init);\n\n <\/script>\n<\/body>\n<\/html><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-24888","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\n<title>Floral Availability Tool by Season - Verdnatura<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Floral Availability Tool by Season - Verdnatura\" \/>\n<meta property=\"og:url\" content=\"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/\" \/>\n<meta property=\"og:site_name\" content=\"Verdnatura\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-07T05:23:08+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/\",\"url\":\"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/\",\"name\":\"Floral Availability Tool by Season - Verdnatura\",\"isPartOf\":{\"@id\":\"https:\/\/verdnatura.info\/en\/#website\"},\"datePublished\":\"2025-10-06T10:36:39+00:00\",\"dateModified\":\"2025-10-07T05:23:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/verdnatura.info\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Floral Availability Tool by Season\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/verdnatura.info\/en\/#website\",\"url\":\"https:\/\/verdnatura.info\/en\/\",\"name\":\"Verdnatura\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/verdnatura.info\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n","yoast_head_json":{"title":"Floral Availability Tool by Season - Verdnatura","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/","og_locale":"en_US","og_type":"article","og_title":"Floral Availability Tool by Season - Verdnatura","og_url":"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/","og_site_name":"Verdnatura","article_modified_time":"2025-10-07T05:23:08+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/","url":"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/","name":"Floral Availability Tool by Season - Verdnatura","isPartOf":{"@id":"https:\/\/verdnatura.info\/en\/#website"},"datePublished":"2025-10-06T10:36:39+00:00","dateModified":"2025-10-07T05:23:08+00:00","breadcrumb":{"@id":"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/verdnatura.info\/en\/floral-availability-seasons\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/verdnatura.info\/en\/"},{"@type":"ListItem","position":2,"name":"Floral Availability Tool by Season"}]},{"@type":"WebSite","@id":"https:\/\/verdnatura.info\/en\/#website","url":"https:\/\/verdnatura.info\/en\/","name":"Verdnatura","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/verdnatura.info\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages\/24888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/comments?post=24888"}],"version-history":[{"count":1,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages\/24888\/revisions"}],"predecessor-version":[{"id":24889,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages\/24888\/revisions\/24889"}],"wp:attachment":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/media?parent=24888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n \n \n Seasonal Floral Availability Tool<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n :root {\n --primary: #8cc63f;\n --primary-dark: #7baa37;\n --accent: #b5e087;\n --bg-page: #f8f9fa; \/* Light gray for the page background *\/\n --bg-content: #f8f8f8; \/* White for content areas *\/\n --card-bg: #ffffff;\n --text: #333333;\n --text-muted: #555555;\n --border-light: #e9ecef;\n --border-input: #e2e8f0;\n --input-bg: #f9fafb;\n --radius: 10px;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.05);\n --font-family: 'Poppins', sans-serif;\n\n \/* New Seasonality Colors *\/\n --season-unavailable: #e74c3c; \/* Red *\/\n --season-available: #f1c40f; \/* Yellow *\/\n --season-peak: #2ecc71; \/* Green *\/\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: var(--font-family);\n background-color: var(--bg-page);\n color: var(--text);\n line-height: 1.6;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n .container {\n background-color: var(--bg-content);\n padding: 30px 30px; \/* Increased padding *\/\n width: 100%;\n text-align: center;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .content-wrapper {\n flex-grow: 1;\n max-width: 1400px;\n margin: 0 auto;\n width: 100%;\n }\n\n header h1 {\n color: var(--text);\n margin-bottom: 10px;\n font-size: 2.2em;\n font-weight: 600;\n }\n header h1 .accent-color {\n color: var(--primary);\n }\n\n header p {\n color: var(--text-muted);\n margin-bottom: 30px;\n font-size: 1.1em;\n }\n header p small {\n display: block; \/* Ensure it takes full width and allows margins *\/\n margin-top: 15px;\n font-size: 0.8em; \/* Slightly smaller than parent p *\/\n color: #6c757d; \/* A bit more muted *\/\n }\n\n \/* Legend text colors *\/\n .text-unavailable { color: var(--season-unavailable); font-weight: 500; }\n .text-available { color: var(--season-available); font-weight: 500; }\n .text-peak { color: var(--season-peak); font-weight: 500; }\n\n\n \/* --- Filter & Sort Area --- *\/\n .controls-area {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 15px;\n margin-bottom: 30px;\n padding: 20px;\n background-color: var(--card-bg); \/* White card style *\/\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n border: 1px solid var(--border-light);\n }\n\n .control-group {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 150px;\n flex-grow: 1;\n }\n\n .control-group label {\n font-weight: 500;\n margin-bottom: 6px;\n font-size: 0.9rem; \/* Slightly smaller label *\/\n color: var(--text-muted);\n }\n\n .control-group input[type=\"search\"],\n .control-group select {\n padding: 10px 12px;\n border: 1px solid var(--border-input);\n border-radius: var(--radius);\n font-size: 0.95rem;\n background-color: var(--input-bg);\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n width: 100%;\n height: 42px; \/* Consistent height *\/\n }\n .control-group input[type=\"search\"] {\n cursor: text;\n }\n .control-group select {\n cursor: pointer;\n }\n\n .control-group input[type=\"search\"]:focus,\n .control-group select:focus {\n outline: none;\n border-color: var(--primary);\n box-shadow: 0 0 0 3px rgba(140, 198, 63, 0.2);\n }\n\n .control-group button#clear-filters-btn {\n background: var(--primary);\n color: white;\n border: none;\n padding: 0 16px; \/* Adjusted padding for height consistency *\/\n border-radius: var(--radius);\n cursor: pointer;\n transition: background 0.2s ease;\n font-weight: 500;\n margin-top: 24.5px; \/* Align with inputs that have labels *\/\n height: 42px; \/* Consistent height *\/\n flex-grow: 0;\n align-self: flex-end;\n min-width: auto;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .control-group button#clear-filters-btn:hover {\n background: var(--primary-dark);\n }\n .control-group button#clear-filters-btn i {\n margin-right: 8px;\n }\n\n\n \/* Flower Grid *\/\n .flower-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));\n gap: 20px;\n margin-top: 20px;\n }\n\n .flower-card {\n background-color: var(--card-bg);\n border: 1px solid var(--border-light);\n border-radius: var(--radius);\n padding: 20px; \/* Increased padding *\/\n text-align: center;\n box-shadow: var(--shadow);\n transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n position: relative;\n cursor: default;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n\n .flower-card:hover {\n transform: translateY(-4px);\n box-shadow: var(--shadow-hover);\n }\n\n .flower-card img {\n width: 80px;\n height: 80px;\n object-fit: cover;\n border-radius: 50%;\n margin-bottom: 12px;\n border: 2px solid #f1f3f5;\n align-self: center;\n }\n\n .flower-card .flower-name {\n font-weight: 600;\n font-size: 1em;\n color: var(--text);\n margin-bottom: 5px;\n }\n\n .flower-card .flower-price-tier {\n font-size: 0.85em;\n color: #6c757d;\n margin-bottom: 12px;\n font-weight: 500;\n }\n\n .flower-card .card-buttons {\n display: flex;\n justify-content: center;\n margin-top: auto;\n }\n\n .flower-card .card-buttons button.details-btn {\n padding: 8px 14px;\n font-size: 0.85em;\n border: 1px solid var(--primary);\n border-radius: 8px; \/* Slightly smaller radius for smaller button *\/\n background-color: #f0f8e9;\n color: #588028;\n cursor: pointer;\n transition: background-color 0.2s, border-color 0.2s;\n min-width: 90px;\n font-weight: 500;\n }\n .flower-card .details-btn:hover {\n background-color: #e6f4d8;\n border-color: var(--primary-dark);\n }\n\n \/* No Results Message *\/\n .no-results {\n color: var(--text-muted);\n font-style: normal;\n margin-top: 30px;\n padding: 25px;\n background-color: var(--input-bg); \/* Using input-bg for a subtle difference *\/\n border-radius: var(--radius);\n border: 1px dashed var(--border-input); \/* Dashed border for notice *\/\n text-align: center;\n font-size: 1.05em;\n }\n\n \/* --- Modal Styles --- *\/\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: rgba(0,0,0,0.5);\n }\n\n .modal-content {\n background-color: var(--card-bg);\n margin: 8% auto;\n padding: 30px 35px;\n border: 1px solid var(--border-light);\n width: 85%;\n max-width: 600px;\n border-radius: var(--radius);\n position: relative;\n text-align: left;\n box-shadow: 0 5px 20px rgba(0,0,0,0.1);\n }\n\n .modal-close {\n color: #888;\n position: absolute;\n top: 15px;\n right: 20px;\n font-size: 32px;\n font-weight: normal;\n line-height: 1;\n cursor: pointer;\n }\n .modal-close:hover,\n .modal-close:focus {\n color: var(--text);\n text-decoration: none;\n }\n\n .modal h2 {\n margin-top: 0;\n margin-bottom: 20px;\n color: var(--primary); \/* Header color in modal *\/\n font-size: 1.8em;\n border-bottom: 1px solid #f1f3f5;\n padding-bottom: 15px;\n font-weight: 600;\n }\n .modal .modal-image {\n float: right;\n margin-left: 25px;\n margin-bottom: 15px;\n width: 100px;\n height: 100px;\n object-fit: cover;\n border-radius: 50%;\n border: 3px solid #f1f3f5;\n }\n\n .modal p {\n margin-bottom: 12px;\n line-height: 1.6;\n color: var(--text-muted);\n }\n .modal p strong {\n color: var(--text);\n min-width: 110px;\n display: inline-block;\n font-weight: 500;\n }\n .modal .season-indicator-list {\n display: flex;\n gap: 5px;\n flex-wrap: wrap;\n margin-top: 8px;\n }\n .month-indicator {\n display: inline-block;\n width: 2.4em;\n text-align: center;\n padding: 4px 0;\n border-radius: 5px;\n line-height: 1.3;\n font-size: 0.75em;\n font-weight: 500;\n \/* Default: Unavailable *\/\n background-color: var(--season-unavailable);\n color: white;\n }\n .month-indicator.available-season { \/* In Season *\/\n background-color: var(--season-available);\n color: var(--text); \/* Dark text for yellow bg *\/\n }\n .month-indicator.peak-season { \/* Peak Season *\/\n background-color: var(--season-peak);\n color: white;\n }\n\n \/* Responsive Adjustments *\/\n @media (max-width: 992px) {\n .control-group {\n min-width: 180px;\n }\n }\n @media (max-width: 768px) {\n .controls-area {\n flex-direction: column;\n align-items: stretch;\n padding: 15px;\n }\n .control-group {\n min-width: unset;\n width: 100%;\n }\n .control-group button#clear-filters-btn {\n margin-top: 10px;\n align-self: stretch;\n }\n .flower-grid {\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n gap: 15px;\n }\n .modal-content {\n width: 90%;\n margin: 10% auto;\n padding: 25px;\n }\n .modal .modal-image {\n float: none;\n display: block;\n margin: 0 auto 20px auto;\n }\n }\n\n @media (max-width: 480px) {\n header h1 { font-size: 1.9em; }\n header p { font-size: 1em; }\n .container { padding: 20px 15px; }\n\n .flower-grid {\n grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\n }\n .flower-card img { width: 70px; height: 70px; }\n .flower-card .card-buttons button.details-btn { font-size: 0.8em; padding: 6px 12px; }\n\n .modal h2 { font-size: 1.5em; }\n .modal p { font-size: 0.9em; }\n .modal p strong { min-width: auto; display: block; margin-bottom: 2px;}\n .modal-content { padding: 20px; }\n .modal-close { right: 15px; top: 12px; }\n .month-indicator { width: 2.1em; font-size: 0.7em;}\n }\n\n <\/style>\n<\/head>\n<body>\n\n <div class=\"container\">\n <div class=\"content-wrapper\">\n <header>\n <h1>Seasonal <span class=\"accent-color\">Flower<\/span> Availability Tool<\/h1>\n <p>\n Search or filter flowers by month, price, or category. Sort the results. Click 'Details' for complete info.\n <br>Availability: <span class=\"text-unavailable\">Red<\/span> = Low\/No availability, <span class=\"text-available\">Yellow<\/span> = Medium availability, <span class=\"text-peak\">Green<\/span> = High availability.\n <small>\n Note: Monthly availability and peak seasons indicated in this tool are based on floral market behavior and horticultural production in Southern Europe (especially Mediterranean climate regions like Spain, Italy, Portugal, and Southern France).\n <\/small>\n <\/p>\n <\/header>\n\n \n <div class=\"controls-area\">\n <div class=\"control-group\">\n <label for=\"search-input\">Search by Name:<\/label>\n <input type=\"search\" id=\"search-input\" placeholder=\"Enter a name...\">\n <\/div>\n <div class=\"control-group\">\n <label for=\"month-select\">Month:<\/label>\n <select id=\"month-select\">\n \n <\/select>\n <\/div>\n <div class=\"control-group\">\n <label for=\"price-filter\">Price Tier:<\/label>\n <select id=\"price-filter\">\n <option value=\"all\">All Prices<\/option>\n \n <\/select>\n <\/div>\n <div class=\"control-group\">\n <label for=\"category-filter\">Category:<\/label>\n <select id=\"category-filter\">\n <option value=\"all\">All Categories<\/option>\n \n <\/select>\n <\/div>\n <div class=\"control-group\">\n <label for=\"sort-select\">Sort by:<\/label>\n <select id=\"sort-select\">\n <option value=\"name-asc\">Name (A-Z)<\/option>\n <option value=\"price-asc\">Price (Low-High)<\/option>\n <option value=\"price-desc\">Price (High-Low)<\/option>\n <option value=\"vase-asc\">Vase Life (Short-Long)<\/option>\n <option value=\"vase-desc\">Vase Life (Long-Short)<\/option>\n <\/select>\n <\/div>\n <div class=\"control-group\">\n <button id=\"clear-filters-btn\"><i class=\"fas fa-eraser\"><\/i>Clear Filters<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"flower-results\" class=\"flower-grid\">\n \n <\/div>\n <div id=\"no-results-message\" class=\"no-results\" style=\"display: none;\">\n No flowers or greenery match your criteria. Try changing the filters or search terms.\n <\/div>\n <\/div> \n\n \n\n <\/div> \n\n \n <div id=\"flower-detail-modal\" class=\"modal\">\n <div class=\"modal-content\">\n <span class=\"modal-close\">\u00d7<\/span>\n <img decoding=\"async\" id=\"modal-img\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\" alt=\"Flower Image\" class=\"lazyload modal-image\">\n <h2 id=\"modal-name\">Flower Name<\/h2>\n <p><strong>Price Tier:<\/strong> <span id=\"modal-price\"><\/span><\/p>\n <p><strong>Category:<\/strong> <span id=\"modal-category\"><\/span><\/p>\n <p><strong>Est. Vase Life:<\/strong> <span id=\"modal-vaselife\"><\/span><\/p>\n <p><strong>Possible Substitutes:<\/strong> <span id=\"modal-substitutes\"><\/span><\/p>\n <p><strong>Notes:<\/strong> <span id=\"modal-notes\"><\/span><\/p>\n <p><strong>Availability:<\/strong><\/p>\n <div id=\"modal-season-indicators\" class=\"season-indicator-list\">\n \n <\/div>\n <\/div>\n <\/div>\n\n\n <script>\n \/\/ --- Flower Data ---\n const flowerData = [\n {\n id: \"rose_std\", name: \"Rose\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/freedommatina?1694615970\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [6, 7],\n priceTier: \"$$$\", category: \"Focal\", vaseLife: \"7-12 days\", substitutes: [\"Garden Rose\", \"Lisianthus\"], notes: \"Wide variety of types available.\"\n },\n {\n id: \"carnation_std\", name: \"Carnation\", image: \"https:\/\/images.unsplash.com\/photo-1527061011665-3652c757a4d4?q=80&w=1972&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [],\n priceTier: \"$\", category: \"Filler\/Focal\", vaseLife: \"10-20 days\", substitutes: [\"Mini Carnation\", \"Dianthus\"], notes: \"Very long-lasting.\"\n },\n {\n id: \"gerbera_std\", name: \"Gerbera\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/117074?1716375175\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [5, 6, 7, 8],\n priceTier: \"$$\", category: \"Focal\", vaseLife: \"5-9 days\", substitutes: [\"Sunflower (mini)\", \"Chrysanthemum (Daisy)\"], notes: \"Needs proper hydration.\"\n },\n {\n id: \"alstroemeria\", name: \"Alstroemeria\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/151302?1727083748\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [5, 6, 7],\n priceTier: \"$$\", category: \"Filler\/Focal\", vaseLife: \"10-14 days\", substitutes: [\"Lily (Asiatic, small)\", \"Freesia\"], notes: \"Long vase life, leaves yellow before flowers.\"\n },\n {\n id: \"anthurium\", name: \"Anthurium\", image: \"https:\/\/images.unsplash.com\/photo-1607334386016-091a546f457d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [],\n priceTier: \"$$$\", category: \"Focal\/Line\", vaseLife: \"14-28 days\", substitutes: [\"Calla Lily (large)\"], notes: \"Tropical, needs warmth, very long-lasting.\"\n },\n {\n id: \"babysbreath\", name: \"Gypsophila (Baby's Breath)\", image: \"https:\/\/images.unsplash.com\/photo-1648170037882-dbc37e0789e4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [6, 7, 8],\n priceTier: \"$\", category: \"Filler\", vaseLife: \"7-10 days\", substitutes: [\"Solidago\", \"Waxflower\", \"Statice\"], notes: \"May have a characteristic scent. Different varieties available.\"\n },\n {\n id: \"tulip_std\", name: \"Tulip\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/32564?1741178125\",\n seasons: [1, 2, 3, 4, 5, 11, 12], highSeasons: [3, 4],\n priceTier: \"$$\", category: \"Focal\/Line\", vaseLife: \"4-7 days\", substitutes: [\"Anemone\", \"Ranunculus\"], notes: \"Continues to grow after cutting, phototropic.\"\n },\n {\n id: \"peony\", name: \"Peony\", image: \"https:\/\/images.unsplash.com\/photo-1575178094668-132dc931ad35?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [4, 5, 6], highSeasons: [5],\n priceTier: \"$$$$\", category: \"Focal\", vaseLife: \"5-7 days\", substitutes: [\"Garden Rose\", \"Ranunculus (Cloni)\", \"Double Tulip\"], notes: \"Highly sought after, short season, variable opening.\"\n },\n {\n id: \"sunflower\", name: \"Sunflower\", image: \"https:\/\/images.unsplash.com\/photo-1597848212624-a19eb35e2651?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [6, 7, 8, 9, 10], highSeasons: [7, 8],\n priceTier: \"$$\", category: \"Focal\", vaseLife: \"6-10 days\", substitutes: [\"Gerbera\", \"Rudbeckia\", \"Chrysanthemum\"], notes: \"Can be top-heavy, ensure good hydration.\"\n },\n {\n id: \"daffodil\", name: \"Daffodil\", image: \"https:\/\/images.unsplash.com\/photo-1617585370679-920e8cde24f4?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [2, 3, 4], highSeasons: [3],\n priceTier: \"$$\", category: \"Focal\/Accent\", vaseLife: \"4-6 days\", substitutes: [\"Daffodil (other types)\"], notes: \"Exudes sap harmful to other flowers; condition separately first.\"\n },\n {\n id: \"lily_gen\", name: \"Lily (General)\", image: \"https:\/\/images.unsplash.com\/photo-1561897519-6e4fbd1fbc41?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [5, 6, 7, 8], highSeasons: [6, 7],\n priceTier: \"$$$\", category: \"Focal\/Line\", vaseLife: \"7-14 days\", substitutes: [\"Alstroemeria\"], notes: \"Specify Asiatic (unscented) or Oriental (scented).\"\n },\n {\n id: \"lily_asiatic\", name: \"Lily Asiatic\/Oriental\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/12002?1652864881\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [6, 7, 8, 12],\n priceTier: \"$$$\", category: \"Focal\/Line\", vaseLife: \"7-14 days\", substitutes: [\"Alstroemeria\"], notes: \"Asiatic often unscented, Oriental scented. Remove pollen.\"\n },\n {\n id: \"hyacinth\", name: \"Hyacinth\", image: \"https:\/\/images.unsplash.com\/photo-1580546360504-95e34ddc5ba0?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4], highSeasons: [3],\n priceTier: \"$$\", category: \"Focal\/Accent\", vaseLife: \"5-8 days\", substitutes: [\"Stock\", \"Delphinium (short)\"], notes: \"Strong fragrance, bulb flower.\"\n },\n {\n id: \"dahlia\", name: \"Dahlia\", image: \"https:\/\/images.unsplash.com\/photo-1620062317671-ef6441546d7d?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [7, 8, 9, 10], highSeasons: [8, 9],\n priceTier: \"$$$\", category: \"Focal\", vaseLife: \"4-7 days\", substitutes: [\"Chrysanthemum (large)\", \"Zinnia\"], notes: \"Great variety in shape and size. May have shorter vase life.\"\n },\n {\n id: \"chrysanthemum\", name: \"Chrysanthemum\", image: \"https:\/\/images.unsplash.com\/photo-1695384287398-5781a1f51c31?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [9, 10, 11],\n priceTier: \"$\", category: \"Focal\/Filler\", vaseLife: \"10-21 days\", substitutes: [\"Aster\", \"Daisy\", \"Gerbera\"], notes: \"Many types (pompon, spider, button, daisy). Very long-lasting.\"\n },\n {\n id: \"anemone\", name: \"Anemone\", image: \"https:\/\/images.unsplash.com\/photo-1559979334-dd5cc8ccd499?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4, 10, 11, 12], highSeasons: [3, 4, 11],\n priceTier: \"$$$\", category: \"Focal\/Accent\", vaseLife: \"4-8 days\", substitutes: [\"Ranunculus\", \"Poppy\"], notes: \"Distinctive dark center, petals close at night\/in cold.\"\n },\n {\n id: \"ranunculus\", name: \"Ranunculus\", image: \"https:\/\/images.unsplash.com\/photo-1578668436762-d8f781339bbe?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4, 5, 11, 12], highSeasons: [3, 4],\n priceTier: \"$$$\", category: \"Focal\/Filler\", vaseLife: \"5-9 days\", substitutes: [\"Peony (small)\", \"Garden Rose\", \"Anemone\"], notes: \"Many petals, opens beautifully. Cloni varieties are larger.\"\n },\n {\n id: \"lavender\", name: \"Lavender\", image: \"https:\/\/images.unsplash.com\/photo-1565011523534-747a8601f10a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [6, 7, 8], highSeasons: [7],\n priceTier: \"$\", category: \"Filler\/Accent\", vaseLife: \"7-10 days (fresh), long (dried)\", substitutes: [\"Limonium\", \"Statice\", \"Veronica\"], notes: \"Fragrant, often used dried.\"\n },\n {\n id: \"aster\", name: \"Aster\", image: \"https:\/\/images.unsplash.com\/photo-1718475424233-2de4952c6a26?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [8, 9, 10], highSeasons: [9],\n priceTier: \"$\", category: \"Filler\", vaseLife: \"7-12 days\", substitutes: [\"Solidago\", \"Chrysanthemum (button)\", \"Limonium\"], notes: \"Daisy-like filler, good autumn texture.\"\n },\n {\n id: \"callalily\", name: \"Calla Lily\", image: \"https:\/\/images.unsplash.com\/photo-1650355648621-1a0445f7f9b4?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [3, 4, 5, 6, 7, 8, 9, 10], highSeasons: [5, 6],\n priceTier: \"$$$\", category: \"Focal\/Line\", vaseLife: \"7-10 days\", substitutes: [\"Anthurium\", \"Tulip (French)\"], notes: \"Elegant shape, mini and large varieties available.\"\n },\n {\n id: \"hydrangea\", name: \"Hydrangea\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/132346?1718724376\",\n seasons: [5, 6, 7, 8, 9, 10, 11], highSeasons: [7, 8],\n priceTier: \"$$$\", category: \"Focal\/Filler\", vaseLife: \"5-9 days\", substitutes: [\"Viburnum (Snowball)\", \"Garden Rose (large)\"], notes: \"High water needs, 'antique' varieties available later.\"\n },\n {\n id: \"limonium\", name: \"Limonium (Statice)\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/145638?1743683386\",\n seasons: [4, 5, 6, 7, 8, 9, 10, 11], highSeasons: [7, 8, 9],\n priceTier: \"$\", category: \"Filler\", vaseLife: \"10-14 days (fresh), long (dried)\", substitutes: [\"Statice (other)\", \"Gypsophila\", \"Waxflower\"], notes: \"Good filler, airy texture, dries well.\"\n },\n {\n id: \"lisianthus\", name: \"Lisianthus (Eustoma)\", image: \"https:\/\/images.unsplash.com\/photo-1689085055401-2e6a7268d6ca?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [5, 6, 7, 8, 9, 10, 11], highSeasons: [7, 8],\n priceTier: \"$$$\", category: \"Focal\/Filler\", vaseLife: \"7-12 days\", substitutes: [\"Rose (Mini)\", \"Ranunculus\", \"Carnation\"], notes: \"Delicate petals, looks like a rose but more ruffled.\"\n },\n {\n id: \"orchid_gen\", name: \"Orchid\", image: \"https:\/\/images.unsplash.com\/photo-1610397648930-477b8c7f0943?q=80&w=1930&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [],\n priceTier: \"$$$$\", category: \"Focal\/Accent\", vaseLife: \"10-25 days\", substitutes: [\"Depends on type\"], notes: \"Specify type (Phalaenopsis, Cymbidium, Dendrobium, etc.).\"\n },\n {\n id: \"orchid_cymbidium\", name: \"Orchid Cymbidium\", image: \"https:\/\/images.unsplash.com\/photo-1684841881083-c0c54cf00995?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n seasons: [10, 11, 12, 1, 2, 3, 4, 5], highSeasons: [11, 12, 1, 2],\n priceTier: \"$$$$\", category: \"Focal\/Line\", vaseLife: \"14-28 days\", substitutes: [\"Orchid Phalaenopsis\"], notes: \"Large stems, waxy flowers, very long-lasting.\"\n },\n {\n id: \"orchid_dendrobium\", name: \"Orchid Dendrobium\", image: \"https:\/\/cdn.verdnatura.es\/image\/catalog\/1600x900\/10651?1558961097\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5],\n priceTier: \"$$$\", category: \"Line\/Accent\", vaseLife: \"7-14 days\", substitutes: [\"Orchid Mokara\"], notes: \"Stems of smaller flowers, often used in tropical work.\"\n },\n {\n id: \"eucaliptus\", name: \"Eucalyptus\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Eucaliptus.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 9, 10, 11],\n priceTier: \"$$\", category: \"Greenery\", vaseLife: \"10-20 days\", substitutes: [\"Ruscus\", \"Salal\"],\n notes: \"Fragrant, diverse varieties (cinerea, parvifolia, populus, silver dollar, etc.). Ideal for volume and aroma.\"\n },\n {\n id: \"helecho\", name: \"Fern\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Helecho.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 9, 10, 11],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"7-14 days\", substitutes: [\"Aralia (leaf)\", \"Aspidistra (leaf)\"],\n notes: \"Classic for base greenery. Varieties like leatherleaf fern, sword fern.\"\n },\n {\n id: \"lentisco\", name: \"Mastic\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/lentisco.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 9, 10, 11],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"10-18 days\", substitutes: [\"Myrtle\", \"Pittosporum\"],\n notes: \"Robust and durable Mediterranean foliage, sometimes with small berries.\"\n },\n {\n id: \"aspidistra\", name: \"Aspidistra\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Aspidistra.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 6, 7, 8],\n priceTier: \"$$\", category: \"Greenery\", vaseLife: \"14-28 days\", substitutes: [\"Monstera (leaf)\", \"Ti leaf\"],\n notes: \"Large, wide, and very durable leaf. Ideal for lining containers or as a structural element.\"\n },\n {\n id: \"aralia\", name: \"Aralia\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Aralia.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 6, 7, 8],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"7-12 days\", substitutes: [\"Fern (large leaf)\", \"Fatsia\"],\n notes: \"Large palmate leaf, provides good base coverage.\"\n },\n {\n id: \"robellini\", name: \"Robellini Palm\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/roebelenii.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [6, 7, 8],\n priceTier: \"$$\", category: \"Greenery\", vaseLife: \"10-20 days\", substitutes: [\"Kentia Palm leaf\", \"Chico Leaf\"],\n notes: \"Elegant palm leaf, adds a tropical and linear touch.\"\n },\n {\n id: \"falsa_pimienta\", name: \"Pepper Tree Foliage\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Falsa-Pimienta.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [6, 7, 8],\n priceTier: \"$$\", category: \"Greenery\", vaseLife: \"7-14 days\", substitutes: [\"Eucalyptus (with seeds)\", \"Cotoneaster\"],\n notes: \"Draping branches with fine foliage, often with decorative pink berries. Fragrant.\"\n },\n {\n id: \"romero\", name: \"Rosemary\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Romero.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 9, 10, 11],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"5-10 days\", substitutes: [\"Lavender (foliage)\", \"Thyme (foliage)\"],\n notes: \"Aromatic, ideal for a rustic or Mediterranean touch. May have small flowers.\"\n },\n {\n id: \"salal\", name: \"Salal (Lemon Leaf)\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Salal.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 6, 7, 8],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"10-21 days\", substitutes: [\"Ruscus\", \"Pittosporum\"],\n notes: \"Robust, dark green leaves, very long-lasting. A staple in floristry.\"\n },\n {\n id: \"ilex\", name: \"Ilex (Holly)\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Ilex.webp\",\n seasons: [9, 10, 11, 12, 1, 2], highSeasons: [11, 12, 1],\n priceTier: \"$$$\", category: \"Greenery\", vaseLife: \"10-20 days\", substitutes: [\"Cotoneaster (with berries)\", \"Skimmia (with berries)\"],\n notes: \"Traditional Christmas greenery, with bright red berries. Green varieties (without berries) also available.\"\n },\n {\n id: \"hiedra\", name: \"Ivy\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Hiedra.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 9, 10, 11],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"7-14 days\", substitutes: [\"Ruscus (for garlands)\", \"Jasmine (foliage)\"],\n notes: \"Versatile, available in different sizes and variegations. Ideal for draping effects or covering bases.\"\n },\n {\n id: \"tuya\", name: \"Thuja (Arborvitae)\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Tuya.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [11, 12, 1],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"10-20 days\", substitutes: [\"Cypress\", \"Juniper\"],\n notes: \"Conifer foliage, flat and scaly texture. Resinous aroma, good for winter arrangements.\"\n },\n {\n id: \"chico_leaf\", name: \"Chico Leaf\", image: \"https:\/\/verdnatura.es\/wp-content\/uploads\/2025\/05\/Chico.webp\",\n seasons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], highSeasons: [3, 4, 5, 6, 7, 8],\n priceTier: \"$\", category: \"Greenery\", vaseLife: \"7-14 days\", substitutes: [\"Robellini Palm (small)\", \"Areca Palm leaf\"],\n notes: \"Small, delicate palm leaf, ideal for fine details, boutonnieres, or discreet tropical accents.\"\n }\n ];\n\n \/\/ --- DOM Elements ---\n const searchInput = document.getElementById('search-input');\n const monthSelect = document.getElementById('month-select');\n const priceFilter = document.getElementById('price-filter');\n const categoryFilter = document.getElementById('category-filter');\n const sortSelect = document.getElementById('sort-select');\n const clearFiltersBtn = document.getElementById('clear-filters-btn');\n const flowerResultsDiv = document.getElementById('flower-results');\n const noResultsMessageDiv = document.getElementById('no-results-message');\n const modal = document.getElementById('flower-detail-modal');\n const modalCloseBtn = document.querySelector('.modal-close');\n const modalImg = document.getElementById('modal-img');\n const modalName = document.getElementById('modal-name');\n const modalPrice = document.getElementById('modal-price');\n const modalCategory = document.getElementById('modal-category');\n const modalVaseLife = document.getElementById('modal-vaselife');\n const modalSubstitutes = document.getElementById('modal-substitutes');\n const modalNotes = document.getElementById('modal-notes');\n const modalSeasonIndicators = document.getElementById('modal-season-indicators');\n\n const months = [\n \"January\", \"February\", \"March\", \"April\", \"May\", \"June\",\n \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"\n ];\n const monthAbbr = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n\n function normalizeText(text) {\n if (typeof text !== 'string') return '';\n return text.normalize(\"NFD\").replace(\/[\\u0300-\\u036f]\/g, \"\").toLowerCase();\n }\n\n function parseVaseLife(vaseLifeStr) {\n if (!vaseLifeStr) return 0;\n const match = vaseLifeStr.match(\/\\d+\/);\n return match ? parseInt(match[0], 10) : 0;\n }\n function parsePriceTier(priceTierStr) {\n if (!priceTierStr) return 0;\n return priceTierStr.length;\n }\n function populateSelect(selectElement, optionsArray, defaultOptionText) {\n const firstOption = selectElement.options[0]; \/\/ Keep the \"All Prices\/Categories\"\n const selectedValue = selectElement.value; \/\/ Preserve selection\n selectElement.innerHTML = ''; \/\/ Clear existing options except the first one\n if (firstOption && firstOption.value === \"all\") {\n selectElement.appendChild(firstOption); \/\/ Re-add the default \"All\" option\n }\n\n [...new Set(optionsArray)].sort((a, b) => a.localeCompare(b, 'en')).forEach(optionText => {\n if(optionText) {\n const option = document.createElement('option');\n option.value = optionText;\n option.textContent = optionText;\n selectElement.appendChild(option);\n }\n });\n selectElement.value = selectedValue; \/\/ Restore selection\n }\n function createModalSeasonIndicators(flower) {\n modalSeasonIndicators.innerHTML = '';\n monthAbbr.forEach((abbr, index) => {\n const monthNum = index + 1;\n const monthSpan = document.createElement('span');\n monthSpan.className = 'month-indicator'; \/\/ Base class (default red)\n monthSpan.textContent = abbr;\n \n if (flower.highSeasons && flower.highSeasons.includes(monthNum)) {\n monthSpan.classList.remove('available-season'); \/\/ Ensure no conflict\n monthSpan.classList.add('peak-season'); \/\/ Green for peak season\n } else if (flower.seasons && flower.seasons.includes(monthNum)) {\n monthSpan.classList.add('available-season'); \/\/ Yellow for in season\n }\n \/\/ Default is red (unavailable), handled by .month-indicator base style\n modalSeasonIndicators.appendChild(monthSpan);\n });\n }\n function showFlowerDetails(flowerId) {\n const flower = flowerData.find(f => f.id === flowerId);\n if (!flower) return;\n modalName.textContent = flower.name;\n modalImg.src = flower.image;\n modalImg.alt = flower.name;\n modalImg.onerror = function() { this.src='https:\/\/via.placeholder.com\/100\/f0f0f0\/cccccc?text=No+Image'; };\n modalPrice.textContent = flower.priceTier || 'N\/A';\n modalCategory.textContent = flower.category || 'N\/A';\n modalVaseLife.textContent = flower.vaseLife || 'N\/A';\n modalSubstitutes.textContent = flower.substitutes ? (Array.isArray(flower.substitutes) ? flower.substitutes.join(', ') : flower.substitutes) : 'None listed';\n modalNotes.textContent = flower.notes || 'No notes.';\n createModalSeasonIndicators(flower);\n modal.style.display = \"block\";\n document.body.style.overflow = 'hidden'; \/\/ Prevent background scrolling\n }\n function closeModal() {\n modal.style.display = \"none\";\n document.body.style.overflow = 'auto'; \/\/ Restore background scrolling\n }\n\n function populateFilters() {\n const allMonthOption = document.createElement('option');\n allMonthOption.value = \"all\";\n allMonthOption.textContent = \"-- All Months --\";\n monthSelect.appendChild(allMonthOption);\n months.forEach((month, index) => {\n const option = document.createElement('option');\n option.value = index + 1;\n option.textContent = month;\n monthSelect.appendChild(option);\n });\n\n const allPrices = flowerData.map(f => f.priceTier).filter(Boolean);\n const allCategories = flowerData.map(f => f.category).filter(Boolean);\n\n populateSelect(priceFilter, allPrices, priceFilter.options[0].textContent);\n populateSelect(categoryFilter, allCategories, categoryFilter.options[0].textContent);\n }\n\n function displayFlowers() {\n flowerResultsDiv.innerHTML = '';\n noResultsMessageDiv.style.display = 'none';\n\n const searchTermRaw = searchInput.value.trim();\n const searchTerm = normalizeText(searchTermRaw);\n const selectedMonth = monthSelect.value;\n const selectedPrice = priceFilter.value;\n const selectedCategory = categoryFilter.value;\n const selectedSort = sortSelect.value;\n\n let filteredFlowers = [...flowerData];\n\n if (searchTerm) {\n filteredFlowers = filteredFlowers.filter(flower =>\n normalizeText(flower.name).includes(searchTerm)\n );\n }\n\n if (selectedMonth !== \"all\") {\n const monthInt = parseInt(selectedMonth);\n filteredFlowers = filteredFlowers.filter(flower => flower.seasons && flower.seasons.includes(monthInt));\n }\n\n if (selectedPrice !== \"all\") {\n filteredFlowers = filteredFlowers.filter(flower => flower.priceTier === selectedPrice);\n }\n\n if (selectedCategory !== \"all\") {\n filteredFlowers = filteredFlowers.filter(flower => flower.category && normalizeText(flower.category) === normalizeText(selectedCategory));\n }\n\n filteredFlowers.sort((a, b) => {\n switch (selectedSort) {\n case 'price-asc':\n return parsePriceTier(a.priceTier) - parsePriceTier(b.priceTier);\n case 'price-desc':\n return parsePriceTier(b.priceTier) - parsePriceTier(a.priceTier);\n case 'vase-asc':\n return parseVaseLife(a.vaseLife) - parseVaseLife(b.vaseLife);\n case 'vase-desc':\n return parseVaseLife(b.vaseLife) - parseVaseLife(a.vaseLife);\n case 'name-asc':\n default:\n return a.name.localeCompare(b.name, 'en');\n }\n });\n\n if (filteredFlowers.length === 0) {\n noResultsMessageDiv.textContent = \"No flowers or greenery match your criteria. Try changing the filters or search terms.\";\n noResultsMessageDiv.style.display = 'block';\n } else {\n filteredFlowers.forEach(flower => {\n const card = document.createElement('div');\n card.className = 'flower-card';\n card.dataset.flowerId = flower.id;\n\n const img = document.createElement('img');\n img.src = flower.image;\n img.alt = flower.name;\n img.onerror = function() { this.src='https:\/\/via.placeholder.com\/80\/f0f0f0\/cccccc?text=No+Img'; };\n\n const nameP = document.createElement('p');\n nameP.className = 'flower-name';\n nameP.textContent = flower.name;\n\n const priceP = document.createElement('p');\n priceP.className = 'flower-price-tier';\n priceP.textContent = flower.priceTier || '';\n\n const buttonsDiv = document.createElement('div');\n buttonsDiv.className = 'card-buttons';\n\n const detailsBtn = document.createElement('button');\n detailsBtn.className = 'details-btn card-btn';\n detailsBtn.textContent = 'Details';\n detailsBtn.dataset.flowerId = flower.id;\n\n buttonsDiv.appendChild(detailsBtn);\n\n card.appendChild(img);\n card.appendChild(nameP);\n card.appendChild(priceP);\n card.appendChild(buttonsDiv);\n\n flowerResultsDiv.appendChild(card);\n });\n }\n }\n\n\n searchInput.addEventListener('input', displayFlowers);\n monthSelect.addEventListener('change', displayFlowers);\n priceFilter.addEventListener('change', displayFlowers);\n categoryFilter.addEventListener('change', displayFlowers);\n sortSelect.addEventListener('change', displayFlowers);\n\n clearFiltersBtn.addEventListener('click', () => {\n searchInput.value = '';\n monthSelect.value = \"all\";\n priceFilter.value = \"all\";\n categoryFilter.value = \"all\";\n sortSelect.value = \"name-asc\";\n displayFlowers();\n });\n\n flowerResultsDiv.addEventListener('click', (event) => {\n const target = event.target.closest('.details-btn'); \/\/ Ensure clicking icon inside button still works\n if (target) {\n const flowerId = target.dataset.flowerId;\n showFlowerDetails(flowerId);\n }\n });\n\n modalCloseBtn.addEventListener('click', closeModal);\n window.addEventListener('click', (event) => {\n if (event.target == modal) {\n closeModal();\n }\n });\n window.addEventListener('keydown', (event) => {\n if (event.key === 'Escape' && modal.style.display === \"block\") {\n closeModal();\n }\n });\n\n\n function init() {\n populateFilters();\n displayFlowers();\n }\n\n document.addEventListener('DOMContentLoaded', init);\n\n <\/script>\n<\/body>\n<\/html><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-24888","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\n<title>Floral Availability Tool by Season - Verdnatura<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Floral Availability Tool by Season - Verdnatura\" \/>\n<meta property=\"og:url\" content=\"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/\" \/>\n<meta property=\"og:site_name\" content=\"Verdnatura\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-07T05:23:08+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/\",\"url\":\"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/\",\"name\":\"Floral Availability Tool by Season - Verdnatura\",\"isPartOf\":{\"@id\":\"https:\/\/verdnatura.info\/en\/#website\"},\"datePublished\":\"2025-10-06T10:36:39+00:00\",\"dateModified\":\"2025-10-07T05:23:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/verdnatura.info\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Floral Availability Tool by Season\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/verdnatura.info\/en\/#website\",\"url\":\"https:\/\/verdnatura.info\/en\/\",\"name\":\"Verdnatura\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/verdnatura.info\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n","yoast_head_json":{"title":"Floral Availability Tool by Season - Verdnatura","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/","og_locale":"en_US","og_type":"article","og_title":"Floral Availability Tool by Season - Verdnatura","og_url":"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/","og_site_name":"Verdnatura","article_modified_time":"2025-10-07T05:23:08+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/","url":"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/","name":"Floral Availability Tool by Season - Verdnatura","isPartOf":{"@id":"https:\/\/verdnatura.info\/en\/#website"},"datePublished":"2025-10-06T10:36:39+00:00","dateModified":"2025-10-07T05:23:08+00:00","breadcrumb":{"@id":"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/verdnatura.info\/en\/floral-availability-seasons\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/verdnatura.info\/en\/floral-availability-seasons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/verdnatura.info\/en\/"},{"@type":"ListItem","position":2,"name":"Floral Availability Tool by Season"}]},{"@type":"WebSite","@id":"https:\/\/verdnatura.info\/en\/#website","url":"https:\/\/verdnatura.info\/en\/","name":"Verdnatura","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/verdnatura.info\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages\/24888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/comments?post=24888"}],"version-history":[{"count":1,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages\/24888\/revisions"}],"predecessor-version":[{"id":24889,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages\/24888\/revisions\/24889"}],"wp:attachment":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/media?parent=24888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}