{"id":178,"date":"2026-08-19T14:43:30","date_gmt":"2026-08-19T14:43:30","guid":{"rendered":"https:\/\/thepineapplesweets.com\/?page_id=178"},"modified":"2026-08-20T18:59:29","modified_gmt":"2026-08-20T18:59:29","slug":"elementor-page-178","status":"publish","type":"page","link":"https:\/\/thepineapplesweets.com\/?page_id=178","title":{"rendered":"Elementor Page #178"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nOrder \u2014 The Pineapple Sweets & Co.<\/title>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500&display=swap\" rel=\"stylesheet\" \/>\n\n<style>\n :root {\n --cream: #FFFDF6;\n --gold: #C29B47;\n --gold-deep: #7A5817;\n --navy: #2B4C5E;\n --pink: #F7C1C8;\n --yellow: #FCE196;\n --mint: #BCE3D2;\n --sky: #B7D2E8;\n --gray: #4A4946; \n\n --ink: #2B4C5E;\n --ink-soft: #5c7180;\n --line: rgba(194,155,71,0.25);\n --paper: #FFFFFF;\n\n --display: \"Playfair Display\", Georgia, serif;\n --body: \"DM Sans\", system-ui, sans-serif;\n --mono: \"DM Mono\", ui-monospace, monospace;\n\n --radius: 6px; \n --ring: 0 0 0 1px var(--navy);\n }\n\n \/* ============ ANIQUILADOR DE FRANJAS DE THEMES DE WORDPRESS ============ *\/\n header#masthead, header.site-header, header.ast-site-header, .elementor-page-title, .page-header { display: none !important; }\n #content, #main, .site-content, .site-main, #primary, .elementor-section-wrap { padding-top: 0 !important; margin-top: 0 !important; }\n \n * { \n margin: 0; padding: 0; box-sizing: border-box; \n -webkit-tap-highlight-color: transparent !important; \n }\n\n html { scroll-behavior: smooth; }\n \n body { \n background: var(--cream) !important; color: var(--ink); font-family: var(--body); font-weight: 400; line-height: 1.55;\n -webkit-font-smoothing: antialiased; width: 100% !important; margin: 0 !important; padding: 0 !important;\n cursor: url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp'), auto !important;\n }\n \n a, div.mobile-menu-btn, button, select, input, textarea, .mode, .ps-order-btn {\n cursor: url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp'), pointer !important;\n }\n \n ::selection { background: var(--yellow); }\n\n \/* ============ TRUCO BREAKOUT ============ *\/\n .ps-fullscreen-breakout {\n width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;\n background: var(--cream); position: relative !important; overflow: visible; \n }\n\n .wrap { max-width: 1400px; margin: 0 auto; padding: 0 48px; width: 100%; }\n\n \/* ============ HEADER FIXED CON GLOW 4 LADOS ============ *\/\n header { \n position: fixed !important; top: 0 !important; left: 0 !important; z-index: 999999 !important; \n background: rgba(255, 255, 255, 0.96) !important; border: 1px solid rgba(194,155,71,.3) !important; \n animation: headerGlow 3s ease-in-out infinite alternate !important; width: 100vw !important; \n }\n\n @keyframes headerGlow {\n 0% { box-shadow: 0 0 10px rgba(194, 155, 71, 0.05), inset 0 0 10px rgba(194, 155, 71, 0.05); }\n 100% { box-shadow: 0 0 25px rgba(194, 155, 71, 0.25), inset 0 0 20px rgba(194, 155, 71, 0.25); border-color: rgba(194, 155, 71, 0.6); }\n }\n\n .nav { display: flex; align-items: center; justify-content: space-between; height: 160px; max-width: 1200px; margin: 0 auto; padding: 0 48px; }\n .logo-slot { display: flex; align-items: center; gap: 24px; height: 100%; }\n .logo-slot img { height: 155px !important; width: auto !important; max-height: none !important; max-width: none !important; object-fit: contain; display: block; }\n .nav-right { display: flex; align-items: center; gap: 40px; }\n .nav-links { display: flex; align-items: center; gap: 40px; }\n .nav-links a { font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--navy); text-decoration: none; letter-spacing: 0.5px; position: relative; transition: color 0.2s; }\n .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--gold); transition: width 0.25s ease; }\n .nav-links a:hover::after { width: 100%; }\n\n \/* ============ MEN\u00da HAMBURGUESA COMO DIV ============ *\/\n div.mobile-menu-btn {\n display: none; background: transparent !important; border: none !important; box-shadow: none !important;\n flex-direction: column; justify-content: space-around; width: 44px; height: 44px; padding: 10px; z-index: 101;\n border-radius: 6px; transition: background 0.2s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n div.mobile-menu-btn:active { background: rgba(194, 155, 71, 0.15) !important; }\n div.mobile-menu-btn span { display: block; width: 100%; height: 2px; background-color: var(--navy) !important; transition: opacity 0.3s ease; }\n\n div.mobile-menu-btn.open {\n transform: rotate(360deg);\n background-image: url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp') !important;\n background-size: 30px 30px !important; background-position: center !important; background-repeat: no-repeat !important;\n }\n div.mobile-menu-btn.open span { opacity: 0 !important; }\n\n \/* ============ BOT\u00d3N DE ORDEN HEADER ============ *\/\n .ps-order-btn {\n --ps-cream: #FFFDF6; --ps-gold: #C29B47; --ps-navy: #2B4C5E;\n font-family: 'DM Sans', system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; \n color: var(--ps-cream) !important; background: var(--ps-navy) !important; padding: 14px 30px; border-radius: 3px; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(194,155,71,0.5); transition: gap 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;\n }\n .ps-order-btn::after { display: none !important; }\n .ps-order-btn .ps-arrow { transition: transform 0.3s ease; }\n .ps-order-btn:hover { background: #FFFFFF !important; color: var(--ps-navy) !important; box-shadow: inset 0 0 0 1px var(--ps-navy) !important; gap: 14px; }\n .ps-order-btn:hover .ps-arrow { transform: translateX(2px); }\n .mobile-only-link { display: none; }\n\n \/* ============ EYEBROWS ============ *\/\n .eyebrow { \n font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; \n color: var(--gold-deep); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 8px; \n }\n .eyebrow-icon { height: 24px !important; width: auto !important; flex-shrink: 0; object-fit: contain; display: block; }\n\n \/* ============ HERO ORDER (FONDO Y DEGRADADO) ============ *\/\n .hero { \n \/* Padding modificado para compensar el header fijo de 160px *\/\n padding: 232px 0 0; \n background-image: \n linear-gradient(to bottom, rgba(255,253,246,0.5) 0%, rgba(255,253,246,0.95) 85%, var(--cream) 100%),\n url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-19-2026-at-12_32_12-PM.png');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n }\n \n .hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(36px, 5vw, 64px); line-height: 1.05; margin: 16px 0 0; letter-spacing: -1px; color: var(--navy); }\n .hero h1 .accent { display: block; color: var(--gold); font-style: italic; font-weight: 600; }\n .hero p.lead { max-width: 640px; margin: 22px 0 0; font-size: 17px; color: var(--navy); line-height: 1.7; font-weight: 400;}\n .hero p.lead strong { color: var(--navy); font-weight: 700; }\n\n \/* ============ FRANJA \/ DOCKET ============ *\/\n .docket-wrapper {\n margin-top: 56px;\n background: rgba(255, 253, 246, 0.75); \n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n border-top: 1px solid rgba(194,155,71,0.3); \n border-bottom: 1px solid rgba(194,155,71,0.3);\n width: 100%;\n }\n \n .docket { padding: 24px 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; max-width: 1400px; margin: 0 auto; }\n .docket-item { display: flex; align-items: center; gap: 16px; }\n .docket-icon { height: 32px !important; width: auto !important; object-fit: contain; flex-shrink: 0;}\n .docket-item p { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--navy); text-transform: uppercase; }\n .docket-item p b { color: var(--gold-deep); font-weight: 600; }\n \n \/* ============ LAYOUT GRID ============ *\/\n .grid { display: grid; grid-template-columns: 1fr 420px; gap: 8vw; align-items: start; padding: 72px 0 120px;}\n\n section.block { margin-top: 64px; }\n section.block:first-child { margin-top: 0; }\n .block-head { margin-bottom: 24px; }\n .block-head h2 { font-family: var(--display); font-weight: 700; font-size: 32px; margin: 0; color: var(--navy); }\n .helper { color: var(--gray); font-size: 15px; margin: 12px 0 24px; }\n\n \/* ============ FORM ELEMENTS ============ *\/\n .modes { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }\n .mode { font-family: var(--body); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; padding: 14px 24px; border-radius: 3px; border: 1.5px solid var(--navy); background: transparent; color: var(--navy); transition: all 0.2s ease; }\n .mode:hover { background: rgba(43,76,94,0.05); }\n .mode[aria-pressed=\"true\"] { background: var(--navy); color: var(--cream); }\n\n .lines { display: flex; flex-direction: column; gap: 24px; }\n \n .line, .tag {\n background: var(--paper); border-radius: var(--radius); border: 1px solid var(--line); border-top: 3px solid var(--gold);\n padding: 24px; position: relative; box-shadow: 0 10px 30px rgba(43,76,94,0.03);\n }\n .line { display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: end; transition: all 0.3s ease; }\n .line.ok-border { border-color: rgba(40, 167, 69, 0.4); border-top: 3px solid #28a745; }\n\n label { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--navy); display: block; margin-bottom: 8px; font-weight: 500;}\n \n select, input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], input[type=\"date\"], textarea {\n width: 100%; font-family: var(--body); font-size: 15px; color: var(--navy);\n background: var(--cream); border: 1px solid var(--line); border-radius: 3px;\n padding: 14px 16px; outline: none; transition: all 0.2s;\n }\n select:focus, input:focus, textarea:focus { border-color: var(--navy); box-shadow: var(--ring); }\n textarea { resize: vertical; min-height: 100px; }\n\n .size-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }\n .size-toggle button { font-family: var(--mono); font-size: 12px; letter-spacing: 0.5px; padding: 12px 16px; border: 0; background: var(--cream); color: var(--navy); transition: all 0.15s; border-right: 1px solid var(--line); text-transform: uppercase;}\n .size-toggle button:last-child { border-right: none; }\n .size-toggle button[aria-pressed=\"true\"] { background: var(--navy); color: var(--cream); }\n \n \/* ESTILO PARA BOT\u00d3N DE TAMA\u00d1O DESHABILITADO (32oz ONLY) *\/\n .size-toggle button:disabled { opacity: 0.3 !important; cursor: not-allowed !important; background: var(--cream) !important; color: var(--navy) !important; }\n\n .qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: var(--cream);}\n .qty button { width: 42px; height: 44px; border: none; background: transparent; font-size: 18px; color: var(--navy); line-height: 1; }\n .qty button:hover { background: rgba(194,155,71,0.1); }\n .qty input { width: 60px; height: 44px; text-align: center; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0; padding: 0; -moz-appearance: textfield; background: transparent; font-weight: 600;}\n .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n\n .line-foot { grid-column: 1\/-1; display: flex; align-items: center; gap: 16px; margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 16px; }\n \n \/* ============ FOCO VINTAGE INDICADOR ============ *\/\n .vintage-bulb { position: relative; width: 20px; height: 20px; border-radius: 50%; margin-left: 6px; margin-right: 6px; flex-shrink: 0; transition: all 0.3s ease; }\n .vintage-bulb::before { content: ''; position: absolute; top: 15%; left: 15%; width: 35%; height: 35%; background: rgba(255,255,255,0.7); border-radius: 50%; filter: blur(1px); z-index: 2; }\n .vintage-bulb.state-red { background: radial-gradient(circle at 35% 35%, #ff5252, #cc0000 60%, #660000); box-shadow: 0 0 0 2px #222, 0 0 0 5px var(--gold), inset -3px -3px 6px rgba(0,0,0,0.6), 0 0 12px 2px rgba(204, 0, 0, 0.8); }\n .vintage-bulb.state-green { background: radial-gradient(circle at 35% 35%, #7ee695, #1d9e36 60%, #0a4013); box-shadow: 0 0 0 2px #222, 0 0 0 5px var(--gold), inset -3px -3px 6px rgba(0,0,0,0.6), 0 0 12px 2px rgba(29, 158, 54, 0.8); }\n \n .min-note { display: flex; flex-direction: column; gap: 2px; }\n .min-note .min-txt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; transition: color 0.3s;}\n .min-note .min-sub { font-family: var(--mono); font-size: 10px; opacity: 0.8; letter-spacing: 0.5px; transition: color 0.3s;}\n \n .line-total { font-family: var(--mono); font-size: 15px; color: var(--navy); margin-left: auto; font-weight: 500;}\n .remove { background: none; border: 0; color: var(--gray); font-size: 11px; font-family: var(--mono); letter-spacing: 1px; text-transform: uppercase; padding: 0 10px; transition: color 0.2s;}\n .remove:hover { text-decoration: underline; color: #d32f2f;}\n\n .add-line { margin-top: 24px; font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); background: transparent; border: 1.5px dashed var(--gold); border-radius: 3px; padding: 16px 24px; width: 100%; transition: background 0.2s; }\n .add-line:hover { background: rgba(194,155,71,0.05); }\n\n .price-note { font-family: var(--mono); font-size: 10px; color: var(--gray); margin-top: 16px; letter-spacing: 0.5px; text-transform: uppercase; text-align: center;}\n\n \/* Pickup Tag *\/\n .pickup-tag { background: var(--cream); border: 1px solid var(--line); border-radius: 6px; padding: 24px; position: relative; overflow: hidden; margin-bottom: 24px;}\n .pickup-tag .pk-eye { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: var(--gold-deep); text-transform: uppercase; display: flex; align-items: center; gap: 8px;}\n .pickup-tag .pk-eye::before { content: ''; display: block; width: 20px; height: 20px; background-image: url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp'); background-size: contain; background-repeat: no-repeat;}\n .pickup-tag h3 { font-family: var(--display); font-weight: 700; font-size: 24px; margin: 12px 0 4px; color: var(--navy);}\n .pickup-tag .addr { color: var(--gray); font-size: 15px; }\n .map-embed { margin-top: 16px; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); filter: sepia(10%) saturate(90%); }\n .map-embed iframe { width: 100%; height: 160px; display: block; border: 0; }\n .pickup-tag a.map { color: var(--navy); font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-decoration: none; display: inline-block; margin-top: 12px; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid var(--gold);}\n .pickup-tag .pk-note { margin-top: 16px; font-size: 14px; color: var(--gray); border-top: 1px solid var(--line); padding-top: 16px; }\n\n .when { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }\n \n .details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }\n .details .full { grid-column: 1\/-1; }\n .corp-only { display: none; }\n body.corp .corp-only { display: block; }\n\n .filedrop { border: 1.5px dashed var(--line); border-radius: 3px; padding: 14px; font-size: 14px; color: var(--gray); background: var(--cream); }\n .filedrop input { font-family: var(--body); font-size: 14px; border: none; padding: 0; background: transparent; }\n\n \/* Submit Buttons *\/\n .submit-row { margin-top: 40px; }\n .btn-send { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; background: var(--navy); color: var(--cream); border: 1.5px solid var(--navy); border-radius: 3px; padding: 18px 40px; cursor: pointer; transition: all 0.25s; }\n .btn-send:hover { background: transparent; color: var(--navy); }\n .pay-note { font-family: var(--body); font-size: 14px; color: var(--gray); margin-top: 16px; }\n .form-error { color: #d32f2f; font-size: 14px; margin-top: 14px; min-height: 1em; font-weight: 500;}\n\n \/* ============ RIGHT COLUMN TAG ============ *\/\n .tag-col { position: sticky; top: 180px; } \n \n .tag-top { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 16px; }\n .tag-top .t-eye { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-deep); display: flex; align-items: center; gap: 8px;}\n .tag-top .t-eye::before { content: ''; display: block; width: 24px; height: 24px; background-image: url('http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp'); background-size: contain; background-repeat: no-repeat;}\n .tag-top h3 { font-family: var(--display); font-weight: 700; font-size: 26px; margin: 8px 0 0; color: var(--navy);}\n \n .tag-body { padding: 0 0 16px; }\n .tag-empty { color: var(--gray); font-size: 15px; padding: 8px 0; }\n .tag-item { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(194,155,71,0.1); font-size: 15px; color: var(--navy);}\n .tag-item .ti-name { font-weight: 600; }\n .tag-item .ti-meta { font-family: var(--mono); font-size: 11px; color: var(--gray); letter-spacing: 0.5px; margin-top: 4px;}\n .tag-item .ti-price { font-family: var(--mono); font-size: 14px; color: var(--navy); white-space: nowrap; font-weight: 500;}\n .tag-item.warn .ti-meta { color: #d32f2f; }\n \n .tag-sub { display: flex; justify-content: space-between; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--line); }\n .tag-sub .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--navy); font-weight: 500;}\n .tag-sub .amt { font-family: var(--display); font-weight: 700; font-size: 32px; color: var(--navy); }\n \n .tag-foot { font-size: 13px; color: var(--gray); line-height: 1.6; padding-top: 16px; border-top: 1px solid rgba(194,155,71,0.1);}\n\n \/* ============ FOOTER ANIMADO ============ *\/\n footer { position: relative; background: var(--cream); isolation: isolate; min-height: 500px; display: flex; flex-direction: column; margin-top: 40px; width: 100vw; margin-left: calc(-50vw + 50%); }\n .footer-bar { display: flex; height: 5px; position: relative; z-index: 20; width: 100%;}\n .footer-bar span { flex: 1; }\n .machine-factory { position: absolute; bottom: 52px; right: 5%; width: 320px; height: 400px; z-index: 10; }\n .machine-img { width: 100%; height: auto; position: relative; z-index: 10; filter: drop-shadow(0 20px 30px rgba(43,76,94,0.15)); }\n .footer-canvas { position: absolute; inset: 0; z-index: -2; overflow: hidden !important; }\n .f-wash-blob { position: absolute; filter: blur(35px); opacity: 0.75; }\n\n .fb-pink { width: 500px; height: 460px; background: var(--pink); top: -20px; left: -10%; animation: ffluff1 16s ease-in-out infinite alternate; }\n .fb-yellow { width: 460px; height: 410px; background: var(--yellow); top: 50px; left: 35%; animation: ffluff2 18s ease-in-out infinite alternate; }\n .fb-mint { width: 440px; height: 400px; background: var(--mint); top: 100px; left: 15%; animation: ffluff3 20s ease-in-out infinite alternate; }\n .fb-sky { width: 520px; height: 470px; background: var(--sky); top: -20px; right: 10%; animation: ffluff4 22s ease-in-out infinite alternate; }\n\n @keyframes ffluff1 { 0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 40% 60% 70% 30% \/ 40% 50% 60% 50%; } 50% { transform: translate(750px, 220px) scale(1.5) rotate(25deg); border-radius: 60% 40% 30% 70% \/ 50% 60% 40% 60%; } 100% { transform: translate(-80px, -120px) scale(0.95) rotate(-15deg); border-radius: 40% 60% 70% 30% \/ 40% 50% 60% 50%; } }\n @keyframes ffluff2 { 0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 50% 50% 50% 50% \/ 50% 50% 50% 50%; } 50% { transform: translate(-650px, 280px) scale(1.6) rotate(-30deg); border-radius: 30% 70% 70% 30% \/ 30% 30% 70% 70%; } 100% { transform: translate(20px, -90px) scale(1.05) rotate(20deg); border-radius: 50% 50% 50% 50% \/ 50% 50% 50% 50%; } }\n @keyframes ffluff3 { 0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 30% 70% 50% 50% \/ 50% 50% 70% 30%; } 50% { transform: translate(850px, -180px) scale(1.7) rotate(45deg); border-radius: 50% 50% 30% 70% \/ 60% 40% 40% 60%; } 100% { transform: translate(-200px, 160px) scale(0.9) rotate(-20deg); border-radius: 30% 70% 50% 50% \/ 50% 50% 70% 30%; } }\n @keyframes ffluff4 { 0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 60% 40% 40% 60% \/ 40% 60% 60% 40%; } 50% { transform: translate(-800px, 320px) scale(1.4) rotate(-25deg); border-radius: 40% 60% 70% 30% \/ 70% 30% 50% 50%; } 100% { transform: translate(250px, -200px) scale(1.15) rotate(15deg); border-radius: 60% 40% 40% 60% \/ 40% 60% 60% 40%; } }\n\n .footer-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(255,253,246,0.7) 0%, rgba(255,253,246,0.3) 60%, rgba(255,253,246,0) 100%); pointer-events: none; }\n .footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 70px 48px 32px; position: relative; z-index: 15; align-items: start; }\n .footer-col-title { height: 24px; margin-bottom: 20px; display: flex; align-items: center; }\n .footer-col-title h3 { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-deep); line-height: 1; }\n .footer-brand-img { max-height: 45px; width: auto; object-fit: contain; object-position: left center; display: block; margin: 0; }\n .footer-inner a, .footer-inner p:not(.footer-brand-text) { display: block; color: var(--navy); text-decoration: none; font-size: 14px; line-height: 1.9; opacity: 0.9; margin: 0; }\n .footer-inner a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }\n .footer-brand-text { font-size: 14px; line-height: 1.8; color: var(--navy); opacity: 0.85; max-width: 320px; margin: 0; }\n .footer-legal { border-top: 1px solid rgba(194,155,71,0.2); width: 100%; max-width: 1200px; padding: 16px 48px; margin: auto auto 0 auto; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.7; color: var(--navy); position: relative; z-index: 20; }\n\n \/* Mobile Bar & Responsive *\/\n .mbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 105; background: #FFFFFF; color: var(--navy); padding: 16px 24px; align-items: center; justify-content: space-between; box-shadow: 0 -10px 30px rgba(43,76,94,.1); border-top: 1px solid var(--line);}\n .mbar .m-amt { font-family: var(--display); font-weight: 700; font-size: 24px; }\n .mbar .m-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray);}\n .mbar button { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; background: var(--navy); color: var(--cream); border: 0; border-radius: 3px; padding: 14px 24px; cursor: pointer; }\n \n @media(max-width: 1100px) { .grid { grid-template-columns: 1fr 340px; gap: 4vw; } }\n @media(max-width: 960px) { \n .grid { grid-template-columns: 1fr; padding-bottom: 132px; } \n .tag-col { position: static; }\n .mbar { display: flex; } \n .nav-links { display: none; position: absolute; top: 140px; left: 0; width: 100vw; margin-left: calc(-50vw + 50%); background: #FFFFFF; flex-direction: column; padding: 24px; box-shadow: 0 10px 20px rgba(43,76,94,0.1); gap: 20px; text-align: center; }\n .nav-links.active { display: flex; }\n }\n \n @media(max-width: 860px) {\n \/* Congelamos animaciones en m\u00f3vil *\/\n .f-wash-blob { animation: none !important; transform: none !important; }\n\n .wrap, .nav, .footer-inner, .footer-legal, .docket { padding-left: 24px !important; padding-right: 24px !important; }\n .nav { height: 140px; } \n .logo-slot img { height: 135px !important; }\n div.mobile-menu-btn { display: flex !important; }\n .ps-order-btn { display: none !important; }\n .mobile-only-link { display: block !important; color: var(--gold) !important; font-weight: 700 !important; }\n .nav-links { top: 140px; }\n\n .docket { justify-content: flex-start; }\n .footer-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 60px; padding-bottom: 20px; } \n .machine-factory { position: relative; right: auto; bottom: auto; transform: none; margin: 0 auto 40px auto; width: 280px; height: auto; }\n .footer-legal { flex-direction: column; gap: 8px; text-align: center; }\n }\n\n @media(max-width: 520px) { \n .docket { flex-direction: column; align-items: flex-start; gap: 20px; } \n .line { grid-template-columns: 1fr; }\n .when { grid-template-columns: 1fr; }\n .details { grid-template-columns: 1fr; }\n }\n\n \/* Sealed *\/\n .sealed { display: none; text-align: center; padding: 90px 20px 120px; }\n body.sent .sealed { display: block; }\n body.sent .order-flow { display: none; }\n body.sent .mbar { display: none !important; } \/* Ocultar barra movil si se envio *\/\n .ring-seal { width: 130px; height: 130px; margin: 0 auto 26px; position: relative; }\n .ring-seal svg { width: 100%; height: 100%; transform: rotate(-90deg); }\n .ring-seal .r-bg { fill: none; stroke: var(--line); stroke-width: 3; }\n .ring-seal .r-fg { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 7; stroke-dashoffset: 383; animation: seal 1.1s ease forwards; }\n @keyframes seal { to { stroke-dashoffset: 0; } }\n .ring-seal .check { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); color: var(--gold-deep); font-size: 2rem; opacity: 0; animation: pop .3s ease .95s forwards; }\n @keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }\n .sealed h2 { font-family: var(--display); font-weight: 700; font-size: 40px; margin: 0 0 16px; color: var(--navy);}\n .sealed p { max-width: 480px; margin: 0 auto; color: var(--gray); font-size: 17px; line-height: 1.7;}\n .sealed a.again { display: inline-block; margin-top: 32px; font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 1.5px solid var(--gold); padding-bottom: 4px; font-weight: 500;}\n\n<\/style>\n<\/head>\n<body>\n\n<div class=\"ps-fullscreen-breakout\">\n\n <header>\n <div class=\"wrap\">\n <nav class=\"nav\">\n <div class=\"logo-slot\">\n <a href=\"\/\"><img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-7-2026-at-08_03_19-AM-1.webp\" alt=\"The Pineapple Sweets & Co. Logo\"><\/a>\n <\/div>\n <div class=\"nav-right\">\n <div class=\"nav-links\" id=\"navLinks\">\n <a href=\"\/\">Home<\/a>\n <a href=\"\/?page_id=93\">Flavours<\/a>\n <a href=\"\/#corporate\">Corporate Favours<\/a>\n <a href=\"\/#story\">Our Story<\/a>\n <a href=\"\/?page_id=178\" class=\"mobile-only-link\">Order Online →<\/a>\n <\/div>\n \n <a href=\"\/?page_id=178\" class=\"ps-order-btn\">Order <span class=\"ps-arrow\" aria-hidden=\"true\">→<\/span><\/a>\n \n <!-- Men\u00fa Hamburguesa Div -->\n <div class=\"mobile-menu-btn\" id=\"mobileMenuBtn\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/div>\n <\/div>\n <\/nav>\n <\/div>\n <\/header>\n\n <div class=\"order-flow\">\n <div class=\"hero\">\n <div class=\"wrap\">\n <div class=\"eyebrow\">\n <img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp\" alt=\"*\" class=\"eyebrow-icon\" style=\"height:20px!important;\">\n Place your order \u00b7 Halifax, NS\n <\/div>\n <h1>Reserve your batch.<span class=\"accent\">Spun fresh, made to order.<\/span><\/h1>\n <p class=\"lead\">Everything is spun to order in small batches \u2014 nothing sits on a shelf. Pick your flavours, choose a pickup day, and Grace confirms your price and time by email. <strong>Minimum 12 tubs per flavour.<\/strong><\/p>\n <\/div>\n \n <div class=\"docket-wrapper\">\n <div class=\"docket\">\n <div class=\"docket-item\">\n <img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp\" alt=\"*\" class=\"docket-icon\">\n <p><b>Made to order<\/b> \u2014 no shelf stock<\/p>\n <\/div>\n <div class=\"docket-item\">\n <img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp\" alt=\"*\" class=\"docket-icon\">\n <p><b>12 tubs<\/b> minimum per flavour<\/p>\n <\/div>\n <div class=\"docket-item\">\n <img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp\" alt=\"*\" class=\"docket-icon\">\n <p>Pickup at <b>Kelly's Deli<\/b><\/p>\n <\/div>\n <div class=\"docket-item\">\n <img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp\" alt=\"*\" class=\"docket-icon\">\n <p><b>E-transfer<\/b> upon confirmation<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"wrap\">\n <div class=\"grid\">\n\n <!-- LEFT -->\n <form id=\"orderForm\" novalidate>\n <!-- STEP 1 -->\n <section class=\"block\">\n <div class=\"block-head\">\n <div class=\"eyebrow\">\n <img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp\" alt=\"*\" class=\"eyebrow-icon\" style=\"height:20px!important;\">\n Step one\n <\/div>\n <h2>Build your batch<\/h2>\n <\/div>\n\n <div class=\"modes\" role=\"group\" aria-label=\"Order type\">\n <button type=\"button\" class=\"mode\" data-mode=\"personal\" aria-pressed=\"true\">Personal \u00b7 events<\/button>\n <button type=\"button\" class=\"mode\" data-mode=\"friday\" aria-pressed=\"false\">Corporate \u00b7 Friday Break Box<\/button>\n <button type=\"button\" class=\"mode\" data-mode=\"label\" aria-pressed=\"false\">Corporate \u00b7 Your Label<\/button>\n <\/div>\n <p class=\"helper\">12 tubs minimum per flavour. Mix sizes freely across your batch.<\/p>\n\n <div class=\"lines\" id=\"lines\">\n <!-- Primera Fila INYECTADA en HTML para que no desaparezca en el editor -->\n <div class=\"line\">\n <div>\n <label class=\"f-label-text\">Flavour<\/label>\n <select class=\"f-flavour\">\n <option value=\"\">Choose a flavour<\/option>\n <option>Moon Mist<\/option>\n <option>Blue Raspberry<\/option>\n <option>Grape<\/option>\n <option>Root Beer<\/option>\n <option>Banana<\/option>\n <option>Strawberry Lemonade<\/option>\n <option>Orange Cream<\/option>\n <option>Green Apple<\/option>\n <option>Fluffy Rainbow<\/option>\n <option>Pink Vanilla Cake<\/option>\n <option>Peachmellow<\/option>\n <option>Bubble Gum<\/option>\n <\/select>\n <\/div>\n <div>\n <label>Size<\/label>\n <div class=\"size-toggle\" role=\"group\">\n <button type=\"button\" class=\"f-size\" data-size=\"16oz\" aria-pressed=\"true\">16 oz<\/button>\n <button type=\"button\" class=\"f-size\" data-size=\"32oz\" aria-pressed=\"false\">32 oz<\/button>\n <\/div>\n <\/div>\n <div style=\"grid-column:1\/-1;display:flex;align-items:end;justify-content:space-between;gap:14px;flex-wrap:wrap;\">\n <div>\n <label>Quantity<\/label>\n <div class=\"qty\">\n <button type=\"button\" class=\"q-minus\" aria-label=\"Fewer\">\u2212<\/button>\n <input type=\"number\" class=\"f-qty\" value=\"12\" min=\"0\" inputmode=\"numeric\" \/>\n <button type=\"button\" class=\"q-plus\" aria-label=\"More\">+<\/button>\n <\/div>\n <\/div>\n <button type=\"button\" class=\"remove\">Remove<\/button>\n <\/div>\n <div class=\"line-foot\">\n <!-- FOCO RETRO (CRISTAL CSS) -->\n <div class=\"vintage-bulb state-green\"><\/div>\n <span class=\"min-note\">\n <span class=\"min-txt\" style=\"color:#28a745;\">12 minimum met<\/span>\n <span class=\"min-sub\" style=\"color:#28a745;\">Ready for production<\/span>\n <\/span>\n <span class=\"line-total\">$0.00<\/span>\n <\/div>\n <\/div>\n <\/div>\n <button type=\"button\" class=\"add-line\" id=\"addLine\">+ Add another flavour<\/button>\n <p class=\"price-note\">Prices in CAD \u00b7 16 oz $3.50 \u00b7 32 oz $5.50 \u2014 Grace confirms the final total.<\/p>\n <\/section>\n\n <!-- STEP 2 -->\n <section class=\"block\">\n <div class=\"block-head\">\n <div class=\"eyebrow\">\n <img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp\" alt=\"*\" class=\"eyebrow-icon\" style=\"height:20px!important;\">\n Step two\n <\/div>\n <h2>Pickup \u00b7 timing<\/h2>\n <\/div>\n <div class=\"pickup-tag\">\n <span class=\"pk-eye\">\n <img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp\" alt=\"*\" class=\"eyebrow-icon\" style=\"height:20px!important; margin-right:4px;\">\n Pickup point\n <\/span>\n <h3>Kelly's Deli<\/h3>\n <div class=\"addr\">30 Farnham Gate Rd, Halifax, NS B3M 4R8<\/div>\n <div class=\"map-embed\">\n <iframe title=\"Map to Kelly's Deli\" src=\"https:\/\/www.google.com\/maps?q=30+Farnham+Gate+Rd,+Halifax,+NS+B3M+4R8&output=embed\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\" allowfullscreen><\/iframe>\n <\/div>\n <a class=\"map\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/www.google.com\/maps\/search\/?api=1&query=30+Farnham+Gate+Rd%2C+Halifax%2C+NS+B3M+4R8\">Open in Google Maps \u2192<\/a>\n <div class=\"pk-note\">Pickup only for now. We'll lock a day and time with you before you come by \u2014 no need to guess.<\/div>\n <\/div>\n <div class=\"when\">\n <div class=\"field\">\n <label for=\"pkDate\">Preferred pickup date<\/label>\n <input type=\"date\" id=\"pkDate\" name=\"pickup_date\" \/>\n <\/div>\n <div class=\"field\">\n <label for=\"pkTime\">Time of day<\/label>\n <select id=\"pkTime\" name=\"pickup_time\">\n <option>No preference<\/option>\n <option>Morning<\/option>\n <option>Afternoon<\/option>\n <option>Evening<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- STEP 3 -->\n <section class=\"block\">\n <div class=\"block-head\">\n <div class=\"eyebrow\">\n <img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp\" alt=\"*\" class=\"eyebrow-icon\" style=\"height:20px!important;\">\n Step three\n <\/div>\n <h2>Your details<\/h2>\n <\/div>\n <div class=\"details\">\n <div class=\"field\">\n <label for=\"name\">Name<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" autocomplete=\"name\" \/>\n <\/div>\n <div class=\"field\">\n <label for=\"email\">Email<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" autocomplete=\"email\" \/>\n <\/div>\n <div class=\"field\">\n <label for=\"phone\">Phone<\/label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" autocomplete=\"tel\" \/>\n <\/div>\n <div class=\"field\">\n <label for=\"hear\">How did you hear about us?<\/label>\n <select id=\"hear\" name=\"referral\">\n <option value=\"\">Choose one<\/option>\n <option>Instagram<\/option>\n <option>Facebook<\/option>\n <option>TikTok<\/option>\n <option>A friend told me<\/option>\n <option>Found you locally<\/option>\n <option>Other<\/option>\n <\/select>\n <\/div>\n\n <!-- corporate-only -->\n <div class=\"field corp-only\">\n <label for=\"company\">Company name<\/label>\n <input type=\"text\" id=\"company\" name=\"company\" \/>\n <\/div>\n <div class=\"field corp-only\">\n <label for=\"logo\">Your logo (PNG\/SVG) \u2014 we handle the label<\/label>\n <div class=\"filedrop\"><input type=\"file\" id=\"logo\" name=\"logo\" accept=\".png,.svg,.jpg,.jpeg\" \/><\/div>\n <\/div>\n\n <div class=\"field full\">\n <label for=\"notes\">Anything else? (occasion, colours, questions)<\/label>\n <textarea id=\"notes\" name=\"notes\"><\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"submit-row\">\n <button type=\"submit\" class=\"btn-send\">Send my batch request \u2192<\/button>\n <p class=\"pay-note\">Pay via e-transfer when order is confirmed.<\/p>\n <p class=\"form-error\" id=\"formError\" role=\"alert\"><\/p>\n <\/div>\n <\/section>\n <\/form>\n\n <!-- RIGHT -->\n <aside class=\"tag-col\">\n <div class=\"tag\">\n <div class=\"tag-top\">\n <div class=\"t-eye\">\n <img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-at-05_43_23-PM.webp\" alt=\"*\" class=\"eyebrow-icon\" style=\"height:24px!important; margin-right:4px;\">\n Your batch\n <\/div>\n <h3 id=\"tagMode\">Personal & events<\/h3>\n <\/div>\n <div class=\"tag-body\" id=\"tagBody\">\n <div class=\"tag-empty\">Add a flavour to start your batch.<\/div>\n <\/div>\n <div class=\"tag-sub\">\n <span class=\"lbl\">Estimated subtotal<\/span>\n <span class=\"amt\" id=\"tagTotal\">$0.00<\/span>\n <\/div>\n <div class=\"tag-foot\">An estimate \u2014 Grace confirms your final total and pickup by email. Each flavour needs 12 tubs to go in.<\/div>\n <\/div>\n <\/aside>\n\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"sealed\">\n <div class=\"wrap\">\n <div class=\"ring-seal\">\n <svg viewBox=\"0 0 130 130\"><circle class=\"r-bg\" cx=\"65\" cy=\"65\" r=\"61\"\/><circle class=\"r-fg\" cx=\"65\" cy=\"65\" r=\"61\"\/><\/svg>\n <div class=\"check\">\u2726<\/div>\n <\/div>\n <h2>Request sealed.<\/h2>\n <p>Thanks \u2014 your batch request is on its way to Grace. She'll confirm your price and pickup within a day. Keep an eye on your inbox, and your junk folder, just in case.<\/p>\n <a class=\"again\" href=\"#\" onclick=\"location.reload();return false;\">Start another batch<\/a>\n <\/div>\n <\/div>\n\n <div class=\"mbar\">\n <div>\n <div class=\"m-sub\">Estimated subtotal<\/div>\n <div class=\"m-amt\" id=\"mAmt\">$0.00<\/div>\n <\/div>\n <button type=\"button\" onclick=\"document.getElementById('orderForm').requestSubmit()\">Send request \u2192<\/button>\n <\/div>\n\n <footer>\n <div class=\"footer-bar\">\n <span style=\"background:var(--pink)\"><\/span>\n <span style=\"background:var(--yellow)\"><\/span>\n <span style=\"background:var(--mint)\"><\/span>\n <span style=\"background:var(--sky)\"><\/span>\n <\/div>\n \n <div class=\"footer-canvas\">\n <div class=\"f-wash-blob fb-pink\"><\/div>\n <div class=\"f-wash-blob fb-sky\"><\/div>\n <div class=\"f-wash-blob fb-yellow\"><\/div>\n <div class=\"f-wash-blob fb-mint\"><\/div>\n <\/div>\n\n <div class=\"footer-veil\"><\/div>\n\n <div class=\"footer-inner\">\n <div>\n <div class=\"footer-col-title\">\n <img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-7-2026-at-08_16_18-PM.webp\" class=\"footer-brand-img\" alt=\"The Pineapple Sweets & Co.\">\n <\/div>\n <p class=\"footer-brand-text\">Small-batch cotton candy with original recipes you won't find anywhere else. Made for gifting, perfect for the everyday.<\/p>\n <\/div>\n \n <div>\n <div class=\"footer-col-title\">\n <h3>Contact<\/h3>\n <\/div>\n <a href=\"mailto:grace@thepineapplesweets.com\">grace@thepineapplesweets.com<\/a>\n <a href=\"tel:+19024142177\">+1 (902) 414-2177<\/a>\n <p>Made in Halifax, NS<\/p>\n <\/div>\n \n <div>\n <div class=\"footer-col-title\">\n <h3>Explore<\/h3>\n <\/div>\n <a href=\"\/?page_id=93\">Flavours<\/a>\n <a href=\"\/#corporate\">Corporate Favours<\/a>\n <a href=\"\/#story\">Our Story<\/a>\n <a href=\"\/?page_id=178\">Order online<\/a>\n <\/div>\n \n <div><\/div>\n <\/div>\n \n <div class=\"machine-factory\">\n <!-- M\u00e1quina de algod\u00f3n de az\u00facar -->\n <img decoding=\"async\" src=\"http:\/\/thepineapplesweets.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-7-2026-at-05_36_55-PM-2.webp\" alt=\"Vintage Cotton Candy Machine\" class=\"machine-img\">\n <\/div>\n\n <div class=\"footer-legal\">\n <span>© 2026 The Pineapple Sweets & Co.<\/span>\n <span>Artisanal cotton candy · Halifax · NS<\/span>\n <\/div>\n <\/footer>\n\n<\/div> <!-- Fin del Breakout de Elementor -->\n\n<script>\n\/\/ Manejo del Men\u00fa M\u00f3vil del Header\ndocument.getElementById('mobileMenuBtn').addEventListener('click', function() {\n document.getElementById('navLinks').classList.toggle('active');\n this.classList.toggle('open');\n});\n\nconst PRICES = { '16oz': 3.50, '32oz': 5.50 };\nconst MIN_PER_FLAVOUR = 12;\n\n\/* ==============================================================\n CANDADO INTELIGENTE PARA SABORES DE 32oz EXCLUSIVAMENTE\n ============================================================== *\/\nconst ONLY_32OZ = ['Moon Mist', 'Fluffy Rainbow'];\n\n\/* ==============================================================\n ATENCI\u00d3N: ENV\u00cdO DE CORREO A GRACE\n ============================================================== *\/\nconst SEND_TO = 'grace@thepineapplesweets.com';\nconst WEB3FORMS_KEY = 'YOUR_ACCESS_KEY_HERE'; \n\nconst FLAVOURS = [\n 'Moon Mist', 'Blue Raspberry', 'Grape', 'Root Beer', 'Banana', \n 'Strawberry Lemonade', 'Orange Cream', 'Green Apple', 'Fluffy Rainbow', \n 'Pink Vanilla Cake', 'Peachmellow', 'Bubble Gum'\n];\n\nconst MODE_LABELS = {\n personal:'Personal & events',\n friday:'Corporate: Friday Break Box',\n label:'Corporate: Your Label'\n};\n\nlet mode = 'personal';\nconst linesEl = document.getElementById('lines');\nconst fmt = n => '$' + n.toFixed(2);\n\nfunction flavourOptions(sel){\n return ['<option value=\"\">Choose a flavour<\/option>']\n .concat(FLAVOURS.map(f=>`<option ${f===sel?'selected':''}>${f}<\/option>`))\n .join('');\n}\n\nfunction makeLine(){\n const row = document.createElement('div');\n row.className = 'line';\n row.innerHTML = `\n <div>\n <label class=\"f-label-text\">Flavour<\/label>\n <select class=\"f-flavour\">${flavourOptions()}<\/select>\n <\/div>\n <div>\n <label>Size<\/label>\n <div class=\"size-toggle\" role=\"group\">\n <button type=\"button\" class=\"f-size\" data-size=\"16oz\" aria-pressed=\"true\">16 oz<\/button>\n <button type=\"button\" class=\"f-size\" data-size=\"32oz\" aria-pressed=\"false\">32 oz<\/button>\n <\/div>\n <\/div>\n <div style=\"grid-column:1\/-1;display:flex;align-items:end;justify-content:space-between;gap:14px;flex-wrap:wrap;\">\n <div>\n <label>Quantity<\/label>\n <div class=\"qty\">\n <button type=\"button\" class=\"q-minus\" aria-label=\"Fewer\">\u2212<\/button>\n <input type=\"number\" class=\"f-qty\" value=\"12\" min=\"0\" inputmode=\"numeric\" \/>\n <button type=\"button\" class=\"q-plus\" aria-label=\"More\">+<\/button>\n <\/div>\n <\/div>\n <button type=\"button\" class=\"remove\">Remove<\/button>\n <\/div>\n <div class=\"line-foot\">\n <!-- FOCO RETRO (CRISTAL CSS) -->\n <div class=\"vintage-bulb state-green\"><\/div>\n <span class=\"min-note\">\n <span class=\"min-txt\" style=\"color:#28a745;\">12 minimum met<\/span>\n <span class=\"min-sub\" style=\"color:#28a745;\">Ready for production<\/span>\n <\/span>\n <span class=\"line-total\">$0.00<\/span>\n <\/div>`;\n linesEl.appendChild(row);\n bindLine(row);\n render();\n}\n\nfunction bindLine(row){\n row.querySelectorAll('.f-size').forEach(b=>{\n b.addEventListener('click',()=>{\n row.querySelectorAll('.f-size').forEach(x=>x.setAttribute('aria-pressed','false'));\n b.setAttribute('aria-pressed','true');\n render();\n });\n });\n row.querySelector('.q-minus').addEventListener('click',()=>{\n const i=row.querySelector('.f-qty'); i.value=Math.max(0,(+i.value||0)-1); render();\n });\n row.querySelector('.q-plus').addEventListener('click',()=>{\n const i=row.querySelector('.f-qty'); i.value=(+i.value||0)+1; render();\n });\n row.querySelector('.f-qty').addEventListener('input',render);\n row.querySelector('.f-flavour').addEventListener('change',render);\n row.querySelector('.remove').addEventListener('click',()=>{ row.remove(); render(); });\n}\n\nfunction readLines(){\n return [...document.querySelectorAll('.line')].map(row=>{\n const flavour = row.querySelector('.f-flavour').value;\n const size = row.querySelector('.f-size[aria-pressed=\"true\"]').dataset.size;\n const qty = +row.querySelector('.f-qty').value || 0;\n return { row, flavour, size, qty, price: PRICES[size] };\n });\n}\n\nfunction render(){\n let total = 0;\n const items = readLines();\n\n items.forEach(it=>{\n \/* --- L\u00d3GICA DE CANDADO PARA 32oz ONLY --- *\/\n const isOnly32 = ONLY_32OZ.includes(it.flavour);\n const btn16 = it.row.querySelector('.f-size[data-size=\"16oz\"]');\n const btn32 = it.row.querySelector('.f-size[data-size=\"32oz\"]');\n const labelText = it.row.querySelector('.f-label-text');\n \n if (isOnly32) {\n btn16.disabled = true;\n labelText.innerHTML = 'Flavour <span style=\"color:#C29B47; text-transform:none; letter-spacing:0; font-size:11px; margin-left:4px; font-weight:700;\">(32oz only)<\/span>';\n \n if (it.size === '16oz') {\n btn16.setAttribute('aria-pressed', 'false');\n btn32.setAttribute('aria-pressed', 'true');\n it.size = '32oz';\n it.price = PRICES['32oz'];\n }\n } else {\n btn16.disabled = false;\n labelText.innerHTML = 'Flavour';\n }\n\n const lineTotal = it.qty * it.price;\n total += lineTotal;\n it.row.querySelector('.line-total').textContent = fmt(lineTotal);\n\n const bulb = it.row.querySelector('.vintage-bulb');\n const txt = it.row.querySelector('.min-txt');\n const sub = it.row.querySelector('.min-sub');\n \n const isQtyOk = it.qty >= MIN_PER_FLAVOUR;\n const isFlavourOk = it.flavour !== '';\n \n if(isQtyOk) {\n bulb.classList.add('state-green');\n bulb.classList.remove('state-red');\n it.row.classList.add('ok-border');\n } else {\n bulb.classList.add('state-red');\n bulb.classList.remove('state-green');\n it.row.classList.remove('ok-border');\n }\n\n if (!isFlavourOk && isQtyOk) {\n txt.textContent = '12 reached \u2014 Select Flavour';\n sub.textContent = 'Pending selection';\n txt.style.color = '#C29B47'; \n sub.style.color = '#C29B47';\n } else if (!isQtyOk) {\n txt.textContent = `${Math.max(0, MIN_PER_FLAVOUR - it.qty)} more to reach 12`;\n sub.textContent = 'Quantity too low';\n txt.style.color = '#cc0000'; \n sub.style.color = '#cc0000';\n } else {\n txt.textContent = '12 minimum met';\n sub.textContent = 'Ready for production';\n txt.style.color = '#1d9e36'; \n sub.style.color = '#1d9e36';\n }\n });\n\n const body = document.getElementById('tagBody');\n const valid = items.filter(it=>it.flavour && it.qty>0);\n if(!valid.length){\n body.innerHTML = '<div class=\"tag-empty\">Add a flavour to start your batch.<\/div>';\n } else {\n body.innerHTML = valid.map(it=>{\n const met = it.qty >= MIN_PER_FLAVOUR;\n return `<div class=\"tag-item ${met?'':'warn'}\">\n <div>\n <div class=\"ti-name\">${it.flavour}<\/div>\n <div class=\"ti-meta\">${it.qty} \u00d7 ${it.size} ${met?'':'\u00b7 needs 12'}<\/div>\n <\/div>\n <div class=\"ti-price\">${fmt(it.qty*it.price)}<\/div>\n <\/div>`;\n }).join('');\n }\n document.getElementById('tagTotal').textContent = fmt(total);\n document.getElementById('mAmt').textContent = fmt(total);\n document.getElementById('tagMode').textContent = MODE_LABELS[mode];\n}\n\ndocument.querySelectorAll('.mode').forEach(btn=>{\n btn.addEventListener('click',()=>{\n document.querySelectorAll('.mode').forEach(b=>b.setAttribute('aria-pressed','false'));\n btn.setAttribute('aria-pressed','true');\n mode = btn.dataset.mode;\n document.body.classList.toggle('corp', mode!=='personal');\n render();\n });\n});\n\ndocument.getElementById('addLine').addEventListener('click',makeLine);\n\ndocument.getElementById('orderForm').addEventListener('submit',async e=>{\n e.preventDefault();\n const err = document.getElementById('formError');\n err.textContent = '';\n\n const items = readLines().filter(it=>it.flavour && it.qty>0);\n const goodItems = items.filter(it=>it.qty>=MIN_PER_FLAVOUR);\n const name = document.getElementById('name').value.trim();\n const email = document.getElementById('email').value.trim();\n const date = document.getElementById('pkDate').value;\n\n if(!goodItems.length){ err.textContent='Add at least one flavour with 12 tubs or more.'; return; }\n if(items.length!==goodItems.length){ err.textContent='One flavour is still under the 12-tub minimum. Top it up or remove it.'; return; }\n if(!name){ err.textContent='Add your name so Grace knows who to reply to.'; return; }\n if(!email || !\/.+@.+\\..+\/.test(email)){ err.textContent='Add a valid email \u2014 that\\'s where your confirmation goes.'; return; }\n if(!date){ err.textContent='Pick a preferred pickup date.'; return; }\n\n const summary = goodItems.map(it=>`${it.qty} \u00d7 ${it.flavour} (${it.size}) \u2014 ${fmt(it.qty*it.price)}`).join('\\n');\n const total = goodItems.reduce((s,it)=>s+it.qty*it.price,0);\n const payload = {\n subject: `New batch request \u2014 ${name} (${MODE_LABELS[mode]})`,\n order_type: MODE_LABELS[mode],\n batch: summary,\n estimated_subtotal: fmt(total),\n pickup_date: date,\n pickup_time: document.getElementById('pkTime').value,\n pickup_location: \"Kelly's Deli, 30 Farnham Gate Rd, Halifax, NS B3M 4R8\",\n name, email,\n phone: document.getElementById('phone').value.trim(),\n company: document.getElementById('company').value.trim(),\n referral: document.getElementById('hear').value,\n notes: document.getElementById('notes').value.trim()\n };\n\n if(WEB3FORMS_KEY && WEB3FORMS_KEY !== 'YOUR_ACCESS_KEY_HERE'){\n try{\n const fd = new FormData();\n fd.append('access_key', WEB3FORMS_KEY);\n Object.entries(payload).forEach(([k,v])=>fd.append(k,v));\n const logo = document.getElementById('logo').files[0];\n if(logo) fd.append('logo', logo);\n const r = await fetch('https:\/\/api.web3forms.com\/submit',{method:'POST',body:fd});\n if(!r.ok) throw new Error('send failed');\n seal();\n }catch(_){\n err.textContent = 'Something interrupted the send. Try again, or email us at '+SEND_TO+'.';\n }\n } else {\n const body = `Order type: ${payload.order_type}\\n\\nBatch:\\n${summary}\\n\\nEstimated subtotal: ${payload.estimated_subtotal}\\n\\nPickup: ${payload.pickup_date} (${payload.pickup_time}) \u2014 ${payload.pickup_location}\\n\\nName: ${name}\\nEmail: ${email}\\nPhone: ${payload.phone}\\nCompany: ${payload.company}\\nHeard via: ${payload.referral}\\n\\nNotes: ${payload.notes}`;\n window.location.href = `mailto:${SEND_TO}?subject=${encodeURIComponent(payload.subject)}&body=${encodeURIComponent(body)}`;\n seal();\n }\n});\n\nfunction seal(){\n document.body.classList.add('sent');\n window.scrollTo({top:0,behavior:'smooth'});\n}\n\n\/\/ Iniciar con la primera l\u00ednea\ndocument.querySelectorAll('.line').forEach(bindLine);\nrender();\n\nconst d = new Date(); d.setDate(d.getDate()+2);\ndocument.getElementById('pkDate').min = d.toISOString().split('T')[0];\n<\/script>\n<\/body>\n<\/html>\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>Order \u2014 The Pineapple Sweets & Co. Home Flavours Corporate Favours Our Story Order Online → Order → Place your order \u00b7 Halifax, NS Reserve your batch.Spun fresh, made to order. Everything is spun to order in small batches \u2014 nothing sits on a shelf. Pick your flavours, choose a pickup day, and Grace confirms […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-178","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=\/wp\/v2\/pages\/178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=178"}],"version-history":[{"count":5,"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=\/wp\/v2\/pages\/178\/revisions"}],"predecessor-version":[{"id":300,"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=\/wp\/v2\/pages\/178\/revisions\/300"}],"wp:attachment":[{"href":"https:\/\/thepineapplesweets.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}