{"id":1518,"date":"2024-05-09T18:34:44","date_gmt":"2024-05-09T18:34:44","guid":{"rendered":"http:\/\/deela.se\/?page_id=1518"},"modified":"2026-02-28T14:35:02","modified_gmt":"2026-02-28T14:35:02","slug":"item","status":"publish","type":"page","link":"https:\/\/deela.se\/sv\/item\/","title":{"rendered":"Deela waste reduction"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Deela - Loading...<\/title>\r\n\r\n <!-- OG Meta -->\r\n <meta property=\"og:type\" content=\"website\" \/>\r\n <meta property=\"og:site_name\" content=\"Deela\" \/>\r\n <meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n\r\n <!-- Fonts: Poppins for body, matching the app -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <style>\r\n \/* ============================================\r\n DEELA DESIGN SYSTEM (web translation)\r\n Primary: #43A94B Orange: #FF7F11\r\n Backgrounds: #F9FAFB (grey.shade50), #FFF (cards)\r\n Shadows: 0 2px 10px rgba(0,0,0,0.03)\r\n Radii: 16px cards, 14px buttons, 12px images\r\n ============================================ *\/\r\n\r\n :root {\r\n --primary: #43A94B;\r\n --primary-light: rgba(67, 169, 75, 0.10);\r\n --primary-dark: #388F40;\r\n --orange: #FF7F11;\r\n --orange-light: rgba(255, 127, 17, 0.10);\r\n --bg: #F9FAFB;\r\n --card: #FFFFFF;\r\n --text-primary: rgba(0, 0, 0, 0.87);\r\n --text-secondary: #757575;\r\n --text-subtle: #9E9E9E;\r\n --text-hint: #BDBDBD;\r\n --border: #F0F0F0;\r\n --shadow-card: 0 2px 10px rgba(0,0,0,0.03);\r\n --shadow-header: 0 2px 10px rgba(0,0,0,0.05);\r\n --shadow-elevated: 0 8px 30px rgba(0,0,0,0.08);\r\n --radius-card: 16px;\r\n --radius-btn: 14px;\r\n --radius-img: 12px;\r\n --radius-pill: 24px;\r\n --radius-badge: 20px;\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n background: var(--bg);\r\n color: var(--text-primary);\r\n -webkit-font-smoothing: antialiased;\r\n min-height: 100vh;\r\n -webkit-tap-highlight-color: transparent;\r\n -webkit-text-size-adjust: 100%;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2500\u2500 Page wrapper \u2500\u2500 *\/\r\n .page-wrap {\r\n max-width: 960px;\r\n margin: 0 auto;\r\n padding: 24px 16px 100px;\r\n }\r\n\r\n \/* \u2500\u2500 Image gallery \u2500\u2500 *\/\r\n .gallery {\r\n position: relative;\r\n border-radius: var(--radius-card);\r\n overflow: hidden;\r\n box-shadow: var(--shadow-card);\r\n background: #e8e8e8;\r\n aspect-ratio: 4 \/ 3;\r\n cursor: pointer;\r\n margin-top: 12px;\r\n }\r\n\r\n .gallery img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .gallery:hover img {\r\n transform: scale(1.03);\r\n }\r\n\r\n .gallery-badge {\r\n position: absolute;\r\n top: 16px;\r\n right: 16px;\r\n background: rgba(0, 0, 0, 0.55);\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n color: #fff;\r\n padding: 6px 14px;\r\n border-radius: var(--radius-badge);\r\n font-size: 12px;\r\n font-weight: 600;\r\n display: none;\r\n }\r\n\r\n .status-pill {\r\n position: absolute;\r\n top: 16px;\r\n left: 16px;\r\n padding: 6px 14px;\r\n border-radius: var(--radius-badge);\r\n font-size: 11px;\r\n font-weight: 600;\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n }\r\n\r\n .status-available {\r\n background: rgba(67, 169, 75, 0.88);\r\n color: #fff;\r\n }\r\n\r\n .status-reserved {\r\n background: rgba(255, 127, 17, 0.88);\r\n color: #fff;\r\n }\r\n\r\n .status-delivered {\r\n background: rgba(108, 117, 125, 0.82);\r\n color: #fff;\r\n }\r\n\r\n \/* \u2500\u2500 Title row \u2500\u2500 *\/\r\n .title-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-top: 20px;\r\n gap: 12px;\r\n }\r\n\r\n .item-title {\r\n font-size: 24px;\r\n font-weight: 700;\r\n color: var(--text-primary);\r\n line-height: 1.25;\r\n }\r\n\r\n .title-meta {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n margin-top: 6px;\r\n font-size: 13px;\r\n color: var(--text-subtle);\r\n font-weight: 500;\r\n }\r\n\r\n .title-meta .dot {\r\n width: 3px;\r\n height: 3px;\r\n border-radius: 50%;\r\n background: var(--text-hint);\r\n }\r\n\r\n .share-btn {\r\n flex-shrink: 0;\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 50%;\r\n border: none;\r\n background: var(--primary);\r\n box-shadow: 0 2px 8px rgba(67, 169, 75, 0.25);\r\n display: none; \/* shown by JS *\/\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;\r\n }\r\n\r\n .share-btn:hover {\r\n transform: scale(1.08);\r\n box-shadow: 0 4px 16px rgba(67, 169, 75, 0.35);\r\n background: var(--primary-dark);\r\n }\r\n\r\n .share-btn:active {\r\n transform: scale(0.92);\r\n box-shadow: 0 1px 4px rgba(67, 169, 75, 0.2);\r\n background: #2d8a35;\r\n }\r\n\r\n .share-btn svg {\r\n width: 18px;\r\n height: 18px;\r\n stroke: #fff;\r\n display: block;\r\n }\r\n\r\n \/* \u2500\u2500 Cards \u2500\u2500 *\/\r\n .card {\r\n background: var(--card);\r\n border-radius: var(--radius-card);\r\n box-shadow: var(--shadow-card);\r\n padding: 20px;\r\n margin-top: 16px;\r\n }\r\n\r\n .card-label {\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: var(--text-hint);\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .card p {\r\n font-size: 15px;\r\n color: var(--text-secondary);\r\n line-height: 1.65;\r\n white-space: pre-wrap;\r\n word-wrap: break-word;\r\n }\r\n\r\n \/* \u2500\u2500 Details grid \u2500\u2500 *\/\r\n .details-grid {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 12px;\r\n margin-top: 4px;\r\n }\r\n\r\n .detail-chip {\r\n background: var(--bg);\r\n border-radius: var(--radius-btn);\r\n padding: 14px 16px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .detail-chip.full-width {\r\n grid-column: 1 \/ -1;\r\n }\r\n\r\n .detail-icon {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 16px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .detail-icon.green {\r\n background: var(--primary-light);\r\n }\r\n\r\n .detail-icon.orange {\r\n background: var(--orange-light);\r\n }\r\n\r\n .detail-icon.grey {\r\n background: rgba(0,0,0,0.05);\r\n }\r\n\r\n .detail-text {\r\n display: flex;\r\n flex-direction: column;\r\n min-width: 0;\r\n }\r\n\r\n .detail-text .label {\r\n font-size: 11px;\r\n font-weight: 600;\r\n color: var(--text-hint);\r\n text-transform: uppercase;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n .detail-text .value {\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: var(--text-primary);\r\n margin-top: 1px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n \/* \u2500\u2500 Map \u2500\u2500 *\/\r\n .map-wrapper {\r\n border-radius: var(--radius-img);\r\n overflow: hidden;\r\n height: 220px;\r\n margin-top: 12px;\r\n background: #e8e8e8;\r\n }\r\n\r\n .map-wrapper #map {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n \/* \u2500\u2500 CTA (sticky bottom) \u2500\u2500 *\/\r\n .cta-wrap {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 90;\r\n background: var(--card);\r\n box-shadow: 0 -4px 20px rgba(0,0,0,0.06);\r\n padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));\r\n }\r\n\r\n .cta-inner {\r\n max-width: 960px;\r\n margin: 0 auto;\r\n display: flex;\r\n gap: 10px;\r\n align-items: center;\r\n }\r\n\r\n .cta-info {\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n\r\n .cta-price {\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: var(--primary);\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n }\r\n\r\n .cta-price img {\r\n height: 14px;\r\n width: 14px;\r\n }\r\n\r\n .cta-subtitle {\r\n font-size: 11px;\r\n color: var(--text-hint);\r\n font-weight: 500;\r\n }\r\n\r\n #contactBtn {\r\n flex: 1;\r\n max-width: 280px;\r\n padding: 14px 24px;\r\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n color: #fff;\r\n border: none;\r\n border-radius: var(--radius-btn);\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 15px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.25s;\r\n box-shadow: 0 4px 14px rgba(67, 169, 75, 0.25);\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n #contactBtn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(67, 169, 75, 0.32);\r\n }\r\n\r\n #contactBtn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n \/* \u2500\u2500 Deela promo banner \u2500\u2500 *\/\r\n .promo-banner {\r\n margin-top: 16px;\r\n background: linear-gradient(135deg, var(--primary) 0%, #2d8a35 100%);\r\n border-radius: var(--radius-card);\r\n padding: 24px 20px;\r\n color: #fff;\r\n text-align: center;\r\n box-shadow: 0 4px 20px rgba(67, 169, 75, 0.20);\r\n }\r\n\r\n .promo-banner h3 {\r\n font-size: 17px;\r\n font-weight: 600;\r\n margin-bottom: 6px;\r\n }\r\n\r\n .promo-banner p {\r\n font-size: 13px;\r\n opacity: 0.85;\r\n line-height: 1.5;\r\n max-width: 340px;\r\n margin: 0 auto;\r\n }\r\n\r\n .promo-stores {\r\n display: flex;\r\n justify-content: center;\r\n gap: 10px;\r\n margin-top: 16px;\r\n }\r\n\r\n .store-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: rgba(255,255,255,0.18);\r\n backdrop-filter: blur(6px);\r\n padding: 10px 18px;\r\n border-radius: var(--radius-btn);\r\n color: #fff;\r\n text-decoration: none;\r\n font-size: 13px;\r\n font-weight: 600;\r\n transition: background 0.3s ease, color 0.3s ease;\r\n }\r\n\r\n .store-link:hover {\r\n background: #fff;\r\n color: var(--primary);\r\n }\r\n\r\n .store-link svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: #fff;\r\n transition: fill 0.3s ease;\r\n }\r\n\r\n .store-link:hover svg {\r\n fill: var(--primary);\r\n }\r\n\r\n \/* \u2500\u2500 Skeleton loading \u2500\u2500 *\/\r\n .skeleton {\r\n background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);\r\n background-size: 200% 100%;\r\n animation: shimmer 1.5s ease infinite;\r\n border-radius: 8px;\r\n }\r\n\r\n @keyframes shimmer {\r\n 0% { background-position: 200% 0; }\r\n 100% { background-position: -200% 0; }\r\n }\r\n\r\n .skeleton-title { height: 28px; width: 60%; }\r\n .skeleton-text { height: 16px; width: 80%; margin-top: 8px; }\r\n .skeleton-text-sm { height: 14px; width: 45%; margin-top: 6px; }\r\n\r\n \/* \u2500\u2500 Error \/ empty state \u2500\u2500 *\/\r\n .empty-state {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 60px 20px;\r\n text-align: center;\r\n }\r\n\r\n .empty-icon {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 50%;\r\n background: var(--card);\r\n box-shadow: 0 4px 20px rgba(0,0,0,0.05);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 36px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .empty-state h3 {\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: var(--text-secondary);\r\n }\r\n\r\n .empty-state p {\r\n font-size: 14px;\r\n color: var(--text-hint);\r\n margin-top: 6px;\r\n }\r\n\r\n \/* \u2500\u2500 Toast \u2500\u2500 *\/\r\n .toast {\r\n position: fixed;\r\n bottom: 90px;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(20px);\r\n background: rgba(0,0,0,0.82);\r\n backdrop-filter: blur(10px);\r\n color: #fff;\r\n padding: 10px 22px;\r\n border-radius: var(--radius-pill);\r\n font-size: 13px;\r\n font-weight: 500;\r\n z-index: 10001;\r\n opacity: 0;\r\n transition: all 0.3s ease;\r\n pointer-events: none;\r\n }\r\n\r\n .toast.show {\r\n opacity: 1;\r\n transform: translateX(-50%) translateY(0);\r\n }\r\n\r\n \/* \u2500\u2500 Lightbox \u2500\u2500 *\/\r\n .lightbox-overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(0, 0, 0, 0.95);\r\n z-index: 9999;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .lightbox-overlay.active {\r\n opacity: 1;\r\n }\r\n\r\n .lightbox-img {\r\n max-width: 92%;\r\n max-height: 88vh;\r\n object-fit: contain;\r\n border-radius: 8px;\r\n }\r\n\r\n .lb-btn {\r\n position: absolute;\r\n background: rgba(67, 169, 75, 0.85);\r\n border: none;\r\n color: #fff;\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 50%;\r\n font-size: 20px;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: background 0.25s;\r\n }\r\n\r\n .lb-btn:hover {\r\n background: #fff;\r\n color: var(--primary);\r\n }\r\n\r\n .lb-close {\r\n top: 20px;\r\n right: 20px;\r\n }\r\n\r\n .lb-prev {\r\n left: 16px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n .lb-next {\r\n right: 16px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n .lb-counter {\r\n position: absolute;\r\n bottom: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: rgba(0,0,0,0.6);\r\n color: #fff;\r\n padding: 6px 16px;\r\n border-radius: var(--radius-badge);\r\n font-size: 13px;\r\n font-weight: 500;\r\n }\r\n\r\n \/* \u2500\u2500 App store modal \u2500\u2500 *\/\r\n .modal-overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(0,0,0,0.5);\r\n backdrop-filter: blur(4px);\r\n z-index: 10000;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .modal-overlay.active {\r\n opacity: 1;\r\n }\r\n\r\n .modal-box {\r\n background: var(--card);\r\n border-radius: var(--radius-card);\r\n padding: 36px 28px 28px;\r\n max-width: 400px;\r\n width: 90%;\r\n text-align: center;\r\n box-shadow: var(--shadow-elevated);\r\n transform: translateY(20px);\r\n transition: transform 0.3s;\r\n }\r\n\r\n .modal-overlay.active .modal-box {\r\n transform: translateY(0);\r\n }\r\n\r\n .modal-box h2 {\r\n font-size: 20px;\r\n font-weight: 700;\r\n color: var(--text-primary);\r\n margin-bottom: 4px;\r\n }\r\n\r\n .modal-box .sub {\r\n font-size: 14px;\r\n color: var(--text-subtle);\r\n margin-bottom: 24px;\r\n }\r\n\r\n .modal-stores {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n\r\n .modal-store-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 14px;\r\n padding: 14px 20px;\r\n background: var(--primary);\r\n color: #fff;\r\n border-radius: var(--radius-img);\r\n text-decoration: none;\r\n transition: background 0.3s ease, color 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease;\r\n }\r\n\r\n .modal-store-btn:hover {\r\n background: #fff;\r\n color: var(--primary);\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.12);\r\n }\r\n\r\n .modal-store-btn svg {\r\n width: 32px;\r\n height: 32px;\r\n fill: #fff;\r\n flex-shrink: 0;\r\n transition: fill 0.3s ease;\r\n }\r\n\r\n .modal-store-btn:hover svg {\r\n fill: var(--primary);\r\n }\r\n\r\n .modal-store-btn .store-text {\r\n text-align: left;\r\n }\r\n\r\n .modal-store-btn .store-text small {\r\n display: block;\r\n font-size: 10px;\r\n opacity: 0.7;\r\n }\r\n\r\n .modal-store-btn .store-text span {\r\n display: block;\r\n font-size: 17px;\r\n font-weight: 600;\r\n line-height: 1.2;\r\n }\r\n\r\n \/* \u2500\u2500 Responsive \u2500\u2500 *\/\r\n\r\n \/* Small phones (320-375px) *\/\r\n @media (max-width: 374px) {\r\n .item-title {\r\n font-size: 20px;\r\n }\r\n .cta-inner {\r\n flex-direction: column;\r\n gap: 8px;\r\n }\r\n .cta-info {\r\n text-align: center;\r\n }\r\n .cta-price {\r\n justify-content: center;\r\n }\r\n #contactBtn {\r\n max-width: 100%;\r\n width: 100%;\r\n }\r\n .promo-stores {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n .modal-box {\r\n padding: 28px 20px 20px;\r\n }\r\n }\r\n\r\n \/* Standard mobile (375-639px) *\/\r\n @media (max-width: 639px) {\r\n .page-wrap {\r\n padding: 16px 14px 100px;\r\n }\r\n .gallery {\r\n border-radius: 12px;\r\n aspect-ratio: 4 \/ 3;\r\n }\r\n .title-row {\r\n margin-top: 16px;\r\n }\r\n .item-title {\r\n font-size: 22px;\r\n }\r\n .card {\r\n padding: 16px;\r\n border-radius: 14px;\r\n }\r\n .map-wrapper {\r\n height: 200px;\r\n }\r\n #contactBtn {\r\n padding: 14px 18px;\r\n font-size: 14px;\r\n min-height: 48px;\r\n }\r\n \/* Ensure touch targets are at least 44px *\/\r\n .share-btn {\r\n width: 44px;\r\n height: 44px;\r\n }\r\n .lb-btn {\r\n width: 44px;\r\n height: 44px;\r\n }\r\n }\r\n\r\n \/* Tablets and up *\/\r\n @media (min-width: 640px) {\r\n .page-wrap {\r\n padding: 28px 24px 100px;\r\n }\r\n .gallery {\r\n aspect-ratio: 16 \/ 9;\r\n }\r\n .item-title {\r\n font-size: 28px;\r\n }\r\n .map-wrapper {\r\n height: 260px;\r\n }\r\n }\r\n\r\n \/* Disable hover effects on touch devices *\/\r\n @media (hover: none) {\r\n .share-btn:hover {\r\n transform: none;\r\n box-shadow: 0 2px 8px rgba(67, 169, 75, 0.25);\r\n background: var(--primary);\r\n }\r\n .gallery:hover img {\r\n transform: none;\r\n }\r\n #contactBtn:hover {\r\n transform: none;\r\n }\r\n .modal-store-btn:hover {\r\n transform: none;\r\n box-shadow: none;\r\n background: var(--primary);\r\n color: #fff;\r\n }\r\n .modal-store-btn:hover svg {\r\n fill: #fff;\r\n }\r\n .store-link:hover {\r\n background: rgba(255,255,255,0.18);\r\n color: #fff;\r\n }\r\n .store-link:hover svg {\r\n fill: #fff;\r\n }\r\n }\r\n\r\n \/* Active states for touch (replace hover) *\/\r\n @media (hover: none) {\r\n .share-btn:active {\r\n transform: scale(0.92);\r\n background: var(--primary-dark);\r\n }\r\n #contactBtn:active {\r\n transform: scale(0.97);\r\n opacity: 0.9;\r\n }\r\n .modal-store-btn:active {\r\n background: #fff;\r\n color: var(--primary);\r\n transform: scale(0.97);\r\n }\r\n .modal-store-btn:active svg {\r\n fill: var(--primary);\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<\/br><\/br>\r\n <!-- \u2500\u2500 Main content \u2500\u2500 -->\r\n <div id=\"itemContainer\">\r\n <div class=\"page-wrap\">\r\n\r\n <!-- Gallery -->\r\n <div class=\"gallery\" id=\"galleryWrap\">\r\n <img id=\"heroImage\" alt=\"Item image\" style=\"display:none;\" \/>\r\n <span class=\"gallery-badge\" id=\"imageCount\"><\/span>\r\n <span class=\"status-pill\" id=\"statusPill\" style=\"display:none;\"><\/span>\r\n <!-- skeleton placeholder -->\r\n <div id=\"gallerySkeleton\" style=\"width:100%;height:100%;\" class=\"skeleton\"><\/div>\r\n <\/div>\r\n\r\n <!-- Title row -->\r\n <div class=\"title-row\">\r\n <div style=\"flex:1;min-width:0;\">\r\n <h1 class=\"item-title\" id=\"itemTitle\">\r\n <div class=\"skeleton skeleton-title\"><\/div>\r\n <\/h1>\r\n <div class=\"title-meta\" id=\"titleMeta\">\r\n <span id=\"itemType\"><\/span>\r\n <span class=\"dot\"><\/span>\r\n <span id=\"itemDate\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <button class=\"share-btn\" id=\"shareBtn\" aria-label=\"Share\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"18\" cy=\"5\" r=\"3\"\/><circle cx=\"6\" cy=\"12\" r=\"3\"\/><circle cx=\"18\" cy=\"19\" r=\"3\"\/>\r\n <line x1=\"8.59\" y1=\"13.51\" x2=\"15.42\" y2=\"17.49\"\/>\r\n <line x1=\"15.41\" y1=\"6.51\" x2=\"8.59\" y2=\"10.49\"\/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- Description card -->\r\n <div class=\"card\">\r\n <div class=\"card-label\">Description<\/div>\r\n <p id=\"itemDesc\"><span class=\"skeleton skeleton-text\"><\/span><span class=\"skeleton skeleton-text-sm\"><\/span><\/p>\r\n <\/div>\r\n\r\n <!-- Details card -->\r\n <div class=\"card\">\r\n <div class=\"card-label\">Details<\/div>\r\n <div class=\"details-grid\" id=\"detailsGrid\">\r\n <div class=\"detail-chip\">\r\n <div class=\"detail-icon green\">\ud83d\udce6<\/div>\r\n <div class=\"detail-text\">\r\n <span class=\"label\">Status<\/span>\r\n <span class=\"value\" id=\"itemStatus\">Loading\u2026<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail-chip\">\r\n <div class=\"detail-icon green\">\ud83e\udd1d<\/div>\r\n <div class=\"detail-text\">\r\n <span class=\"label\">Meeting<\/span>\r\n <span class=\"value\" id=\"itemAvailability\">Loading\u2026<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail-chip full-width\" id=\"expirationChip\" style=\"display:none;\">\r\n <div class=\"detail-icon orange\">\u23f3<\/div>\r\n <div class=\"detail-text\">\r\n <span class=\"label\">Expires<\/span>\r\n <span class=\"value\" id=\"itemExpiration\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Map card -->\r\n <div class=\"card\" id=\"locationCard\">\r\n <div class=\"card-label\">Location<\/div>\r\n <div class=\"map-wrapper\"><div id=\"map\"><\/div><\/div>\r\n <\/div>\r\n\r\n <!-- Promo banner -->\r\n <div class=\"promo-banner\">\r\n <h3>Share & save with Deela \ud83c\udf31<\/h3>\r\n <p>Exchange food and everyday items with your neighbours. Collect lingonberries and plant real trees!<\/p>\r\n <div class=\"promo-stores\">\r\n <a href=\"https:\/\/apps.apple.com\/se\/app\/deela\/id6741097402\" target=\"_blank\" class=\"store-link\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z\"\/><\/svg>\r\n App Store\r\n <\/a>\r\n <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.deela.app&hl=en\" target=\"_blank\" class=\"store-link\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z\"\/><\/svg>\r\n Google Play\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div><!-- \/page-wrap -->\r\n <\/div>\r\n\r\n <!-- \u2500\u2500 Sticky CTA \u2500\u2500 -->\r\n <div class=\"cta-wrap\">\r\n <div class=\"cta-inner\">\r\n <div class=\"cta-info\">\r\n <div class=\"cta-price\"><img decoding=\"async\" src=\"https:\/\/deela.se\/wp-content\/uploads\/2025\/11\/deela.png\" alt=\"Deela\" style=\"height:18px;width:18px;object-fit:contain;vertical-align:middle;margin-right:2px;\" \/> Free with lingonberries<\/div>\r\n <div class=\"cta-subtitle\">Open the app to request this item<\/div>\r\n <\/div>\r\n <button id=\"contactBtn\">Loading\u2026<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2500\u2500 Toast \u2500\u2500 -->\r\n <div class=\"toast\" id=\"toast\"><\/div>\r\n\r\n <!-- \u2500\u2500 Firebase + Logic \u2500\u2500 -->\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n if (!window.firebaseInitialized) {\r\n window.firebaseInitialized = true;\r\n const s1 = document.createElement('script');\r\n s1.src = 'https:\/\/www.gstatic.com\/firebasejs\/9.23.0\/firebase-app-compat.js';\r\n s1.onload = () => {\r\n const s2 = document.createElement('script');\r\n s2.src = 'https:\/\/www.gstatic.com\/firebasejs\/9.23.0\/firebase-firestore-compat.js';\r\n s2.onload = initFirestore;\r\n document.head.appendChild(s2);\r\n };\r\n document.head.appendChild(s1);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Firestore init \u2500\u2500\u2500 *\/\r\n function initFirestore() {\r\n const firebaseConfig = {\r\n apiKey: \"AIzaSyAZLKJQt5R19gBNEIQPUzUnpW3btaP6_EI\",\r\n authDomain: \"deela-dda79.firebaseapp.com\",\r\n databaseURL: \"https:\/\/deela-dda79-default-rtdb.europe-west1.firebasedatabase.app\",\r\n projectId: \"deela-dda79\",\r\n storageBucket: \"deela-dda79.appspot.com\",\r\n messagingSenderId: \"149666199557\",\r\n appId: \"1:149666199557:web:da19b79b1fe95fa658c46c\",\r\n measurementId: \"G-SHZ540ZJ49\"\r\n};\r\n if (!firebase.apps.length) firebase.initializeApp(firebaseConfig);\r\n const db = firebase.firestore();\r\n\r\n const params = new URLSearchParams(window.location.search);\r\n const itemId = params.get('id');\r\n\r\n if (!itemId) {\r\n showError('No item ID provided in URL');\r\n return;\r\n }\r\n\r\n db.collection('item').doc(itemId).get()\r\n .then(doc => {\r\n if (!doc.exists) { showError('Item not found \u2014 the link may be outdated.'); return; }\r\n const data = doc.data();\r\n\r\n \/\/ \u2500\u2500 Fetch owner first name \u2500\u2500\r\n if (data.userId) {\r\n db.collection('users').doc(data.userId).get()\r\n .then(userDoc => {\r\n if (userDoc.exists) {\r\n const userData = userDoc.data();\r\n console.log('\ud83d\udc64 User doc fields:', Object.keys(userData));\r\n console.log('\ud83d\udc64 firstName value:', userData.firstName);\r\n }\r\n const firstName = userDoc.exists ? userDoc.data().firstName : null;\r\n setContactButton(firstName);\r\n })\r\n .catch((err) => { console.error('\u274c User fetch error:', err); setContactButton(null); });\r\n } else {\r\n console.warn('\u26a0\ufe0f No userId on item document');\r\n setContactButton(null);\r\n }\r\n\r\n updateMetaTags(data.title, data.desc, data.images ? data.images[0] : null);\r\n renderItem(data);\r\n })\r\n .catch(err => {\r\n console.error('Firestore error:', err);\r\n showError('Error loading item \u2014 ' + err.message);\r\n });\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Set CTA button text \u2500\u2500\u2500 *\/\r\n function setContactButton(firstName) {\r\n const btn = document.getElementById('contactBtn');\r\n if (!btn) return;\r\n const name = firstName && firstName.trim ? firstName.trim() : '';\r\n btn.textContent = name.length > 0\r\n ? `Contact ${name}`\r\n : 'Contact Owner';\r\n btn.onclick = handleContactClick;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Render item \u2500\u2500\u2500 *\/\r\n function renderItem(data) {\r\n \/\/ Title\r\n const titleEl = document.getElementById('itemTitle');\r\n titleEl.textContent = data.title || 'Untitled item';\r\n\r\n \/\/ Description\r\n const descEl = document.getElementById('itemDesc');\r\n descEl.textContent = data.desc || 'No description provided.';\r\n\r\n \/\/ Type + Date meta\r\n const typeEl = document.getElementById('itemType');\r\n const dateEl = document.getElementById('itemDate');\r\n if (data.type) {\r\n typeEl.textContent = (data.type === 'Food' ? '\ud83c\udf54 ' : '\ud83d\udce6 ') + data.type;\r\n }\r\n if (data.createdAt) {\r\n dateEl.textContent = relativeDate(data.createdAt);\r\n }\r\n\r\n \/\/ Address\r\n const addrEl = document.getElementById('itemAddress');\r\n if (addrEl) addrEl.textContent = data.address || 'Location not specified';\r\n\r\n \/\/ Availability\r\n const availEl = document.getElementById('itemAvailability');\r\n if (availEl) availEl.textContent = data.availability || 'Contact owner';\r\n\r\n \/\/ Status\r\n renderStatus(data.status);\r\n\r\n \/\/ Expiration (only for Food)\r\n if (data.type === 'Food') {\r\n renderExpiration(data.expirationDate);\r\n }\r\n\r\n \/\/ Images\r\n renderImages(data.images);\r\n\r\n \/\/ Map\r\n if (data.address) initMap(data.address);\r\n\r\n \/\/ Share\r\n setupShare(data);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Status \u2500\u2500\u2500 *\/\r\n function renderStatus(status) {\r\n const chipVal = document.getElementById('itemStatus');\r\n const pill = document.getElementById('statusPill');\r\n const type = status && status.type ? status.type : 'Unknown';\r\n const lower = type.toLowerCase();\r\n\r\n if (chipVal) chipVal.textContent = type;\r\n\r\n if (pill) {\r\n pill.textContent = type;\r\n pill.style.display = 'block';\r\n pill.className = 'status-pill ' +\r\n (lower === 'available' ? 'status-available' :\r\n lower === 'reserved' ? 'status-reserved' :\r\n 'status-delivered');\r\n }\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Expiration \u2500\u2500\u2500 *\/\r\n function renderExpiration(exp) {\r\n const chip = document.getElementById('expirationChip');\r\n const val = document.getElementById('itemExpiration');\r\n if (!chip || !val) return;\r\n chip.style.display = 'flex';\r\n\r\n if (!exp) { val.textContent = 'Not specified'; return; }\r\n\r\n if (typeof exp === 'number') {\r\n const d = new Date(exp);\r\n const diff = Math.ceil((d - new Date()) \/ 864e5);\r\n const ds = d.toLocaleDateString('en-US', { year:'numeric', month:'short', day:'numeric' });\r\n if (diff < 0) { val.textContent = '\u26a0\ufe0f Expired (' + ds + ')'; val.style.color = '#dc3545'; }\r\n else if (diff <= 1) { val.textContent = '\u26a0\ufe0f Expires ' + (diff === 0 ? 'today' : 'tomorrow'); val.style.color = '#ffc107'; }\r\n else if (diff <= 3) { val.textContent = '\u26a0\ufe0f ' + diff + ' days left'; val.style.color = '#ffc107'; }\r\n else { val.textContent = ds; }\r\n } else {\r\n val.textContent = exp;\r\n }\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Images \u2500\u2500\u2500 *\/\r\n function renderImages(images) {\r\n const hero = document.getElementById('heroImage');\r\n const badge = document.getElementById('imageCount');\r\n const skel = document.getElementById('gallerySkeleton');\r\n if (skel) skel.style.display = 'none';\r\n\r\n if (images && images.length > 0) {\r\n hero.src = images[0];\r\n hero.style.display = 'block';\r\n hero.onclick = () => openLightbox(images, 0);\r\n if (images.length > 1 && badge) {\r\n badge.textContent = '+' + (images.length - 1) + ' more';\r\n badge.style.display = 'block';\r\n }\r\n } else {\r\n hero.src = 'https:\/\/via.placeholder.com\/800x600\/F0F0F0\/BDBDBD?text=No+Image';\r\n hero.style.display = 'block';\r\n }\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Date helper \u2500\u2500\u2500 *\/\r\n function relativeDate(ts) {\r\n const d = new Date(ts);\r\n const diff = Math.floor((Date.now() - d) \/ 864e5);\r\n if (diff === 0) return 'Today';\r\n if (diff === 1) return 'Yesterday';\r\n if (diff < 7) return diff + ' days ago';\r\n if (diff < 30) { const w = Math.floor(diff\/7); return w + ' week' + (w>1?'s':'') + ' ago'; }\r\n return d.toLocaleDateString('en-US', { year:'numeric', month:'long', day:'numeric' });\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Error state \u2500\u2500\u2500 *\/\r\n function showError(msg) {\r\n const cta = document.querySelector('.cta-wrap');\r\n if (cta) cta.style.display = 'none';\r\n document.getElementById('itemContainer').innerHTML =\r\n '<div class=\"page-wrap\"><div class=\"empty-state\">' +\r\n '<div class=\"empty-icon\">\ud83d\ude15<\/div>' +\r\n '<h3>' + msg + '<\/h3>' +\r\n '<p>Try opening the link again or download Deela to browse items.<\/p><\/div><\/div>';\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Share \u2500\u2500\u2500 *\/\r\n function setupShare(data) {\r\n const btn = document.getElementById('shareBtn');\r\n if (!btn) return;\r\n btn.style.display = 'flex';\r\n\r\n btn.onclick = async () => {\r\n if (navigator.share) {\r\n try {\r\n await navigator.share({ title: data.title, text: data.desc, url: location.href });\r\n } catch (e) {\r\n if (e.name !== 'AbortError') copyLink();\r\n }\r\n } else {\r\n copyLink();\r\n }\r\n };\r\n }\r\n\r\n function copyLink() {\r\n if (navigator.clipboard) {\r\n navigator.clipboard.writeText(location.href).then(() => showToast('Link copied!')).catch(() => fallbackCopy());\r\n } else { fallbackCopy(); }\r\n }\r\n\r\n function fallbackCopy() {\r\n const ta = document.createElement('textarea');\r\n ta.value = location.href;\r\n ta.style.position = 'fixed'; ta.style.left = '-9999px';\r\n document.body.appendChild(ta); ta.select();\r\n try { document.execCommand('copy'); showToast('Link copied!'); } catch(e) { showToast('Could not copy'); }\r\n document.body.removeChild(ta);\r\n }\r\n\r\n function showToast(msg) {\r\n const t = document.getElementById('toast');\r\n t.textContent = msg;\r\n t.classList.add('show');\r\n setTimeout(() => t.classList.remove('show'), 2200);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Contact \u2192 app stores \u2500\u2500\u2500 *\/\r\n function handleContactClick() {\r\n const ua = navigator.userAgent || '';\r\n const iOS = \/iPad|iPhone|iPod\/.test(ua) && !window.MSStream;\r\n const android = \/android\/i.test(ua);\r\n const appStore = 'https:\/\/apps.apple.com\/se\/app\/deela\/id6741097402';\r\n const playStore = 'https:\/\/play.google.com\/store\/apps\/details?id=com.deela.app&hl=en';\r\n\r\n if (iOS) { location.href = appStore; }\r\n else if (android) { location.href = playStore; }\r\n else { showAppModal(appStore, playStore); }\r\n }\r\n\r\n function showAppModal(appStore, playStore) {\r\n const overlay = document.createElement('div');\r\n overlay.className = 'modal-overlay';\r\n overlay.innerHTML = `\r\n <div class=\"modal-box\">\r\n <h2>Get Deela<\/h2>\r\n <p class=\"sub\">Download the app to contact this person<\/p>\r\n <div class=\"modal-stores\">\r\n <a href=\"${appStore}\" target=\"_blank\" class=\"modal-store-btn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z\"\/><\/svg>\r\n <div class=\"store-text\"><small>Download on the<\/small><span>App Store<\/span><\/div>\r\n <\/a>\r\n <a href=\"${playStore}\" target=\"_blank\" class=\"modal-store-btn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z\"\/><\/svg>\r\n <div class=\"store-text\"><small>GET IT ON<\/small><span>Google Play<\/span><\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n `;\r\n document.body.appendChild(overlay);\r\n requestAnimationFrame(() => overlay.classList.add('active'));\r\n\r\n overlay.onclick = (e) => { if (e.target === overlay) closeModal(overlay); };\r\n document.addEventListener('keydown', function esc(e) {\r\n if (e.key === 'Escape') { closeModal(overlay); document.removeEventListener('keydown', esc); }\r\n });\r\n }\r\n\r\n function closeModal(el) {\r\n el.classList.remove('active');\r\n setTimeout(() => el.remove(), 300);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Lightbox \u2500\u2500\u2500 *\/\r\n function openLightbox(images, idx) {\r\n let cur = idx;\r\n const overlay = document.createElement('div');\r\n overlay.className = 'lightbox-overlay';\r\n\r\n const img = document.createElement('img');\r\n img.className = 'lightbox-img';\r\n img.src = images[cur];\r\n\r\n const close = document.createElement('button');\r\n close.className = 'lb-btn lb-close';\r\n close.innerHTML = '\u2715';\r\n close.onclick = () => closeLB();\r\n\r\n const counter = document.createElement('div');\r\n counter.className = 'lb-counter';\r\n const updateCounter = () => counter.textContent = (cur+1) + ' \/ ' + images.length;\r\n updateCounter();\r\n\r\n overlay.appendChild(img);\r\n overlay.appendChild(close);\r\n overlay.appendChild(counter);\r\n\r\n if (images.length > 1) {\r\n const prev = document.createElement('button');\r\n prev.className = 'lb-btn lb-prev';\r\n prev.innerHTML = '\u276e';\r\n prev.onclick = (e) => { e.stopPropagation(); cur = (cur - 1 + images.length) % images.length; img.src = images[cur]; updateCounter(); };\r\n\r\n const next = document.createElement('button');\r\n next.className = 'lb-btn lb-next';\r\n next.innerHTML = '\u276f';\r\n next.onclick = (e) => { e.stopPropagation(); cur = (cur + 1) % images.length; img.src = images[cur]; updateCounter(); };\r\n\r\n overlay.appendChild(prev);\r\n overlay.appendChild(next);\r\n }\r\n\r\n overlay.onclick = (e) => { if (e.target === overlay) closeLB(); };\r\n document.body.appendChild(overlay);\r\n requestAnimationFrame(() => overlay.classList.add('active'));\r\n\r\n function closeLB() { overlay.classList.remove('active'); setTimeout(() => overlay.remove(), 300); }\r\n\r\n document.addEventListener('keydown', function kh(e) {\r\n if (e.key === 'Escape') { closeLB(); document.removeEventListener('keydown', kh); }\r\n if (e.key === 'ArrowLeft' && images.length > 1) { cur = (cur-1+images.length)%images.length; img.src = images[cur]; updateCounter(); }\r\n if (e.key === 'ArrowRight' && images.length > 1) { cur = (cur+1)%images.length; img.src = images[cur]; updateCounter(); }\r\n });\r\n }\r\n\r\n \/* \u2500\u2500\u2500 Google Maps \u2500\u2500\u2500 *\/\r\n function initMap(address) {\r\n if (!window.google) {\r\n const s = document.createElement('script');\r\n s.src = 'https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyAdNQkPeM0jaG_Y-guUU4VoZGD_eDyk3ww&callback=_initMapCb';\r\n s.async = true; s.defer = true;\r\n window._initMapCb = () => geocode(address);\r\n document.head.appendChild(s);\r\n } else { geocode(address); }\r\n }\r\n\r\n function geocode(address) {\r\n const mapDiv = document.getElementById('map');\r\n if (!mapDiv) return;\r\n new google.maps.Geocoder().geocode({ address }, (results, status) => {\r\n if (status === 'OK' && results[0]) {\r\n const loc = results[0].geometry.location;\r\n const map = new google.maps.Map(mapDiv, {\r\n center: loc, zoom: 14,\r\n disableDefaultUI: true, zoomControl: true,\r\n styles: [{ featureType:'poi', elementType:'labels', stylers:[{visibility:'off'}] }]\r\n });\r\n const circle = new google.maps.Circle({\r\n strokeColor:'#FF7F11', strokeOpacity:0.5, strokeWeight:2,\r\n fillColor:'#FF7F11', fillOpacity:0.15,\r\n map, center: loc, radius: 600\r\n });\r\n map.fitBounds(circle.getBounds());\r\n } else {\r\n mapDiv.innerHTML = '<p style=\"padding:20px;text-align:center;color:#9E9E9E;font-size:13px;\">Unable to load map<\/p>';\r\n }\r\n });\r\n }\r\n\r\n \/* \u2500\u2500\u2500 OG Meta tags \u2500\u2500\u2500 *\/\r\n function updateMetaTags(title, desc, img) {\r\n document.title = (title || 'Item') + ' \u2014 Deela';\r\n const set = (attr, key, val) => {\r\n let m = document.querySelector(`meta[${attr}=\"${key}\"]`);\r\n if (!m) { m = document.createElement('meta'); m.setAttribute(attr, key); document.head.appendChild(m); }\r\n m.setAttribute('content', val);\r\n };\r\n const url = location.href;\r\n set('property','og:title', title); set('property','og:description', desc); set('property','og:url', url);\r\n set('property','og:type','website'); set('property','og:site_name','Deela');\r\n if (img) { set('property','og:image', img); set('property','og:image:width','1200'); set('property','og:image:height','630'); }\r\n set('name','twitter:card','summary_large_image'); set('name','twitter:title', title);\r\n set('name','twitter:description', desc); if (img) set('name','twitter:image', img);\r\n set('name','description', desc);\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e878528 e-flex e-con-boxed e-con e-parent\" data-id=\"e878528\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f2b8ab8 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"f2b8ab8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>Deela – Loading… Description Details \ud83d\udce6 Status Loading\u2026 \ud83e\udd1d Meeting Loading\u2026 \u23f3 Expires Location Share & save with Deela \ud83c\udf31 Exchange food and everyday items with your neighbours. Collect lingonberries and plant real trees! App Store Google Play Free with lingonberries Open the app to request this item Loading\u2026<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1518","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/deela.se\/sv\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"Deela – Loading… Description Details \ud83d\udce6 Status Loading\u2026 \ud83e\udd1d Meeting Loading\u2026 \u23f3 Expires Location Share & save with Deela \ud83c\udf31 Exchange food and everyday items with your neighbours. Collect lingonberries and plant real trees! App Store Google Play Free with lingonberries Open the app to request this item Loading\u2026","_links":{"self":[{"href":"https:\/\/deela.se\/sv\/wp-json\/wp\/v2\/pages\/1518"}],"collection":[{"href":"https:\/\/deela.se\/sv\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/deela.se\/sv\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/deela.se\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/deela.se\/sv\/wp-json\/wp\/v2\/comments?post=1518"}],"version-history":[{"count":0,"href":"https:\/\/deela.se\/sv\/wp-json\/wp\/v2\/pages\/1518\/revisions"}],"wp:attachment":[{"href":"https:\/\/deela.se\/sv\/wp-json\/wp\/v2\/media?parent=1518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}