<!DOCTYPE html><html lang="en" data-astro-cid-sckkx6r4 data-astro-transition-scope="astro-smooz4hq-1"> <head><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><title>Wonderfruit 2026 | Wonderfruit 3-7 December 2026</title><meta name="description" content="Exploring wonder through art, culture, music &#38; nature."><link rel="canonical" href="https://wonderfruit.co"><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta property="og:locale" content="en_US"><meta property="og:type" content="website"><meta property="og:title" content="Wonderfruit 2026 | Wonderfruit 3-7 December 2026"><meta property="og:description" content="Exploring wonder through art, culture, music &#38; nature."><meta property="og:url" content="https://wonderfruit.co/"><meta property="og:site_name" content="Wonderfruit"><meta property="fb:app_id" content="178961422445518"><meta property="og:image" content="/wonderfruit-og.jpg"><meta property="og:image:secure_url" content="/wonderfruit-og.jpg"><meta property="og:image:width" content="1024"><meta property="og:image:height" content="538"><meta name="twitter:card" content="summary"><meta name="twitter:description" content="Exploring wonder through art, culture, music &#38; nature."><meta name="twitter:title" content="Wonderfruit 2026 | Wonderfruit 3-7 December 2026"><meta name="twitter:site" content="@Wonderfruitfest"><meta name="twitter:image" content="/wonderfruit-og.jpg"><meta name="twitter:creator" content="@Wonderfruitfest"><meta name="generator" content="Astro v4.16.19"><!-- Data Layer --><script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }

  const userConsent = localStorage.getItem("userConsent");
  if (userConsent === null) {
    // set consent to denied by default
    const consent = {
      ad_personalization: "denied",
      ad_storage: "denied",
      ad_user_data: "denied",
      analytics_storage: "denied",
      functionality_storage: "denied",
      personalization_storage: "denied",
      security_storage: "denied",
    };
    gtag("consent", "update", JSON.stringify(consent));
  } else {
    gtag("consent", "update", userConsent);
  }
</script><!-- GTAG --><!-- <script async is:inline src="https://www.googletagmanager.com/gtag/js?id=GTM-545XTWH"></script>
<script is:inline>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GTM-545XTWH');
</script> --><!-- Google Tag Manager --><script>
  (function (w, d, s, l, i) {
    w[l] = w[l] || [];
    w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
    var f = d.getElementsByTagName(s)[0],
      j = d.createElement(s),
      dl = l != "dataLayer" ? "&l=" + l : "";
    j.async = true;
    j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
    f.parentNode.insertBefore(j, f);
  })(window, document, "script", "dataLayer", "GTM-545XTWH");
</script><!-- End Google Tag Manager --><!-- Handle SPA Route Changes --><script>
  document.addEventListener("astro:after-swap", () => {
    window.dataLayer.push({
      event: "pageview",
      page: {
        url: window.location.href,
        path: window.location.pathname,
        title: document.title,
      },
    });
  });
</script><!-- External fonts --><link rel="stylesheet" href="https://use.typekit.net/qxm1bjm.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anuphan:wght@100..700&display=swap"><link rel="stylesheet" href="/_astro/map.Ce8IinMu.css">
<style>.tickets-button[data-astro-cid-j7pv25f6]:hover .tickets-button-dot[data-astro-cid-j7pv25f6],.tickets-button[data-astro-cid-j7pv25f6]:focus-visible .tickets-button-dot[data-astro-cid-j7pv25f6]{animation:ticketsButtonDotStrobe 5s linear infinite}@keyframes ticketsButtonDotStrobe{0%,to{background-color:#6f88e0}16.666%{background-color:#90ee90}33.333%{background-color:#df5ea6}50%{background-color:#ffb254}66.666%{background-color:#ffb2bf}83.333%{background-color:#ffe681}}
</style>
<link rel="stylesheet" href="/_astro/map.CYpbhLLh.css"><script type="module" src="/_astro/hoisted.D7KAjCJ8.js"></script>
<script type="module" src="/_astro/page.CEYL74ef.js"></script><style>[data-astro-transition-scope="astro-smooz4hq-1"] { view-transition-name: astro-smooz4hq-1; }@layer astro { ::view-transition-old(astro-smooz4hq-1) { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeOut; }::view-transition-new(astro-smooz4hq-1) { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(astro-smooz4hq-1) { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(astro-smooz4hq-1) { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-smooz4hq-1"],
			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-smooz4hq-1"] { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-smooz4hq-1"],
			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-smooz4hq-1"] { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-smooz4hq-1"],
			[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-smooz4hq-1"] { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-smooz4hq-1"],
			[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-smooz4hq-1"] { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeIn; }</style></head> <body class="min-h-screen flex flex-col undefined" data-astro-cid-sckkx6r4> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-545XTWH" height="0" width="0" style="display:none;visibility:hidden" data-astro-cid-sckkx6r4></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="Z20DHiv" component-url="/_astro/SideCart.DR2rx_x9.js" component-export="default" renderer-url="/_astro/client.Ddz0CcHE.js" props="{&quot;data-astro-cid-sckkx6r4&quot;:[0,true]}" ssr="" client="only" opts="{&quot;name&quot;:&quot;SideCart&quot;,&quot;value&quot;:&quot;solid-js&quot;}"></astro-island> <script>(()=>{var l=(s,i,o)=>{let r=async()=>{await(await s())()},t=typeof i.value=="object"?i.value:void 0,c={rootMargin:t==null?void 0:t.rootMargin},n=new IntersectionObserver(e=>{for(let a of e)if(a.isIntersecting){n.disconnect(),r();break}},c);for(let e of o.children)n.observe(e)};(self.Astro||(self.Astro={})).visible=l;window.dispatchEvent(new Event("astro:visible"));})();</script><script>window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));["click", "input"].forEach((o=>document.addEventListener(o,(o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()[0]||o.target);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});</script><!--xs--><astro-island uid="1tfCev" data-solid-render-id="s0" component-url="/_astro/AuthModal.CC7x0K8h.js" component-export="default" renderer-url="/_astro/client.Ddz0CcHE.js" props="{&quot;data-astro-cid-sckkx6r4&quot;:[0,true]}" ssr="" client="visible" opts="{&quot;name&quot;:&quot;AuthModal&quot;,&quot;value&quot;:true}" await-children=""><div data-hk="s00000" id="auth-lightbox" class="fixed inset-0 z-[600] flex justify-center items-center gap-5 md:p-[13px] bg-white/80 transition-opacity duration-300 opacity-0 pointer-events-none " inert aria-hidden="true"><div class="w-full md:w-[1100px] h-full md:h-auto flex bg-customOffWhite md:rounded-2xl shadow-lg overflow-hidden"><div class="w-full md:w-[327px] relative hidden md:block"><div class="w-full absolute p-[30px]"><div class="absolute text-[40px] text-white font-light leading-[125%]">Welcome to<br>Wonderfruit</div></div><img src="/profile/modal-image.jpg" alt class="w-full"></div><div class="flex-grow flex justify-center items-center relative"><!--$--><!--/--><button aria-label="Close" class="w-[30px] absolute top-0 right-0 m-[30px] p-[7px] border-[1px] border-black rounded-full"><img src="/icons/menu-close.svg" alt="Go back" class="w-full"></button><!--$--><div data-hk="s00002" class="w-full max-w-[345px] h-full flex flex-col justify-center items-center gap-[44px] py-[80px] px-[15px] md:px-0"><div class="max-w-[345px] text-[32px] text-center font-semibold leading-[120%]">Use your preferred method to continue.</div><div class="w-full flex flex-col gap-[8px]"><button class="w-full max-w-[345px] h-[42px] flex items-center gap-[15px] px-[15px] border-halfpx border-black rounded-lg "><img src="/profile/google-login.svg" alt class="w-[24px]"><div class="text-[14px] font-semibold leading-none translate-y-[10%]">Continue with Google</div></button><button class="w-full max-w-[345px] h-[42px] flex items-center gap-[15px] px-[15px] border-halfpx border-black rounded-lg"><img src="/profile/email-login.png" alt class="w-[24px]"><div class="text-[14px] font-semibold leading-none translate-y-[10%]">Continue with email</div></button><button class="w-full max-w-[345px] h-[42px] flex items-center gap-[15px] px-[15px] border-halfpx border-black rounded-lg"><img src="/profile/mobile-login.png" alt class="w-[24px]"><div class="text-[14px] font-semibold leading-none translate-y-[10%]">Continue with phone number</div></button><button class="w-full max-w-[345px] flex items-center justify-center gap-[15px] mt-[24px]"><img src="/profile/apple-login.svg" alt class="w-[13px]"><div class="text-[14px] text-center font-semibold leading-none translate-y-[10%]">Continue with Apple</div></button></div></div><!--/--><!--$--><!--/--><!--$--><!--/--><!--$--><!--/--><!--$--><!--/--></div></div></div><!--astro:end--></astro-island> <script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();</script><astro-island uid="2qKBwM" data-solid-render-id="s1" component-url="/_astro/FamilyBundle.DZqj3ocx.js" component-export="default" renderer-url="/_astro/client.Ddz0CcHE.js" props="{&quot;data-astro-cid-sckkx6r4&quot;:[0,true]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;FamilyBundle&quot;,&quot;value&quot;:true}" await-children=""><div data-hk="s10000" class="fixed inset-0 z-[120] flex items-center justify-center transition-opacity duration-300
        opacity-0 pointer-events-none
      "><div class="absolute inset-0 bg-black/50"></div><!--$--><!--/--></div><!--astro:end--></astro-island> <astro-island uid="ZkXx0x" data-solid-render-id="s2" component-url="/_astro/GlobalPlayer.CNcgdb7n.js" component-export="default" renderer-url="/_astro/client.Ddz0CcHE.js" props="{&quot;data-astro-transition-persist&quot;:[0,&quot;global-player&quot;],&quot;data-astro-cid-sckkx6r4&quot;:[0,true]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;GlobalPlayer&quot;,&quot;value&quot;:true}" data-astro-transition-persist="global-player" await-children=""><div data-hk="s20000" class="max-w-screen fixed z-[100] bottom-0 left-0 flex items-center bg-customLightSand rounded-tr-xl py-[11px] px-[8px]
              opacity-0 pointer-events-none transition-opacity duration-700
            "><audio preload="metadata"></audio><div id="mini-track-info" class="flex items-center gap-[12px] overflow-hidden" style="width:0"><button class="w-[10px] self-stretch flex items-start"><img src="/icons/menu-close.svg" alt="Close Music Player" class="w-[10px] aspect-square"></button><div class="flex flex-col gap-[5px]"><div class="text-[9px] text-black/60 font-medium leading-none uppercase">Listen to:</div><div class="flex flex-col"><div class="text-[16px] font-semibold leading-[110%] tracking-[-0.42px] md:whitespace-nowrap"></div><div class="text-[16px] text-customDarkGray font-semibold leading-[110%] tracking-[-0.36px] md:whitespace-nowrap"></div></div></div></div><button class="shrink-0 w-10 h-10 rounded-full border border-black/10 grid place-items-center mr-[12px]" title="Play"><img src="/expressions/musicplayer-mini-play.svg" alt="Play/Pause Track" class="w-[38px] aspect-square cursor-pointer"></button><img src="/expressions/musicplayer-tab.svg" alt="Expand Mini Player" class="w-[5px]"></div><!--astro:end--></astro-island> <header class="site-header white-header undefined w-full h-headerHeightMobile md:h-headerHeight flex justify-between items-center px-[20px] md:px-[40px] z-20 fixed top-0 left-0"><div class="flex items-center gap-[50px]"><!-- Logo --><a href="/"><img class="normal-color-on-scroll w-[25vw] md:w-[100px] brightness-0 invert" src="/icons/wf26-logo.svg" alt="Wonderfruit Logo"></a><!-- Menu sections --><ul class="hidden md:flex items-center gap-[60px] group"><li class="open-site-menu text-[16px] font-medium leading-none cursor-pointer sibling-fade
              text-white
              
            " data-index="0">Ethos</li><li class="open-site-menu text-[16px] font-medium leading-none cursor-pointer sibling-fade
              text-white
              
            " data-index="1">Explore</li><li class="open-site-menu text-[16px] font-medium leading-none cursor-pointer sibling-fade
              text-white
              
            " data-index="2">Passes</li><li class="open-site-menu text-[16px] font-medium leading-none cursor-pointer sibling-fade
              text-white
              
            " data-index="3">Stay</li><li class="open-site-menu text-[16px] font-medium leading-none cursor-pointer sibling-fade
              text-white
              
            " data-index="4">Join</li></ul></div><!-- Menu buttons --><div class="flex items-stretch gap-[24px]"><a href="/tickets" class="wf-header-btn hidden md:flex items-center gap-[5px] group
            
          " data-has-bg="false"><span class="wf-header-btn-text text-[16px] font-medium leading-none uppercase
              tracking-[.48px]
              text-white
              translate-y-[10%]
            ">Pre-Sale Registration</span><img src="/icons/link-arrow-new.svg" alt="" class="wf-header-btn-arrow w-[12px] aspect-square group-hover:rotate-45 transition-transform duration-300 
              invert" data-index="0"></a><!-- Language switcher --><div class="hidden md:flex items-center justify-center gap-[8px] cursor-pointer relative group"><img src="/icons/lang-icon.png" alt="Language Icon" class="normal-color-on-scroll w-[20px] aspect-square brightness-0 invert"><div class="wf-header-lang-label text-[16px] font-medium leading-none translate-y-[10%] text-white">EN</div><div class="absolute bottom-0 pt-[9px] translate-y-full opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto"><div class=" flex flex-col bg-white rounded-md overflow-hidden" style="box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);"><div class="hover:bg-[#EDEDED] transition-colors duration-150"><a href="/?lang=thai" class="flex justify-between items-center px-[20px] py-[14px] pointer-events-none"><span class="text-[14px] text-customDarkGray leading-none translate-y-[10%] font-bold">
English
</span></a></div><div class="hover:bg-[#EDEDED] transition-colors duration-150"><a href="/?lang=thai" class="flex justify-between items-center px-[20px] py-[14px] "><span class="text-[14px] text-customDarkGray leading-none translate-y-[10%] font-medium">
Thai
</span></a></div></div></div></div><astro-island uid="Z1TFdor" data-solid-render-id="s5" component-url="/_astro/CartButton.p_je00yF.js" component-export="default" renderer-url="/_astro/client.Ddz0CcHE.js" props="{&quot;whiteHeader&quot;:[0,true]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;CartButton&quot;,&quot;value&quot;:true}" await-children=""><button data-hk="s50000" type="button" aria-label="Open cart" class="relative cursor-pointer"><img src="/cart/cart-icon.svg" alt="Cart Icon" class="normal-color-on-scroll w-[24px] brightness-0 invert"><!--$--><!--/--></button><!--astro:end--></astro-island><!-- App QR --><!-- <DownloadApp whiteHeader={whiteHeader} /> --><!-- Profile --><div class="hidden md:flex items-center"><astro-island uid="Z2oeGUL" data-solid-render-id="s6" component-url="/_astro/AuthToggle.Bb27sOc8.js" component-export="default" renderer-url="/_astro/client.Ddz0CcHE.js" props="{&quot;whiteHeader&quot;:[0,true]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;AuthToggle&quot;,&quot;value&quot;:true}" await-children=""><div data-hk="s60000" class="wf-auth-toggle flex cursor-wait" data-authenticated="false"><div class="flex items-center justify-center relative pointer-events-none"><div class="wf-auth-pill flex items-center gap-[6px] py-[5px] px-[8px] rounded-3xl border-[1.5px]
              false
              border-white/70
            "><img src="/profile/profile-out.svg" alt="Log out" class="wf-auth-icon w-[24px] aspect-square" style="filter: brightness(0) invert(100%)"><img src="/profile/arrow-down.svg" alt="Log out" class="wf-auth-icon w-[16px] aspect-square" style="filter: brightness(0) invert(100%)"></div><!--$--><!--/--></div></div><!--astro:end--></astro-island></div><!-- Mobile menu toggle --><img src="/icons/menu-toggle-black.svg" alt="Open Menu Toggle" class="open-site-menu-click w-[24px] md:w-[30px] cursor-pointer md:hidden invert normal-color-on-scroll"></div></header><div id="site-menu" class="fixed w-full h-full md:h-[58vh] md:min-h-[477px] flex flex-col justify-start bg-[#F6F6F6] z-30 opacity-0 pointer-events-none duration-500 ease-in-out overflow-scroll" data-astro-cid-52d4wjy7> <!-- Header Bar --> <div class="w-full h-headerHeightMobile md:h-headerHeight flex justify-between items-center px-[20px] md:px-[40px] z-20" data-astro-cid-52d4wjy7> <!-- Left Side --> <div class="flex items-center gap-[50px]" data-astro-cid-52d4wjy7> <!-- Logo (Desktop) / AuthToggle (mobile) --> <div data-astro-cid-52d4wjy7> <a href="/" class="hidden md:block" data-astro-cid-52d4wjy7> <img src="/icons/wf26-logo.svg" alt="Wonderfruit Logo" class="w-[100px]" data-astro-cid-52d4wjy7> </a> <div class="w-[25vw] md:hidden" data-astro-cid-52d4wjy7> <astro-island uid="Z27cQ7k" data-solid-render-id="s7" component-url="/_astro/AuthToggle.Bb27sOc8.js" component-export="default" renderer-url="/_astro/client.Ddz0CcHE.js" props="{&quot;data-astro-cid-52d4wjy7&quot;:[0,true]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;AuthToggle&quot;,&quot;value&quot;:true}" await-children=""><div data-hk="s70000" class="wf-auth-toggle flex cursor-wait" data-authenticated="false"><div class="flex items-center justify-center relative pointer-events-none"><div class="wf-auth-pill flex items-center gap-[6px] py-[5px] px-[8px] rounded-3xl border-[1.5px]
              false
              border-customSage
            "><img src="/profile/profile-out.svg" alt="Log out" class="wf-auth-icon w-[24px] aspect-square" style="filter: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(922%) hue-rotate(22deg) brightness(88%) contrast(60%);"><img src="/profile/arrow-down.svg" alt="Log out" class="wf-auth-icon w-[16px] aspect-square" style="filter: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(922%) hue-rotate(22deg) brightness(88%) contrast(60%);"></div><!--$--><!--/--></div></div><!--astro:end--></astro-island> </div> </div> <!-- Menu Categories --> <ul class="hidden md:flex items-center gap-[60px] group" data-astro-cid-52d4wjy7> <li class="change-menu-tab text-[16px] text-customDarkGray font-medium leading-none cursor-pointer opacity-40 sibling-fade
                
              " data-index="0" data-astro-cid-52d4wjy7> Ethos </li><li class="change-menu-tab text-[16px] text-customDarkGray font-medium leading-none cursor-pointer opacity-40 sibling-fade
                
              " data-index="1" data-astro-cid-52d4wjy7> Explore </li><li class="change-menu-tab text-[16px] text-customDarkGray font-medium leading-none cursor-pointer opacity-40 sibling-fade
                
              " data-index="2" data-astro-cid-52d4wjy7> Passes </li><li class="change-menu-tab text-[16px] text-customDarkGray font-medium leading-none cursor-pointer opacity-40 sibling-fade
                
              " data-index="3" data-astro-cid-52d4wjy7> Stay </li><li class="change-menu-tab text-[16px] text-customDarkGray font-medium leading-none cursor-pointer opacity-40 sibling-fade
                
              " data-index="4" data-astro-cid-52d4wjy7> Join </li> </ul> </div> <!-- Menu buttons --> <div class="flex items-stretch gap-[24px]" data-astro-cid-52d4wjy7> <a href="/tickets" class="hidden md:flex items-center gap-[5px] group 
            
          " data-astro-cid-52d4wjy7> <span class="text-[16px] font-medium leading-none uppercase
              tracking-[.48px]
              translate-y-[10%]
            " data-astro-cid-52d4wjy7> Pre-Sale Registration </span> <img src="/icons/link-arrow-new.svg" alt="" class="open-site-menu w-[12px] aspect-square group-hover:rotate-45 transition-transform duration-300 
              " data-index="0" data-astro-cid-52d4wjy7> </a> <!-- Language switcher --> <div class="hidden md:flex items-center justify-center gap-[8px] cursor-pointer relative group" data-astro-cid-52d4wjy7> <img src="/icons/lang-icon.png" alt="Language Icon" class="w-[20px] aspect-square" data-astro-cid-52d4wjy7> <div class="text-[16px] text-customDarkGray font-medium leading-none translate-y-[10%]" data-astro-cid-52d4wjy7> EN </div> <div class="absolute bottom-0 pt-[9px] translate-y-full opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto" data-astro-cid-52d4wjy7> <div class=" flex flex-col bg-white rounded-md overflow-hidden" style="box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);" data-astro-cid-52d4wjy7> <div class="hover:bg-[#EDEDED] transition-colors duration-150" data-astro-cid-52d4wjy7> <a href="/?lang=thai" class="flex justify-between items-center px-[20px] py-[14px] pointer-events-none" data-astro-cid-52d4wjy7> <span class="text-[14px] text-customDarkGray leading-none translate-y-[10%] font-bold" data-astro-cid-52d4wjy7>
English
</span> </a> </div> <div class="hover:bg-[#EDEDED] transition-colors duration-150" data-astro-cid-52d4wjy7> <a href="/?lang=thai" class="flex justify-between items-center px-[20px] py-[14px] " data-astro-cid-52d4wjy7> <span class="text-[14px] text-customDarkGray leading-none translate-y-[10%] font-medium" data-astro-cid-52d4wjy7>
Thai
</span> </a> </div> </div> </div> </div>  <astro-island uid="5KDDT" data-solid-render-id="s8" component-url="/_astro/CartButton.p_je00yF.js" component-export="default" renderer-url="/_astro/client.Ddz0CcHE.js" props="{&quot;data-astro-cid-52d4wjy7&quot;:[0,true]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;CartButton&quot;,&quot;value&quot;:true}" await-children=""><button data-hk="s80000" type="button" aria-label="Open cart" class="relative cursor-pointer"><img src="/cart/cart-icon.svg" alt="Cart Icon" class="normal-color-on-scroll w-[24px] "><!--$--><!--/--></button><!--astro:end--></astro-island> <!-- App QR --> <!-- <DownloadApp /> --> <!-- Profile --> <div class="hidden md:flex items-center" data-astro-cid-52d4wjy7> <astro-island uid="Z2uTaPi" data-solid-render-id="s9" component-url="/_astro/AuthToggle.Bb27sOc8.js" component-export="default" renderer-url="/_astro/client.Ddz0CcHE.js" props="{&quot;data-astro-cid-52d4wjy7&quot;:[0,true]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;AuthToggle&quot;,&quot;value&quot;:true}" await-children=""><div data-hk="s90000" class="wf-auth-toggle flex cursor-wait" data-authenticated="false"><div class="flex items-center justify-center relative pointer-events-none"><div class="wf-auth-pill flex items-center gap-[6px] py-[5px] px-[8px] rounded-3xl border-[1.5px]
              false
              border-customSage
            "><img src="/profile/profile-out.svg" alt="Log out" class="wf-auth-icon w-[24px] aspect-square" style="filter: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(922%) hue-rotate(22deg) brightness(88%) contrast(60%);"><img src="/profile/arrow-down.svg" alt="Log out" class="wf-auth-icon w-[16px] aspect-square" style="filter: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(922%) hue-rotate(22deg) brightness(88%) contrast(60%);"></div><!--$--><!--/--></div></div><!--astro:end--></astro-island> </div> <!-- Menu Toggle --> <img class="close-site-menu w-[24px] md:w-[30px] cursor-pointer md:hidden" src="/icons/menu-exit.svg" alt="Close Menu Toggle" data-astro-cid-52d4wjy7> </div> </div> <!-- Content – Desktop --> <div class="flex-grow py-[30px] px-[40px] hidden md:block" data-astro-cid-52d4wjy7> <div class="menu-tab w-full h-full gap-[40px] transition-opacity duration-300 hidden" data-astro-cid-52d4wjy7>  <div class="flex-grow h-full flex gap-[16px] group" data-astro-cid-52d4wjy7> <div class="flex-1 flex flex-col gap-[16px]" data-astro-cid-52d4wjy7> <a href="/expressions" class="flex-1 w-full h-full flex flex-col justify-end p-[20px] rounded-md overflow-hidden relative sibling-gray
                          bg-customGreenMatcha" data-astro-cid-52d4wjy7>  <img src="https://images.wonderfruit.co/f/322576/598x634/c56c7e90f4/expressions.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-center " data-astro-cid-52d4wjy7> <div class="flex justify-between relative" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[11px]
                        text-white 
                        text-customDarkGray
                      " data-astro-cid-52d4wjy7> <div class="text-[20px] font-medium leading-none " data-astro-cid-52d4wjy7>Expressions</div> <div class="text-[16px] font-medium leading-[120%] " data-astro-cid-52d4wjy7>Living works and experiments</div> </div>  <img src="/icons/link-arrow-new.svg" alt="" class="w-[11px] h-fit aspect-square rotate-45 invert " data-astro-cid-52d4wjy7> </div> </a> </div><div class="flex-1 flex flex-col gap-[16px]" data-astro-cid-52d4wjy7> <a href="/manifesto" class="flex-1 w-full h-full flex flex-col justify-end p-[20px] rounded-md overflow-hidden relative sibling-gray
                          bg-customGreenMatcha" data-astro-cid-52d4wjy7>  <img src="https://images.wonderfruit.co/f/322576/531x564/d74a215dcf/manifesto.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-center " data-astro-cid-52d4wjy7> <div class="flex justify-between relative" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[11px]
                        text-white 
                        text-customDarkGray
                      " data-astro-cid-52d4wjy7> <div class="text-[20px] font-medium leading-none " data-astro-cid-52d4wjy7>Our Manifesto</div> <div class="text-[16px] font-medium leading-[120%] " data-astro-cid-52d4wjy7>Words that guide us</div> </div>  <img src="/icons/link-arrow-new.svg" alt="" class="w-[11px] h-fit aspect-square rotate-45 invert " data-astro-cid-52d4wjy7> </div> </a> </div><div class="flex-1 flex flex-col gap-[16px]" data-astro-cid-52d4wjy7> <a href="/wonder-report" class="flex-1 w-full h-full flex flex-col justify-end p-[20px] rounded-md overflow-hidden relative sibling-gray
                          bg-customGreenMatcha" data-astro-cid-52d4wjy7>  <img src="https://images.wonderfruit.co/f/322576/684x476/0e44ec8ac2/menu-wonder-report.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-center " data-astro-cid-52d4wjy7> <div class="flex justify-between relative" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[11px]
                        text-white 
                        text-customDarkGray
                      " data-astro-cid-52d4wjy7> <div class="text-[20px] font-medium leading-none " data-astro-cid-52d4wjy7>Wonder Report 2025</div> <div class="text-[16px] font-medium leading-[120%] " data-astro-cid-52d4wjy7>An annual reflection</div> </div>  <img src="/icons/link-arrow-new.svg" alt="" class="w-[11px] h-fit aspect-square rotate-45 invert " data-astro-cid-52d4wjy7> </div> </a><a href="/decade-of-wonder" class="flex-1 w-full h-full flex flex-col justify-end p-[20px] rounded-md overflow-hidden relative sibling-gray
                          bg-customGreenMatcha" data-astro-cid-52d4wjy7>  <img src="https://images.wonderfruit.co/f/322576/684x476/df564c51df/menu-decade.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-center " data-astro-cid-52d4wjy7> <div class="flex justify-between relative" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[11px]
                        text-white 
                        text-customDarkGray
                      " data-astro-cid-52d4wjy7> <div class="text-[20px] font-medium leading-none " data-astro-cid-52d4wjy7>Decade of Wonder</div> <div class="text-[16px] font-medium leading-[120%] " data-astro-cid-52d4wjy7>Our 10-year journey</div> </div>  <img src="/icons/link-arrow-new.svg" alt="" class="w-[11px] h-fit aspect-square rotate-45 invert " data-astro-cid-52d4wjy7> </div> </a> </div> </div> <div class="w-[385px] flex flex-col justify-between mr-[40px]" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[20px] group" data-astro-cid-52d4wjy7>  <div class="text-[20px] font-medium leading-none" data-astro-cid-52d4wjy7>Wonderposts</div> <a href="/wonderpost/the-act-of-offering-a-conversation-with-harry-einhorn" class="text-[16px] font-medium sibling-gray-wp" data-astro-cid-52d4wjy7> <h4 class="text-customDarkGray whitespace-nowrap" data-astro-cid-52d4wjy7>The Act of Offering - A Conversation with Harry Ei...</h4> <div class="text-[#8F9091]" data-astro-cid-52d4wjy7>Tuesday, 12 May 2026</div> </a><a href="/wonderpost/keeping-our-connection-to-wonder" class="text-[16px] font-medium sibling-gray-wp" data-astro-cid-52d4wjy7> <h4 class="text-customDarkGray whitespace-nowrap" data-astro-cid-52d4wjy7>Keeping our connection to wonder</h4> <div class="text-[#8F9091]" data-astro-cid-52d4wjy7>Friday, 27 March 2026</div> </a> </div>  <div class="flex justify-center md:justify-start items-center gap-[40px] md:gap-[20px]" data-astro-cid-52d4wjy7> <a href="https://www.instagram.com/wonderfruit" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[23px] opacity-40" id="social-icon" src="/icons/social-instagram-white.svg" alt="Instagram Icon" data-astro-cid-52d4wjy7> </a> <a href="https://www.facebook.com/wonderfruitfest" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[23px] opacity-40" id="social-icon" src="/icons/social-facebook-white.svg" alt="Facebook Icon" data-astro-cid-52d4wjy7> </a> <a href="https://www.youtube.com/channel/UCWpxHOXQC_-KahRrA3ESIfw/feed" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[26.5px] opacity-40" id="social-icon" src="/icons/social-youtube-white.svg" alt="Youtube Icon" data-astro-cid-52d4wjy7> </a> <a href="https://soundcloud.com/wonderfruitfestival" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[25.9px] opacity-40" id="social-icon" src="/icons/social-soundcloud-white.png" alt="Soundcloud Icon" data-astro-cid-52d4wjy7> </a> </div> </div> </div><div class="menu-tab w-full h-full gap-[40px] transition-opacity duration-300 hidden" data-astro-cid-52d4wjy7>  <div class="flex-grow h-full flex gap-[16px] group" data-astro-cid-52d4wjy7> <div class="flex-1 flex flex-col gap-[16px]" data-astro-cid-52d4wjy7> <a href="/gallery" class="flex-1 w-full h-full flex flex-col justify-end p-[20px] rounded-md overflow-hidden relative sibling-gray
                          bg-customGreenMatcha" data-astro-cid-52d4wjy7>  <img src="https://images.wonderfruit.co/f/322576/635x673/e8bb296c59/gallery.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-center " data-astro-cid-52d4wjy7> <div class="flex justify-between relative" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[11px]
                        text-white 
                        text-customDarkGray
                      " data-astro-cid-52d4wjy7> <div class="text-[20px] font-medium leading-none " data-astro-cid-52d4wjy7>Gallery</div> <div class="text-[16px] font-medium leading-[120%] " data-astro-cid-52d4wjy7>Memories from The Fields</div> </div>  <img src="/icons/link-arrow-new.svg" alt="" class="w-[11px] h-fit aspect-square rotate-45 invert " data-astro-cid-52d4wjy7> </div> </a> </div><div class="flex-1 flex flex-col gap-[16px]" data-astro-cid-52d4wjy7> <a href="/wonderpost" class="flex-1 w-full h-full flex flex-col justify-end p-[20px] rounded-md overflow-hidden relative sibling-gray
                          bg-customGreenMatcha" data-astro-cid-52d4wjy7>   <div class="flex justify-between relative" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[11px]
                         
                        text-customDarkGray
                      " data-astro-cid-52d4wjy7> <div class="text-[20px] font-medium leading-none " data-astro-cid-52d4wjy7>Wonderpost</div> <div class="text-[16px] font-medium leading-[120%] " data-astro-cid-52d4wjy7>Stories and updates</div> </div>  <img src="/icons/link-arrow-new.svg" alt="" class="w-[11px] h-fit aspect-square rotate-45  " data-astro-cid-52d4wjy7> </div> </a><a href="/thepineappleeyes" class="flex-1 w-full h-full flex flex-col justify-end p-[20px] rounded-md overflow-hidden relative sibling-gray
                          bg-customGreenMatcha" data-astro-cid-52d4wjy7>   <div class="flex justify-between relative" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[11px]
                         
                        text-customDarkGray
                      " data-astro-cid-52d4wjy7> <div class="text-[20px] font-medium leading-none " data-astro-cid-52d4wjy7>The Pineapple Eyes</div> <div class="text-[16px] font-medium leading-[120%] " data-astro-cid-52d4wjy7>A close community of Wonderers</div> </div>  <img src="/icons/link-arrow-new.svg" alt="" class="w-[11px] h-fit aspect-square rotate-45  " data-astro-cid-52d4wjy7> </div> </a> </div><div class="flex-1 flex flex-col gap-[16px]" data-astro-cid-52d4wjy7> <a href="/venues" class="flex-1 w-full h-full flex flex-col justify-end p-[20px] rounded-md overflow-hidden relative sibling-gray
                          bg-customGreenMatcha" data-astro-cid-52d4wjy7>   <div class="flex justify-between relative" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[11px]
                         
                        text-customDarkGray
                      " data-astro-cid-52d4wjy7> <div class="text-[20px] font-medium leading-none " data-astro-cid-52d4wjy7>Venues</div> <div class="text-[16px] font-medium leading-[120%] " data-astro-cid-52d4wjy7>Spaces for human expressions</div> </div>  <img src="/icons/link-arrow-new.svg" alt="" class="w-[11px] h-fit aspect-square rotate-45  " data-astro-cid-52d4wjy7> </div> </a><a href="/collaborations" class="flex-1 w-full h-full flex flex-col justify-end p-[20px] rounded-md overflow-hidden relative sibling-gray
                          bg-customGreenMatcha" data-astro-cid-52d4wjy7>   <div class="flex justify-between relative" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[11px]
                         
                        text-customDarkGray
                      " data-astro-cid-52d4wjy7> <div class="text-[20px] font-medium leading-none " data-astro-cid-52d4wjy7>Collaborations</div> <div class="text-[16px] font-medium leading-[120%] " data-astro-cid-52d4wjy7>Limited-edition pieces</div> </div>  <img src="/icons/link-arrow-new.svg" alt="" class="w-[11px] h-fit aspect-square rotate-45  " data-astro-cid-52d4wjy7> </div> </a> </div> </div> <div class="w-[385px] flex flex-col justify-between mr-[40px]" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[20px] group" data-astro-cid-52d4wjy7>  </div>  <div class="flex justify-center md:justify-start items-center gap-[40px] md:gap-[20px]" data-astro-cid-52d4wjy7> <a href="https://www.instagram.com/wonderfruit" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[23px] opacity-40" id="social-icon" src="/icons/social-instagram-white.svg" alt="Instagram Icon" data-astro-cid-52d4wjy7> </a> <a href="https://www.facebook.com/wonderfruitfest" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[23px] opacity-40" id="social-icon" src="/icons/social-facebook-white.svg" alt="Facebook Icon" data-astro-cid-52d4wjy7> </a> <a href="https://www.youtube.com/channel/UCWpxHOXQC_-KahRrA3ESIfw/feed" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[26.5px] opacity-40" id="social-icon" src="/icons/social-youtube-white.svg" alt="Youtube Icon" data-astro-cid-52d4wjy7> </a> <a href="https://soundcloud.com/wonderfruitfestival" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[25.9px] opacity-40" id="social-icon" src="/icons/social-soundcloud-white.png" alt="Soundcloud Icon" data-astro-cid-52d4wjy7> </a> </div> </div> </div><div class="menu-tab w-full h-full gap-[40px] transition-opacity duration-300 hidden" data-astro-cid-52d4wjy7>  <div class="flex-grow h-full flex gap-[16px] group" data-astro-cid-52d4wjy7> <div class="flex-1 flex flex-col gap-[16px]" data-astro-cid-52d4wjy7> <a href="/tickets" class="flex-1 w-full h-full flex flex-col justify-end p-[20px] rounded-md overflow-hidden relative sibling-gray
                          bg-customGreenMatcha" data-astro-cid-52d4wjy7>  <img src="https://images.wonderfruit.co/f/322576/929x317/60a144a450/tickets.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-center " data-astro-cid-52d4wjy7> <div class="flex justify-between relative" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[11px]
                        text-white 
                        text-customDarkGray
                      " data-astro-cid-52d4wjy7> <div class="text-[20px] font-medium leading-none " data-astro-cid-52d4wjy7>Tickets</div> <div class="text-[16px] font-medium leading-[120%] " data-astro-cid-52d4wjy7>Wonderfruit 2026</div> </div>  <img src="/icons/link-arrow-new.svg" alt="" class="w-[11px] h-fit aspect-square rotate-45 invert " data-astro-cid-52d4wjy7> </div> </a> </div> </div> <div class="w-[385px] flex flex-col justify-between mr-[40px]" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[20px] group" data-astro-cid-52d4wjy7>  </div>  <div class="flex justify-center md:justify-start items-center gap-[40px] md:gap-[20px]" data-astro-cid-52d4wjy7> <a href="https://www.instagram.com/wonderfruit" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[23px] opacity-40" id="social-icon" src="/icons/social-instagram-white.svg" alt="Instagram Icon" data-astro-cid-52d4wjy7> </a> <a href="https://www.facebook.com/wonderfruitfest" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[23px] opacity-40" id="social-icon" src="/icons/social-facebook-white.svg" alt="Facebook Icon" data-astro-cid-52d4wjy7> </a> <a href="https://www.youtube.com/channel/UCWpxHOXQC_-KahRrA3ESIfw/feed" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[26.5px] opacity-40" id="social-icon" src="/icons/social-youtube-white.svg" alt="Youtube Icon" data-astro-cid-52d4wjy7> </a> <a href="https://soundcloud.com/wonderfruitfestival" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[25.9px] opacity-40" id="social-icon" src="/icons/social-soundcloud-white.png" alt="Soundcloud Icon" data-astro-cid-52d4wjy7> </a> </div> </div> </div><div class="menu-tab w-full h-full gap-[40px] transition-opacity duration-300 hidden" data-astro-cid-52d4wjy7>  <div class="flex-grow h-full flex gap-[16px] group" data-astro-cid-52d4wjy7> <div class="flex-1 flex flex-col gap-[16px]" data-astro-cid-52d4wjy7> <a href="/slow-wonder" class="flex-1 w-full h-full flex flex-col justify-end p-[20px] rounded-md overflow-hidden relative sibling-gray
                          bg-customGreenMatcha" data-astro-cid-52d4wjy7>  <img src="https://images.wonderfruit.co/f/322576/449x476/c587dfab63/menu-slow-wonder.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-center " data-astro-cid-52d4wjy7> <div class="flex justify-between relative" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[11px]
                        text-white 
                        text-customDarkGray
                      " data-astro-cid-52d4wjy7> <div class="text-[20px] font-medium leading-none " data-astro-cid-52d4wjy7>Slow Wonder</div> <div class="text-[16px] font-medium leading-[120%] " data-astro-cid-52d4wjy7>Refined stillness in The Fields</div> </div>  <img src="/icons/link-arrow-new.svg" alt="" class="w-[11px] h-fit aspect-square rotate-45 invert " data-astro-cid-52d4wjy7> </div> </a> </div><div class="flex-1 flex flex-col gap-[16px]" data-astro-cid-52d4wjy7> <a href="/boutique-camping" class="flex-1 w-full h-full flex flex-col justify-end p-[20px] rounded-md overflow-hidden relative sibling-gray
                          bg-customGreenMatcha" data-astro-cid-52d4wjy7>  <img src="https://images.wonderfruit.co/f/322576/533x565/eb1feeee7e/stay.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-center " data-astro-cid-52d4wjy7> <div class="flex justify-between relative" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[11px]
                        text-white 
                        text-customDarkGray
                      " data-astro-cid-52d4wjy7> <div class="text-[20px] font-medium leading-none " data-astro-cid-52d4wjy7>Boutique Camping</div> <div class="text-[16px] font-medium leading-[120%] " data-astro-cid-52d4wjy7>Convenience and comfort</div> </div>  <img src="/icons/link-arrow-new.svg" alt="" class="w-[11px] h-fit aspect-square rotate-45 invert " data-astro-cid-52d4wjy7> </div> </a> </div><div class="flex-1 flex flex-col gap-[16px]" data-astro-cid-52d4wjy7> <a href="/general-camping" class="flex-1 w-full h-full flex flex-col justify-end p-[20px] rounded-md overflow-hidden relative sibling-gray
                          bg-customGreenMatcha" data-astro-cid-52d4wjy7>  <img src="https://images.wonderfruit.co/f/322576/1890x1208/956f8918fa/general-camping.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-center " data-astro-cid-52d4wjy7> <div class="flex justify-between relative" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[11px]
                        text-white 
                        text-customDarkGray
                      " data-astro-cid-52d4wjy7> <div class="text-[20px] font-medium leading-none " data-astro-cid-52d4wjy7>General Camping</div> <div class="text-[16px] font-medium leading-[120%] " data-astro-cid-52d4wjy7>Bring your own tent</div> </div>  <img src="/icons/link-arrow-new.svg" alt="" class="w-[11px] h-fit aspect-square rotate-45 invert " data-astro-cid-52d4wjy7> </div> </a> </div> </div> <div class="w-[385px] flex flex-col justify-between mr-[40px]" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[20px] group" data-astro-cid-52d4wjy7>  </div>  <div class="flex justify-center md:justify-start items-center gap-[40px] md:gap-[20px]" data-astro-cid-52d4wjy7> <a href="https://www.instagram.com/wonderfruit" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[23px] opacity-40" id="social-icon" src="/icons/social-instagram-white.svg" alt="Instagram Icon" data-astro-cid-52d4wjy7> </a> <a href="https://www.facebook.com/wonderfruitfest" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[23px] opacity-40" id="social-icon" src="/icons/social-facebook-white.svg" alt="Facebook Icon" data-astro-cid-52d4wjy7> </a> <a href="https://www.youtube.com/channel/UCWpxHOXQC_-KahRrA3ESIfw/feed" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[26.5px] opacity-40" id="social-icon" src="/icons/social-youtube-white.svg" alt="Youtube Icon" data-astro-cid-52d4wjy7> </a> <a href="https://soundcloud.com/wonderfruitfestival" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[25.9px] opacity-40" id="social-icon" src="/icons/social-soundcloud-white.png" alt="Soundcloud Icon" data-astro-cid-52d4wjy7> </a> </div> </div> </div><div class="menu-tab w-full h-full gap-[40px] transition-opacity duration-300 hidden" data-astro-cid-52d4wjy7>  <div class="flex-grow h-full flex gap-[16px] group" data-astro-cid-52d4wjy7> <div class="flex-1 flex flex-col gap-[16px]" data-astro-cid-52d4wjy7> <a href="/participation" class="flex-1 w-full h-full flex flex-col justify-end p-[20px] rounded-md overflow-hidden relative sibling-gray
                          bg-customGreenMatcha" data-astro-cid-52d4wjy7>  <img src="https://images.wonderfruit.co/f/322576/813x565/8f5dcbcec1/participation.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-center " data-astro-cid-52d4wjy7> <div class="flex justify-between relative" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[11px]
                        text-white 
                        text-customDarkGray
                      " data-astro-cid-52d4wjy7> <div class="text-[20px] font-medium leading-none " data-astro-cid-52d4wjy7>Participation</div> <div class="text-[16px] font-medium leading-[120%] " data-astro-cid-52d4wjy7>Be a part of Wonderfruit 2026</div> </div>  <img src="/icons/link-arrow-new.svg" alt="" class="w-[11px] h-fit aspect-square rotate-45 invert " data-astro-cid-52d4wjy7> </div> </a> </div><div class="flex-1 flex flex-col gap-[16px]" data-astro-cid-52d4wjy7> <a href="https://scratchfirst.co/careers" target="_blank" class="flex-1 w-full h-full flex flex-col justify-end p-[20px] rounded-md overflow-hidden relative sibling-gray
                          bg-customGreenMatcha" data-astro-cid-52d4wjy7>   <div class="flex justify-between relative" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[11px]
                         
                        text-customDarkGray
                      " data-astro-cid-52d4wjy7> <div class="text-[20px] font-medium leading-none " data-astro-cid-52d4wjy7>Careers</div> <div class="text-[16px] font-medium leading-[120%] " data-astro-cid-52d4wjy7>Join Team Wonderfruit</div> </div>  <img src="/icons/link-arrow-new.svg" alt="" class="w-[11px] h-fit aspect-square rotate-45  " data-astro-cid-52d4wjy7> </div> </a> </div> </div> <div class="w-[385px] flex flex-col justify-between mr-[40px]" data-astro-cid-52d4wjy7>  <div class="flex flex-col gap-[20px] group" data-astro-cid-52d4wjy7>  </div>  <div class="flex justify-center md:justify-start items-center gap-[40px] md:gap-[20px]" data-astro-cid-52d4wjy7> <a href="https://www.instagram.com/wonderfruit" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[23px] opacity-40" id="social-icon" src="/icons/social-instagram-white.svg" alt="Instagram Icon" data-astro-cid-52d4wjy7> </a> <a href="https://www.facebook.com/wonderfruitfest" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[23px] opacity-40" id="social-icon" src="/icons/social-facebook-white.svg" alt="Facebook Icon" data-astro-cid-52d4wjy7> </a> <a href="https://www.youtube.com/channel/UCWpxHOXQC_-KahRrA3ESIfw/feed" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[26.5px] opacity-40" id="social-icon" src="/icons/social-youtube-white.svg" alt="Youtube Icon" data-astro-cid-52d4wjy7> </a> <a href="https://soundcloud.com/wonderfruitfestival" target="_blank" data-astro-cid-52d4wjy7> <img class="social-color w-[25.9px] opacity-40" id="social-icon" src="/icons/social-soundcloud-white.png" alt="Soundcloud Icon" data-astro-cid-52d4wjy7> </a> </div> </div> </div> </div> <!-- Content – Mobile --> <div class="flex-grow flex flex-col justify-between gap-[30px] p-[24px] md:hidden" data-astro-cid-52d4wjy7> <div class="flex flex-col gap-[40px]" data-astro-cid-52d4wjy7> <div class="mobile-menu-item" data-astro-cid-52d4wjy7>  <div class="mobile-menu-cat w-full flex items-center justify-between" data-astro-cid-52d4wjy7> <div class="text-[24px] text-customDarkGray font-medium leading-none
                translate-y-[10%]
              " data-astro-cid-52d4wjy7> Ethos </div> <img src="/icons/chevron-down.svg" alt="Ethos" class="w-[17px] h-[8px] invert" data-astro-cid-52d4wjy7> </div>  <ul class="mobile-menu-links flex flex-col gap-[16px] pl-[20px] overflow-hidden transition-all duration-300" style="height:0px" data-astro-cid-52d4wjy7> <li class="" data-astro-cid-52d4wjy7> <a href="/expressions" data-astro-cid-52d4wjy7> <h4 class="text-[16px] font-medium text-customDarkGray whitespace-nowrap " data-astro-cid-52d4wjy7>Expressions</h4> <div class="text-[14px] text-[#8F9091] " data-astro-cid-52d4wjy7>Living works and experiments</div> </a> </li><li class="" data-astro-cid-52d4wjy7> <a href="/manifesto" data-astro-cid-52d4wjy7> <h4 class="text-[16px] font-medium text-customDarkGray whitespace-nowrap " data-astro-cid-52d4wjy7>Our Manifesto</h4> <div class="text-[14px] text-[#8F9091] " data-astro-cid-52d4wjy7>Words that guide us</div> </a> </li><li class="" data-astro-cid-52d4wjy7> <a href="/wonder-report" data-astro-cid-52d4wjy7> <h4 class="text-[16px] font-medium text-customDarkGray whitespace-nowrap " data-astro-cid-52d4wjy7>Wonder Report 2025</h4> <div class="text-[14px] text-[#8F9091] " data-astro-cid-52d4wjy7>An annual reflection</div> </a> </li><li class="" data-astro-cid-52d4wjy7> <a href="/decade-of-wonder" data-astro-cid-52d4wjy7> <h4 class="text-[16px] font-medium text-customDarkGray whitespace-nowrap " data-astro-cid-52d4wjy7>Decade of Wonder</h4> <div class="text-[14px] text-[#8F9091] " data-astro-cid-52d4wjy7>Our 10-year journey</div> </a> </li> </ul> </div><div class="mobile-menu-item" data-astro-cid-52d4wjy7>  <div class="mobile-menu-cat w-full flex items-center justify-between" data-astro-cid-52d4wjy7> <div class="text-[24px] text-customDarkGray font-medium leading-none
                translate-y-[10%]
              " data-astro-cid-52d4wjy7> Explore </div> <img src="/icons/chevron-down.svg" alt="Explore" class="w-[17px] h-[8px] invert" data-astro-cid-52d4wjy7> </div>  <ul class="mobile-menu-links flex flex-col gap-[16px] pl-[20px] overflow-hidden transition-all duration-300" style="height:0px" data-astro-cid-52d4wjy7> <li class="" data-astro-cid-52d4wjy7> <a href="/gallery" data-astro-cid-52d4wjy7> <h4 class="text-[16px] font-medium text-customDarkGray whitespace-nowrap " data-astro-cid-52d4wjy7>Gallery</h4> <div class="text-[14px] text-[#8F9091] " data-astro-cid-52d4wjy7>Memories from The Fields</div> </a> </li><li class="" data-astro-cid-52d4wjy7> <a href="/wonderpost" data-astro-cid-52d4wjy7> <h4 class="text-[16px] font-medium text-customDarkGray whitespace-nowrap " data-astro-cid-52d4wjy7>Wonderpost</h4> <div class="text-[14px] text-[#8F9091] " data-astro-cid-52d4wjy7>Stories and updates</div> </a> </li><li class="" data-astro-cid-52d4wjy7> <a href="/thepineappleeyes" data-astro-cid-52d4wjy7> <h4 class="text-[16px] font-medium text-customDarkGray whitespace-nowrap " data-astro-cid-52d4wjy7>The Pineapple Eyes</h4> <div class="text-[14px] text-[#8F9091] " data-astro-cid-52d4wjy7>A close community of Wonderers</div> </a> </li><li class="" data-astro-cid-52d4wjy7> <a href="/venues" data-astro-cid-52d4wjy7> <h4 class="text-[16px] font-medium text-customDarkGray whitespace-nowrap " data-astro-cid-52d4wjy7>Venues</h4> <div class="text-[14px] text-[#8F9091] " data-astro-cid-52d4wjy7>Spaces for human expressions</div> </a> </li><li class="" data-astro-cid-52d4wjy7> <a href="/collaborations" data-astro-cid-52d4wjy7> <h4 class="text-[16px] font-medium text-customDarkGray whitespace-nowrap " data-astro-cid-52d4wjy7>Collaborations</h4> <div class="text-[14px] text-[#8F9091] " data-astro-cid-52d4wjy7>Limited-edition pieces</div> </a> </li> </ul> </div><div class="mobile-menu-item" data-astro-cid-52d4wjy7>  <div class="mobile-menu-cat w-full flex items-center justify-between" data-astro-cid-52d4wjy7> <div class="text-[24px] text-customDarkGray font-medium leading-none
                translate-y-[10%]
              " data-astro-cid-52d4wjy7> Passes </div> <img src="/icons/chevron-down.svg" alt="Passes" class="w-[17px] h-[8px] invert" data-astro-cid-52d4wjy7> </div>  <ul class="mobile-menu-links flex flex-col gap-[16px] pl-[20px] overflow-hidden transition-all duration-300" style="height:0px" data-astro-cid-52d4wjy7> <li class="" data-astro-cid-52d4wjy7> <a href="/tickets" data-astro-cid-52d4wjy7> <h4 class="text-[16px] font-medium text-customDarkGray whitespace-nowrap " data-astro-cid-52d4wjy7>Tickets</h4> <div class="text-[14px] text-[#8F9091] " data-astro-cid-52d4wjy7>Wonderfruit 2026</div> </a> </li> </ul> </div><div class="mobile-menu-item" data-astro-cid-52d4wjy7>  <div class="mobile-menu-cat w-full flex items-center justify-between" data-astro-cid-52d4wjy7> <div class="text-[24px] text-customDarkGray font-medium leading-none
                translate-y-[10%]
              " data-astro-cid-52d4wjy7> Stay </div> <img src="/icons/chevron-down.svg" alt="Stay" class="w-[17px] h-[8px] invert" data-astro-cid-52d4wjy7> </div>  <ul class="mobile-menu-links flex flex-col gap-[16px] pl-[20px] overflow-hidden transition-all duration-300" style="height:0px" data-astro-cid-52d4wjy7> <li class="" data-astro-cid-52d4wjy7> <a href="/slow-wonder" data-astro-cid-52d4wjy7> <h4 class="text-[16px] font-medium text-customDarkGray whitespace-nowrap " data-astro-cid-52d4wjy7>Slow Wonder</h4> <div class="text-[14px] text-[#8F9091] " data-astro-cid-52d4wjy7>Refined stillness in The Fields</div> </a> </li><li class="" data-astro-cid-52d4wjy7> <a href="/boutique-camping" data-astro-cid-52d4wjy7> <h4 class="text-[16px] font-medium text-customDarkGray whitespace-nowrap " data-astro-cid-52d4wjy7>Boutique Camping</h4> <div class="text-[14px] text-[#8F9091] " data-astro-cid-52d4wjy7>Convenience and comfort</div> </a> </li><li class="" data-astro-cid-52d4wjy7> <a href="/general-camping" data-astro-cid-52d4wjy7> <h4 class="text-[16px] font-medium text-customDarkGray whitespace-nowrap " data-astro-cid-52d4wjy7>General Camping</h4> <div class="text-[14px] text-[#8F9091] " data-astro-cid-52d4wjy7>Bring your own tent</div> </a> </li> </ul> </div><div class="mobile-menu-item" data-astro-cid-52d4wjy7>  <div class="mobile-menu-cat w-full flex items-center justify-between" data-astro-cid-52d4wjy7> <div class="text-[24px] text-customDarkGray font-medium leading-none
                translate-y-[10%]
              " data-astro-cid-52d4wjy7> Join </div> <img src="/icons/chevron-down.svg" alt="Join" class="w-[17px] h-[8px] invert" data-astro-cid-52d4wjy7> </div>  <ul class="mobile-menu-links flex flex-col gap-[16px] pl-[20px] overflow-hidden transition-all duration-300" style="height:0px" data-astro-cid-52d4wjy7> <li class="" data-astro-cid-52d4wjy7> <a href="/participation" data-astro-cid-52d4wjy7> <h4 class="text-[16px] font-medium text-customDarkGray whitespace-nowrap " data-astro-cid-52d4wjy7>Participation</h4> <div class="text-[14px] text-[#8F9091] " data-astro-cid-52d4wjy7>Be a part of Wonderfruit 2026</div> </a> </li><li class="" data-astro-cid-52d4wjy7> <a href="https://scratchfirst.co/careers" target="_blank" data-astro-cid-52d4wjy7> <h4 class="text-[16px] font-medium text-customDarkGray whitespace-nowrap " data-astro-cid-52d4wjy7>Careers</h4> <div class="text-[14px] text-[#8F9091] " data-astro-cid-52d4wjy7>Join Team Wonderfruit</div> </a> </li> </ul> </div> </div> <!-- Mobile bottom --> <div class="flex items-center justify-between gap-[40px]" data-astro-cid-52d4wjy7> <!-- Language switcher --> <div class="flex items-center justify-center gap-[8px] cursor-pointer relative group" data-astro-cid-52d4wjy7> <img src="/icons/lang-icon.png" alt="Language Icon" class="w-[24px] aspect-square" data-astro-cid-52d4wjy7> <div class="text-[14px] text-customDarkGray font-medium leading-none translate-y-[10%]" data-astro-cid-52d4wjy7> EN </div> <div class="w-[83px] absolute -translate-y-full flex flex-col bg-white rounded-md overflow-hidden 
            opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto" style="box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);" data-astro-cid-52d4wjy7> <div class="hover:bg-[#EDEDED] transition-colors duration-150" data-astro-cid-52d4wjy7> <a href="/?lang=thai" class="flex justify-between items-center px-[10px] p-[5px] pointer-events-none" data-astro-cid-52d4wjy7> <span class="text-[14px] text-customPaleGray font-medium leading-none translate-y-[10%]" data-astro-cid-52d4wjy7>EN</span> <div class="w-[5px] aspect-square rounded-full bg-customMatcha" data-astro-cid-52d4wjy7></div> </a> </div> <div class="hover:bg-[#EDEDED] transition-colors duration-150" data-astro-cid-52d4wjy7> <a href="/?lang=thai" class="flex justify-between items-center px-[10px] p-[5px] " data-astro-cid-52d4wjy7> <span class="text-[14px] text-customPaleGray font-medium leading-none translate-y-[10%]" data-astro-cid-52d4wjy7>TH</span>  </a> </div> </div> </div> <!-- Social logos --> <div class="flex justify-center items-center gap-[20px]" data-astro-cid-52d4wjy7> <a href="https://www.instagram.com/wonderfruit" target="_blank" data-astro-cid-52d4wjy7> <img class="w-[23px]" id="social-icon" src="/icons/social-instagram-white.svg" alt="Instagram Icon" data-astro-cid-52d4wjy7> </a> <a href="https://www.facebook.com/wonderfruitfest" target="_blank" data-astro-cid-52d4wjy7> <img class="w-[23px]" id="social-icon" src="/icons/social-facebook-white.svg" alt="Facebook Icon" data-astro-cid-52d4wjy7> </a> <a href="https://www.youtube.com/channel/UCWpxHOXQC_-KahRrA3ESIfw/feed" target="_blank" data-astro-cid-52d4wjy7> <img class="w-[26.5px]" id="social-icon" src="/icons/social-youtube-white.svg" alt="Youtube Icon" data-astro-cid-52d4wjy7> </a> <a href="https://soundcloud.com/wonderfruitfestival" target="_blank" data-astro-cid-52d4wjy7> <img class="w-[25.9px]" id="social-icon" src="/icons/social-soundcloud-white.png" alt="Soundcloud Icon" data-astro-cid-52d4wjy7> </a> </div> </div> </div> </div>  <!-- Show/Hide the menu tabs -->  <script>
  document.addEventListener('astro:after-swap', initCountdownScroll);
  document.addEventListener('DOMContentLoaded', initCountdownScroll);

  function initCountdownScroll() {
    document.querySelectorAll('.mobile-menu-cat').forEach(button => {
      button.addEventListener('click', function(event) {
        const eventSource = event.currentTarget;
        const accordionItem = eventSource?.closest('.mobile-menu-item');
        const accordionAnswer = eventSource?.nextElementSibling;
  
        // Check if the accordion item is already open
        const isOpen =  accordionAnswer?.style.height !== '0px';
  
        // Toggle the current item
        if (!isOpen) {
          // Measure the natural height of the content
          accordionAnswer.style.height = 'auto';
          const height = accordionAnswer.scrollHeight + 'px';
          
          // Reset the height and allow the CSS transition to animate it open
          accordionAnswer.style.height = '0px';
          setTimeout(() => {
              accordionAnswer.style.height = height
          }, 10);
          accordionItem.classList.add('active-accordion');
        } else {
          accordionAnswer.style.height = '0px';
          accordionItem.classList.remove('active-accordion');
        }
      });
    });
  }
</script><style>
  .sticky-effect {
    background-color: rgba(256, 256, 256, 0.5);
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .site-header {
    transition: all 0.2s ease-out;
  }

  /* Disable whiteHeader visuals when header is sticky */
  .site-header.white-header.sticky-effect .normal-color-on-scroll,
  .site-header.white-header.sticky-effect a.wf-header-btn .wf-header-btn-arrow {
    filter: none !important;
  }

  .site-header.white-header.sticky-effect .open-site-menu,
  .site-header.white-header.sticky-effect .wf-header-lang-label,
  .site-header.white-header.sticky-effect a.wf-header-btn[data-has-bg="false"] .wf-header-btn-text {
    color: #383838 !important; /* customDarkGray */
  }

  @media (min-width: 768px) {
    .site-header.white-header.sticky-effect a.wf-header-btn[data-has-bg="true"] {
      background-color: #A2A285 !important; /* customSage */
      border-width: 0 !important;
      border-color: transparent !important;
    }

    .site-header.white-header.sticky-effect a.wf-header-btn[data-has-bg="true"] .wf-header-btn-arrow {
      filter: invert(1) !important;
    }
  }

  .site-header.white-header.sticky-effect .wf-auth-pill {
    border-color: #A2A285 !important; /* customSage */
  }

  .site-header.white-header.sticky-effect .wf-auth-toggle[data-authenticated="true"] .wf-auth-pill {
    background-color: rgba(162, 162, 133, 0.9) !important; /* customSage/90 */
  }

  .site-header.white-header.sticky-effect .wf-auth-toggle[data-authenticated="false"] .wf-auth-icon {
    filter: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(922%) hue-rotate(22deg) brightness(88%) contrast(60%) !important;
  }
  
  .site-header.white-header {
    border-color: white;
  }
  .site-header.sticky-effect {
    border-color: transparent!important;
  }
  
</style><!-- Manage sticky header effects --><script type="module">
  initializeUniversalHeader();
  document.addEventListener('astro:page-load', initializeUniversalHeader);

  function initializeUniversalHeader() {
    const uniHeader = document.querySelector('.site-header');
    if (!uniHeader) return;
    let busy = false;

    const updateHeader = () => {
      uniHeader.classList.toggle('sticky-effect', window.scrollY > 10);
    };

    updateHeader();

    window.addEventListener('scroll', () => {
      if (!busy) {
        busy = true;

        requestAnimationFrame(() => {
          updateHeader();
          busy = false;
        });
      }
    }, { passive: true });
  }
</script>  <main class="bg-customOffWhite z-0 overflow-hidden" data-astro-cid-j7pv25f6> <!-- Hero --> <div class="w-full h-screen flex justify-center items-center relative overflow-hidden" data-astro-cid-j7pv25f6> <!-- Hero video --> <video src="/home/hero.mp4" poster="/home/hero.jpg" muted autoplay loop playsinline id="hero-bg" class="w-full h-full absolute top-0 left-0 object-cover" data-astro-cid-j7pv25f6></video> <!-- Copies --> <div class="w-full flex flex-col gap-[60px] md:gap-[80px] p-[20px] md:px-[126px] relative text-white" data-astro-cid-j7pv25f6> <div class="w-full flex flex-col gap-[15px] md:gap-0" data-astro-cid-j7pv25f6> <div class="w-full flex flex-col md:flex-row justify-between gap-[15px] md:gap-0" data-astro-cid-j7pv25f6> <div class="text-[17vw] md:text-[10.5vw] font-Denim font-light leading-none" data-astro-cid-j7pv25f6>THE</div> <div class="text-[17vw] md:text-[10.5vw] text-right font-Denim font-light leading-none" data-astro-cid-j7pv25f6>OPENING</div> </div> <div class="w-full flex flex-col md:flex-row justify-between md:items-end gap-[22px] md:gap-0 pl-[44px] md:pl-[12vw]" data-astro-cid-j7pv25f6> <div class="text-[17vw] md:text-[10.5vw] font-Denim font-light leading-none md:p-0" data-astro-cid-j7pv25f6>SALE</div> <div class="text-[5vw] md:text-[2.8vw] text-right font-medium leading-none pr-[38px] md:p-0" data-astro-cid-j7pv25f6>22-26 JUNE 2026</div> </div> </div> <div class="w-full max-w-[324px] md:max-w-[385px] md:self-end flex flex-col gap-[25px] mr-[10vw] md:mr-[7.7vw]" data-astro-cid-j7pv25f6> <div class="text-[20px] md:text-[24px] text-white font-semibold leading-[120%]" data-astro-cid-j7pv25f6>
All Wonderers must register to <br data-astro-cid-j7pv25f6>join the Pre-Sale. Secure your spot.
</div> <a href="/tickets" class="tickets-button w-fit flex items-center gap-[10px] p-[10px_20px] border border-white rounded-lg backdrop-blur-sm" data-astro-cid-j7pv25f6> <div class="text-[14px] text-white font-semibold tracking-[1.4px] leading-none translate-y-[10%]" data-astro-cid-j7pv25f6>
TICKETS
</div> <div class="tickets-button-dot w-[10px] aspect-square bg-white transition-colors duration-300 rounded-full" data-astro-cid-j7pv25f6></div> </a> </div> </div> </div> <!-- Manifesto and wonder report --> <div class="w-full flex flex-col md:flex-row gap-[30px] md:gap-[10px] py-[30px] md:p-[40px]" data-astro-cid-j7pv25f6> <!-- Manifesto --> <div class="flex-1 flex flex-col-reverse md:flex-col justify-between gap-[13px] md:gap-[40px] p-[15px_0_35px_30px] md:p-[40px]" data-astro-cid-j7pv25f6> <!-- Background --> <picture data-astro-cid-j7pv25f6> <source media="(min-width: 768px)" srcset="/home/manifesto.png" data-astro-cid-j7pv25f6> <img src="/home/manifesto-mobile.png" alt="Manifeto" loading="lazy" class="w-full" data-astro-cid-j7pv25f6> </picture> <!-- Copies --> <div class="w-full max-w-[300px] md:max-w-[478px] flex flex-col gap-[11px] md:gap-[20px] ml-[15px] md:ml-0" data-astro-cid-j7pv25f6> <h2 class="text-[40px] text-customDarkerGray font-Denim font-light leading-none" data-astro-cid-j7pv25f6>
Our Manifesto
</h2> <p class="text-[16px] text-customDarkerGray leading-[120%]" data-astro-cid-j7pv25f6>
Wonderfruit is a space that encourages active reflection, spirited creation and awareness. We developed this framework of ways to wonder.
</p> <a href="/manifesto" class="text-[16px] text-customDarkerGray font-medium leading-none w-fit pb-[7px] border-b-[1px] border-customDarkerGray" data-astro-cid-j7pv25f6>
Read
</a> </div> </div> <!-- Wonder report --> <div class="flex-1 px-[20px] md:p-0" data-astro-cid-j7pv25f6> <div class="w-full aspect-[1/1.38] md:aspect-[1.125/1] p-[27px] md:p-[40px] rounded-lg overflow-hidden relative" data-astro-cid-j7pv25f6> <!-- Background --> <picture data-astro-cid-j7pv25f6> <source media="(min-width: 768px)" srcset="/home/wonder-report.jpg" data-astro-cid-j7pv25f6> <img src="/home/wonder-report-mobile.jpg" alt="Wonder Report" loading="lazy" class="absolute top-0 left-0 w-full h-full object-cover" data-astro-cid-j7pv25f6> </picture> <!-- Copies --> <div class="w-full max-w-[280px] md:max-w-[478px] flex flex-col gap-[11px] md:gap-[20px] relative" data-astro-cid-j7pv25f6> <h2 class="text-[40px] text-white font-Denim font-light leading-none" data-astro-cid-j7pv25f6>
2025 Wonder Report
</h2> <p class="text-[16px] text-white leading-[120%]" data-astro-cid-j7pv25f6>
An annual exploration of Wonderfruit’s connection to Mind, Nature and Sound expressed through a series of cultural experiences, thoughts and initiatives.
</p> <a href="/wonder-report" class="text-[16px] text-white font-medium leading-none w-fit pb-[7px] border-b-[1px] border-white" data-astro-cid-j7pv25f6>
Read
</a> </div> </div> </div> </div> <!-- Accommodation --> <div class="w-full flex flex-col md:flex-row items-center gap-[20px] md:gap-[30px] p-[20px] md:p-[60px_40px] mt-[40px] md:mt-[30px] mb-[60px] md:mb-[70px]" data-astro-cid-j7pv25f6> <div class="flex-1 flex items-center gap-[30px]" data-astro-cid-j7pv25f6> <!-- Desktop image --> <img src="/home/camping.jpg" alt="Accommodations" loading="lazy" class="flex-1 max-w-[15vw] rounded-md hidden md:block" data-astro-cid-j7pv25f6> <!-- Copies --> <div class="flex-1 md:max-w-[411px] flex flex-col gap-[20px]" data-astro-cid-j7pv25f6> <h2 class="text-[40px] text-customDarkerGray font-Denim font-light leading-none" data-astro-cid-j7pv25f6>
Live the Wonder.<br data-astro-cid-j7pv25f6>Stay in The Fields.
</h2> <p class="text-[16px] text-customDarkerGray font-medium leading-[120%]" data-astro-cid-j7pv25f6>
We’re expanding our selection of on-site stays with roomier options, all fully shaded from the midday sun. Only a short stroll from the action and a world of its own, Boutique Camping is the Wonderer way to get the most from the five-day experience.
</p> <a href="/boutique-camping" class="text-[16px] text-customDarkerGray font-medium leading-none w-fit pb-[7px] border-b-[1px] border-customDarkerGray" data-astro-cid-j7pv25f6>
Explore
</a> </div> </div> <!-- Graphic --> <div class="flex-1 flex justify-end" data-astro-cid-j7pv25f6> <img src="/home/camping-graphic.png" alt="Accommodations" loading="lazy" class="w-full" data-astro-cid-j7pv25f6> </div> <!-- Mobile image --> <img src="/home/camping-mobile.jpg" alt="Accommodations" loading="lazy" class="w-full rounded-md md:hidden" data-astro-cid-j7pv25f6> </div> <!-- Aftermovie --> <div class="relative" data-astro-cid-j7pv25f6> <video src="/home/wf25-aftermovie-web-cut.mp4" poster="/home/aftermovie-poster.jpg" class="w-full h-screen object-cover" autoplay loop muted playsinline data-astro-cid-j7pv25f6></video> <div class="absolute bottom-[20px] right-[20px] z-10 pointer-events-none text-[16px] text-white font-semibold leading-none tracking-[-0.48px] uppercase" data-astro-cid-j7pv25f6>
AFTERMOVIE Wonderfruit 2025
</div> </div> <!-- Seasons --> <div class="w-full flex flex-col gap-[100px] py-[110px] md:p-[70px_0_170px_0]" data-astro-cid-j7pv25f6> <!-- Intro --> <div class="flex flex-col items-center gap-[10px] md:p-[40px]" data-astro-cid-j7pv25f6> <!-- Graphic --> <picture data-astro-cid-j7pv25f6> <source media="(min-width: 768px)" srcset="/home/open-field.png" data-astro-cid-j7pv25f6> <img src="/home/open-field-mobile.png" alt="Open Fields" loading="lazy" class="w-full md:max-w-[960px]" data-astro-cid-j7pv25f6> </picture> <div class="flex flex-col items-center gap-[30px] px-[20px] md:px-0" data-astro-cid-j7pv25f6> <h2 class="text-[40px] text-center text-customDarkerGray font-Denim font-light leading-none" data-astro-cid-j7pv25f6>
Open Fields
</h2> <p class="w-full max-w-[360px] md:max-w-[548px] text-[20px] text-center text-customDarkerGray leading-[120%]" data-astro-cid-j7pv25f6>
Beyond Wonderfruit festival, our home opens for a few months
</p> <p class="w-full max-w-[360px] md:max-w-[500px] text-[16px] text-center text-customMediumGray font-medium leading-[120%]" data-astro-cid-j7pv25f6>
Amongst our forests, farms, art installations and multi-purpose spaces we will be hosting different cultural expressions and experiences.
</p> </div> </div> <!-- Seasons --> <div class="w-full flex flex-col md:flex-row justify-center items-center gap-[110px] md:gap-[100px] px-[20px] md:px-[150px]" data-astro-cid-j7pv25f6> <div class="flex-1 md:max-w-[360px] flex flex-col items-center gap-[40px]" data-astro-cid-j7pv25f6> <img src="/home/camp-wonder-logo.svg" alt="Wonderfruit Chapter" loading="lazy" class="h-[140px] w-[272px]" data-astro-cid-j7pv25f6> <div class="flex flex-col items-center gap-[20px]" data-astro-cid-j7pv25f6> <h3 class="text-[30px] text-center text-customDarkerGray font-medium leading-none tracking-[1.5px] uppercase" data-astro-cid-j7pv25f6> 18-23 Dec 2026 </h3> <p class="max-w-[280px] md:max-w-[232px] text-[14px] text-center text-customMediumGray font-medium leading-[120%] tracking-[-0.28px]" data-astro-cid-j7pv25f6> An exploration of play and presence for all ages rooted in Buddhist teaching. </p> </div> </div><div class="flex-1 md:max-w-[360px] flex flex-col items-center gap-[40px]" data-astro-cid-j7pv25f6> <img src="/home/field-d-logo.svg" alt="Wonderfruit Chapter" loading="lazy" class="h-[140px] w-[302px]" data-astro-cid-j7pv25f6> <div class="flex flex-col items-center gap-[20px]" data-astro-cid-j7pv25f6> <h3 class="text-[30px] text-center text-customDarkerGray font-medium leading-none tracking-[1.5px] uppercase" data-astro-cid-j7pv25f6> 20 Dec </h3> <p class="max-w-[258px] md:max-w-[220px] text-[14px] text-center text-customMediumGray font-medium leading-[120%] tracking-[-0.28px]" data-astro-cid-j7pv25f6> An evening of open discovery for the sonically curious, set in The Fields. </p> </div> </div><div class="flex-1 md:max-w-[360px] flex flex-col items-center gap-[40px]" data-astro-cid-j7pv25f6> <img src="/home/mooban-logo.svg" alt="Wonderfruit Chapter" loading="lazy" class="h-[140px] w-[240px]" data-astro-cid-j7pv25f6> <div class="flex flex-col items-center gap-[20px]" data-astro-cid-j7pv25f6> <h3 class="text-[30px] text-center text-customDarkerGray font-medium leading-none tracking-[1.5px] uppercase" data-astro-cid-j7pv25f6> 29-31 jan </h3> <p class="max-w-[274px] md:max-w-[246px] text-[14px] text-center text-customMediumGray font-medium leading-[120%] tracking-[-0.28px]" data-astro-cid-j7pv25f6> A modern village built on the foundations of Thai medicine and folk wisdom. </p> </div> </div> </div> </div> <!-- Kyoto --> <div class="flex items-center justify-center px-[20px] md:px-[40px] relative bg-customOffWhite" data-astro-cid-j7pv25f6> <!-- Copies --> <div class="w-full flex flex-col md:flex-row justify-between items-center gap-[32px] py-[30px] md:pl-[55px] md:pr-[41px] rounded-lg overflow-hidden" data-astro-cid-j7pv25f6> <img src="/home/wf-chapter-kyoto-logo.png" alt="Kyoto Chapter Logo" loading="lazy" class="w-full max-w-[264px] md:max-w-[346px]" data-astro-cid-j7pv25f6> <img src="/home/kyoto-mountains.png" alt="Kyoto Mountains" loading="lazy" class="w-full max-w-[300px] md:max-w-[376px]" data-astro-cid-j7pv25f6> <div class="w-full max-w-[294px] md:max-w-[368px] flex flex-col items-center md:items-start gap-[20px]" data-astro-cid-j7pv25f6> <h2 class="text-[24px] md:text-[30px] text-center md:text-left text-customAlmostBlack font-Syne leading-none tracking-[1.5px] uppercase" data-astro-cid-j7pv25f6>
22-25 OCT 2026
</h2> <p class="text-[14px] md:text-[16px] text-center md:text-left text-customAlmostBlack font-medium leading-[120%]" data-astro-cid-j7pv25f6>
A small intimate gathering appears in Japan, rooted in a focused exploration of Mind, Nature and Sound through cultural expressions.
</p> <a href="https://chapterskyoto.co" target="_blank" class="text-[16px] text-customAlmostBlack font-medium leading-none w-fit pb-[7px] border-b-[1px] border-customAlmostBlack" data-astro-cid-j7pv25f6>
Explore
</a> </div> </div> </div> <!-- Subscribe --> <div class="w-full flex flex-col justify-center items-center gap-[37px] py-[133px] md:py-[147px] px-[50px]" data-astro-cid-j7pv25f6> <div class="w-full max-w-[250px] md:max-w-full text-[24px] text-center text-customDarkerGray leading-[120%] md:leading-none" data-astro-cid-j7pv25f6>
Stay connected to the world of Wonderfruit
</div> <a href="https://mailchi.mp/wonderfruit.co/wonderfruit-newsletter-signup-form" target="_blank" class="w-fit p-[20px_30px_17px_30px] bg-customSage rounded-md text-[16px] text-white font-medium leading-none uppercase" data-astro-cid-j7pv25f6>
Subscribe
</a> </div> </main>  <footer class="w-full flex flex-col md:flex-row justify-between gap-[130px] md:gap-[80px] border-t-halfpx border-black/50 
    p-[35px_20px_35px_20px] md:p-[30px_45px_30px_45px] z-10 overflow-hidden
    bg-white
  " data-astro-cid-mtxgg6pp> <!-- Left column --> <!-- Navigation --> <div class="w-full flex flex-col md:flex-row gap-[25px] md:gap-[60px]" data-astro-cid-mtxgg6pp> <div class="mobile-menu-item md:w-fit flex flex-col gap-[14px]" data-astro-cid-mtxgg6pp> <div class="mobile-menu-cat w-full flex items-center justify-between" data-astro-cid-mtxgg6pp> <h3 class="text-[24px] md:text-[20px] font-medium 
                
                leading-none
              " data-astro-cid-mtxgg6pp> Ethos </h3> <img src="/icons/chevron-down.svg" alt="Ethos" class="w-[17px] h-[8px] invert md:hidden" data-astro-cid-mtxgg6pp> </div> <div class="mobile-menu-links flex flex-col gap-[16px] leading-none overflow-hidden transition-all duration-300" style="height:0;" data-astro-cid-mtxgg6pp> <a href="/expressions" class="flex flex-col gap-[3px] text-[14px] md:text-[16px] leading-none 
                  
                  
                " data-astro-cid-mtxgg6pp> <span class="whitespace-nowrap" data-astro-cid-mtxgg6pp>Expressions</span>  </a><a href="/manifesto" class="flex flex-col gap-[3px] text-[14px] md:text-[16px] leading-none 
                  
                  
                " data-astro-cid-mtxgg6pp> <span class="whitespace-nowrap" data-astro-cid-mtxgg6pp>Our Manifesto</span>  </a><a href="/wonder-report" class="flex flex-col gap-[3px] text-[14px] md:text-[16px] leading-none 
                  
                  
                " data-astro-cid-mtxgg6pp> <span class="whitespace-nowrap" data-astro-cid-mtxgg6pp>Wonder Report 2025</span>  </a><a href="/decade-of-wonder" class="flex flex-col gap-[3px] text-[14px] md:text-[16px] leading-none 
                  
                  
                " data-astro-cid-mtxgg6pp> <span class="whitespace-nowrap" data-astro-cid-mtxgg6pp>Decade of Wonder</span>  </a> </div> </div><div class="mobile-menu-item md:w-fit flex flex-col gap-[14px]" data-astro-cid-mtxgg6pp> <div class="mobile-menu-cat w-full flex items-center justify-between" data-astro-cid-mtxgg6pp> <h3 class="text-[24px] md:text-[20px] font-medium 
                
                leading-none
              " data-astro-cid-mtxgg6pp> Explore </h3> <img src="/icons/chevron-down.svg" alt="Explore" class="w-[17px] h-[8px] invert md:hidden" data-astro-cid-mtxgg6pp> </div> <div class="mobile-menu-links flex flex-col gap-[16px] leading-none overflow-hidden transition-all duration-300" style="height:0;" data-astro-cid-mtxgg6pp> <a href="/gallery" class="flex flex-col gap-[3px] text-[14px] md:text-[16px] leading-none 
                  
                  
                " data-astro-cid-mtxgg6pp> <span class="whitespace-nowrap" data-astro-cid-mtxgg6pp>Gallery</span>  </a><a href="/wonderpost" class="flex flex-col gap-[3px] text-[14px] md:text-[16px] leading-none 
                  
                  
                " data-astro-cid-mtxgg6pp> <span class="whitespace-nowrap" data-astro-cid-mtxgg6pp>Wonderpost</span>  </a><a href="/thepineappleeyes" class="flex flex-col gap-[3px] text-[14px] md:text-[16px] leading-none 
                  
                  
                " data-astro-cid-mtxgg6pp> <span class="whitespace-nowrap" data-astro-cid-mtxgg6pp>The Pineapple Eyes</span>  </a><a href="/venues" class="flex flex-col gap-[3px] text-[14px] md:text-[16px] leading-none 
                  
                  
                " data-astro-cid-mtxgg6pp> <span class="whitespace-nowrap" data-astro-cid-mtxgg6pp>Venues</span>  </a><a href="/collaborations" class="flex flex-col gap-[3px] text-[14px] md:text-[16px] leading-none 
                  
                  
                " data-astro-cid-mtxgg6pp> <span class="whitespace-nowrap" data-astro-cid-mtxgg6pp>Collaborations</span>  </a> </div> </div><div class="mobile-menu-item md:w-fit flex flex-col gap-[14px]" data-astro-cid-mtxgg6pp> <div class="mobile-menu-cat w-full flex items-center justify-between" data-astro-cid-mtxgg6pp> <h3 class="text-[24px] md:text-[20px] font-medium 
                
                leading-none
              " data-astro-cid-mtxgg6pp> Passes </h3> <img src="/icons/chevron-down.svg" alt="Passes" class="w-[17px] h-[8px] invert md:hidden" data-astro-cid-mtxgg6pp> </div> <div class="mobile-menu-links flex flex-col gap-[16px] leading-none overflow-hidden transition-all duration-300" style="height:0;" data-astro-cid-mtxgg6pp> <a href="/tickets" class="flex flex-col gap-[3px] text-[14px] md:text-[16px] leading-none 
                  
                  
                " data-astro-cid-mtxgg6pp> <span class="whitespace-nowrap" data-astro-cid-mtxgg6pp>Tickets</span>  </a> </div> </div><div class="mobile-menu-item md:w-fit flex flex-col gap-[14px]" data-astro-cid-mtxgg6pp> <div class="mobile-menu-cat w-full flex items-center justify-between" data-astro-cid-mtxgg6pp> <h3 class="text-[24px] md:text-[20px] font-medium 
                
                leading-none
              " data-astro-cid-mtxgg6pp> Stay </h3> <img src="/icons/chevron-down.svg" alt="Stay" class="w-[17px] h-[8px] invert md:hidden" data-astro-cid-mtxgg6pp> </div> <div class="mobile-menu-links flex flex-col gap-[16px] leading-none overflow-hidden transition-all duration-300" style="height:0;" data-astro-cid-mtxgg6pp> <a href="/slow-wonder" class="flex flex-col gap-[3px] text-[14px] md:text-[16px] leading-none 
                  
                  
                " data-astro-cid-mtxgg6pp> <span class="whitespace-nowrap" data-astro-cid-mtxgg6pp>Slow Wonder</span>  </a><a href="/boutique-camping" class="flex flex-col gap-[3px] text-[14px] md:text-[16px] leading-none 
                  
                  
                " data-astro-cid-mtxgg6pp> <span class="whitespace-nowrap" data-astro-cid-mtxgg6pp>Boutique Camping</span>  </a><a href="/general-camping" class="flex flex-col gap-[3px] text-[14px] md:text-[16px] leading-none 
                  
                  
                " data-astro-cid-mtxgg6pp> <span class="whitespace-nowrap" data-astro-cid-mtxgg6pp>General Camping</span>  </a> </div> </div><div class="mobile-menu-item md:w-fit flex flex-col gap-[14px]" data-astro-cid-mtxgg6pp> <div class="mobile-menu-cat w-full flex items-center justify-between" data-astro-cid-mtxgg6pp> <h3 class="text-[24px] md:text-[20px] font-medium 
                
                leading-none
              " data-astro-cid-mtxgg6pp> Join </h3> <img src="/icons/chevron-down.svg" alt="Join" class="w-[17px] h-[8px] invert md:hidden" data-astro-cid-mtxgg6pp> </div> <div class="mobile-menu-links flex flex-col gap-[16px] leading-none overflow-hidden transition-all duration-300" style="height:0;" data-astro-cid-mtxgg6pp> <a href="/participation" class="flex flex-col gap-[3px] text-[14px] md:text-[16px] leading-none 
                  
                  
                " data-astro-cid-mtxgg6pp> <span class="whitespace-nowrap" data-astro-cid-mtxgg6pp>Participation</span>  </a><a href="https://scratchfirst.co/careers" target="_blank" class="flex flex-col gap-[3px] text-[14px] md:text-[16px] leading-none 
                  
                  
                " data-astro-cid-mtxgg6pp> <span class="whitespace-nowrap" data-astro-cid-mtxgg6pp>Careers</span>  </a> </div> </div> </div> <!-- Right column --> <div class="flex flex-col justify-between gap-[50px] md:gap-[60px] md:mx-[20px]" data-astro-cid-mtxgg6pp> <!-- Subscribe form --> <form action="" class="w-full flex flex-col gap-[20px] px-[25px] md:p-0" onsubmit="event.preventDefault(); window.open('https://mailchi.mp/wonderfruit.co/wonderfruit-newsletter-signup-form', '_blank');" data-astro-cid-mtxgg6pp> <p class="text-[16px] md:text-[20px] text-center md:text-left text-black font-semibold leading-none uppercase" data-astro-cid-mtxgg6pp>
Stay connected
</p> <div class="w-full flex flex-col md:flex-row flex-wrap gap-[30px] md:gap-[24px]" data-astro-cid-mtxgg6pp> <input class="w-full md:w-[293px] bg-transparent border-halfpx border-black placeholder-black/50 outline-none p-[15px] pb-[10px] z-10 text-[12px] leading-none" type="email" required placeholder="YOUR EMAIL" data-astro-cid-mtxgg6pp> <button class="flex justify-center md:justify-start gap-[5px] items-start md:items-center text-[14px] md:text-[16px] md:font-medium leading-none tracking-[.48px] whitespace-nowrap z-10 group" data-astro-cid-mtxgg6pp> <span class="relative" data-astro-cid-mtxgg6pp>
SUBSCRIBE
<div class="absolute w-full h-[1px] -bottom-[.4rem] left-0 bg-black md:scale-x-0 group-hover:scale-x-100 md:opacity-0 group-hover:opacity-100 origin-left duration-[800ms] ease-customSlide" data-astro-cid-mtxgg6pp></div> </span> <img class="w-[11px] aspect-square mb-[2px]" src="/icons/link-arrow-new.svg" alt="Subscribe Link Icon" data-astro-cid-mtxgg6pp> </button> </div> </form> <!-- Social logos --> <div class="flex justify-center md:justify-start items-center gap-[40px] md:gap-[20px]" data-astro-cid-mtxgg6pp> <a href="https://www.instagram.com/wonderfruit" target="_blank" data-astro-cid-mtxgg6pp> <img class="w-[32px] social-color" id="social-icon" src="/icons/social-instagram-white.svg" alt="Instagram Icon" data-astro-cid-mtxgg6pp> </a> <a href="https://www.facebook.com/wonderfruitfest" target="_blank" data-astro-cid-mtxgg6pp> <img class="w-[32px] social-color" id="social-icon" src="/icons/social-facebook-white.svg" alt="Facebook Icon" data-astro-cid-mtxgg6pp> </a> <a href="https://www.youtube.com/channel/UCWpxHOXQC_-KahRrA3ESIfw/feed" target="_blank" data-astro-cid-mtxgg6pp> <img class="w-[37px] social-color" id="social-icon" src="/icons/social-youtube-white.svg" alt="Youtube Icon" data-astro-cid-mtxgg6pp> </a> <a href="https://soundcloud.com/wonderfruitfestival" target="_blank" data-astro-cid-mtxgg6pp> <img class="w-[36px] social-color" id="social-icon" src="/icons/social-soundcloud-white.png" alt="Soundcloud Icon" data-astro-cid-mtxgg6pp> </a> </div> <!-- Address --> <p class="text-[12px] text-center md:text-left font-medium leading-[110%] tracking-[0.6px] uppercase" data-astro-cid-mtxgg6pp>
The Fields at Siam Country Club.
<br data-astro-cid-mtxgg6pp>
Chonburi, Thailand.
</p> <!-- Terms/Privacy links – desktop --> <div class="flex flex-wrap md:flex-nowrap justify-center items-center gap-[24px] md:gap-[60px] px-[20px] md:p-0 text-[12px] font-medium leading-none tracking-[0.36px] uppercase" data-astro-cid-mtxgg6pp> <a href="/terms-and-conditions" class="flex items-start gap-[5px] text-customGray whitespace-nowrap" data-astro-cid-mtxgg6pp>
Terms & Conditions
<img src="/icons/link-arrow-new.svg" alt="Link Arrow" class="w-[2vw] md:w-[8px]" data-astro-cid-mtxgg6pp> </a> <a href="/privacy-policy" class="flex items-start gap-[5px] text-customGray whitespace-nowrap" data-astro-cid-mtxgg6pp>
Privacy Policy
<img src="/icons/link-arrow-new.svg" alt="Link Arrow" class="w-[2vw] md:w-[8px]" data-astro-cid-mtxgg6pp> </a> </div> </div> </footer>  <astro-island uid="1EAGfX" data-solid-render-id="s3" component-url="/_astro/CheckAuth.DL3D-Z7J.js" component-export="default" renderer-url="/_astro/client.Ddz0CcHE.js" props="{&quot;data-astro-cid-sckkx6r4&quot;:[0,true]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;CheckAuth&quot;,&quot;value&quot;:true}" await-children=""><span data-hk="s30000" aria-hidden="true" class="hidden"></span><!--astro:end--></astro-island> <!-- ConsentBanner.astro --><div id="consent-banner" class="fixed bottom-[45px] left-[47px] md:bottom-[60px] md:left-[60px] w-[305px] hidden bg-white flex-col gap-[10px] p-[10px] pt-[12px] rounded-[9px] z-[500]"> <div class="text-[14px] font-semibold leading-[100%]">Let’s stay compliant: accept our cookies</div> <p class="text-[12px] leading-[110%]">To enhance your experience, we rely on your consent to utilize cookies, gather data, personalize content, display ads and analyze traffic.</p> <div class="flex gap-[10px] text-white"> <button id="use-necessary" class="bg-customGreen text-[12px] leading-[100%] px-[10px] py-[9px] rounded-full">Use only necessary</button> <button id="accept-all" class="bg-customDarkGreen text-[12px] leading-[100%] px-[10px] py-[9px] rounded-full">Accept all</button> </div> </div> <script>
    initializeConsent();
    document.addEventListener('astro:page-load', initializeConsent);

    function initializeConsent() {
        const banner = document.getElementById('consent-banner');
        const userConsent = localStorage.getItem('userConsent');

        if (userConsent) {
            gtag('consent', 'update', userConsent);
        } else {
            banner.style.display = 'flex';
        }

        document.getElementById('accept-all').addEventListener('click', () => {
            const consent = {
            ad_personalization: 'granted',
            ad_storage: 'granted',
            ad_user_data: 'granted',
            analytics_storage: 'granted',
            functionality_storage: 'granted',
            personalization_storage: 'granted',
            security_storage: 'granted',
            };
            localStorage.setItem('userConsent', JSON.stringify(consent));
            banner.style.display = 'none';
            gtag('consent', 'update', consent);
        });

        document.getElementById('use-necessary').addEventListener('click', () => {
            const consent = {
            ad_personalization: 'denied',
            ad_storage: 'denied',
            ad_user_data: 'denied',
            analytics_storage: 'granted',
            functionality_storage: 'granted',
            personalization_storage: 'denied',
            security_storage: 'granted',
            };
            localStorage.setItem('userConsent', JSON.stringify(consent));
            banner.style.display = 'none';
            gtag('consent', 'update', consent);
        });
    }
</script> <astro-island uid="CRfab" data-solid-render-id="s4" component-url="/_astro/WaitlistFormTxModal.BzhG1Ghq.js" component-export="default" renderer-url="/_astro/client.Ddz0CcHE.js" props="{&quot;listId&quot;:[0,&quot;35cb0ada15&quot;],&quot;tags&quot;:[1,[[0,&quot;WF26 Opening Sale Opt in&quot;]]],&quot;isThai&quot;:[0,false],&quot;emailPlaceholder&quot;:[0,&quot;Email&quot;],&quot;submittedText&quot;:[0,&quot;Submitted&quot;],&quot;invalidEmailText&quot;:[0,&quot;Invalid email&quot;],&quot;listClosesText&quot;:[0,&quot;The list closes 21 June 4pm.&quot;],&quot;datesText&quot;:[0,&quot;22–26 JUNE 2026&quot;],&quot;successHeading&quot;:[0,&quot;You&#39;ve successfully registered for The Opening Sale, check your inbox for updates&quot;],&quot;successSubtext&quot;:[0,&quot;Access opens 22 June 4PM BKK (GMT+7)&quot;],&quot;data-astro-cid-sckkx6r4&quot;:[0,true]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;WaitlistFormTxModal&quot;,&quot;value&quot;:true}" await-children=""><div data-hk="s40000" id="tickets-waitlist-modal" class="fixed inset-0 flex justify-center items-center gap-5 py-10 px-5 transition-opacity duration-300 z-50 opacity-0 pointer-events-none " inert aria-hidden="true"><form class="w-full md:max-w-[415px] flex flex-col items-center justify-center gap-[30px] p-[30px] rounded-xl overflow-hidden relative" novalidate><img src="/tickets/waitlist-modal-bg.jpg" alt="Waitlist Modal Background" class="absolute w-full h-full top-0 left-0 object-cover pointer-events-none"><!--$--><div data-hk="s400010" class="w-full flex flex-col items-end gap-[20px] relative"><button type="button"><img src="/icons/close.svg" alt="Close Modal Button" class="w-[16px]"></button><div class="w-full text-[40px] text-customOffWhite font-Denim font-medium leading-[120%]">Register for <br class="hidden md:block">The Opening Sale</div><div class="w-full text-[20px] text-customOffWhite leading-[120%]">22–26 JUNE 2026</div></div><div data-hk="s400011" class="w-full flex bg-white/80 rounded relative mb-[20px] mt-[10px]"><input type="email" placeholder="Email" required value="" class="w-full text-[16px] leading-none bg-transparent outline-none text-customMediumGray placeholder-customMediumGray pt-[5px] pl-[15px]"><button id="btn-optin-popup" type="submit" class="aspect-square flex justify-center items-center rounded-full p-[8px] md:p-[10px] m-[6px] bg-[#6A87BF]" aria-label="Join waitlist"><img data-hk="s4000120" src="/icons/arrow-round.svg" alt class="w-[20px] md:w-[24px] aspect-square"></button><span class="min-h-[18px] flex items-center text-[12px] text-white font-medium leading-none absolute top-[calc(100%+10px)] left-0"></span></div><p data-hk="s400014" class="w-full text-[16px] text-white leading-none relative">The list closes 21 June 4pm.</p><!--/--></form></div><!--astro:end--></astro-island>  <!-- Show tickets waitlist modal on every page (except tickets) after 5s -->  <!-- Activate add to card buttons --> <script type="module">
    document.addEventListener('astro:after-swap', activatePurchaseButtons);
		document.addEventListener('DOMContentLoaded', activatePurchaseButtons);
		
		async function activatePurchaseButtons() {
			const buttons = document.querySelectorAll('.add-to-cart');

			buttons.forEach(button => {
        button.addEventListener('click', activateAddToCard);
			});

			if (buttons.length > 0) {
				checkInventory(buttons)
			}
		}

		function activateAddToCard(event) {
			const button = event.currentTarget;
			const { name, subtitle, price, productId, quantity, purchaseLimit } = button.dataset;

			if (productId) {
				window.dispatchEvent(new CustomEvent('add-to-cart', {
					detail: { name, subtitle, price: parseFloat(price), productId, quantity: parseInt(quantity), purchaseLimit: parseInt(purchaseLimit) }
				}));
			}

		}

		async function checkInventory(buttons) {
			try {
				const response = await fetch('/api/tickets.json');
				const { message: { Items: items } } = await response.json();
				
				const productQuantities = items.reduce((acc, item) => {
					acc[item.ticket_type_id] = item.remain;
					return acc;
				}, {});
				

				// Show sold out for items with 0 remining & show remaining if it's less than 10
				let outOfStockProductIds = [];
				let shouldRetry = false;

				document.querySelectorAll('.item-capacity').forEach(element => {
          const productId = element.dataset.productId;
					const remainingInventory = productQuantities[productId];


					if (remainingInventory == 0) {
						const disabledButtons = Array.from(buttons).filter(item => item.dataset.productId == productId);

						disabledButtons.forEach(button => {
							if (!button.classList.contains('multi-option')) {
								button.classList.add('sold-out');
                button.removeEventListener('click', activateAddToCard);

								if (button.classList.contains('has-waitlist') || button.classList.contains('has-waitlist-mobile')) {
									button.innerHTML = '<span class="translate-y-[2px] px-[8px]">sold out • notify me</span>';
								} else {
									button.innerHTML = '<span class="translate-y-[2px] px-[8px]">sold out</span>';
								}

								const journeyCard = button.closest('.journey-card');
								if (journeyCard) journeyCard.setAttribute('data-sold-out', true);
							}
						})
						outOfStockProductIds.push(productId);
					}
					else if (remainingInventory && (remainingInventory < 10) && !element.classList.contains('multi-option')) {
						element.innerText = `${remainingInventory} Left`;
						element.classList.remove('opacity-0');
						shouldRetry = true;
					}
				});


				// Add remaining inventory to all options, disable the ones with 0 remaining
				document.querySelectorAll('.purchase-option').forEach(element => {
					const productId = element.dataset.productId;
					const remainingInventory = productQuantities[productId];

					element.setAttribute('data-remaining', remainingInventory);

					if (remainingInventory == 0) {
						element.classList.add('opacity-40');
						element.classList.add('pointer-events-none');
					}
				});

				// Disable Button if all options have 0 remaining
				document.querySelectorAll('.session-select').forEach(dropdownToggle => {
					const allSessions = dropdownToggle.nextElementSibling.querySelectorAll('.purchase-option');
	
					if (Array.from(allSessions).every(session => session.getAttribute('data-remaining') == "0")) {
						const soldOutButton =  dropdownToggle.closest('.journey-card').querySelector('.add-to-cart');
						if (soldOutButton.classList.contains('multi-option')) {
							soldOutButton.classList.add('opacity-60');
							soldOutButton.removeEventListener('click', activateAddToCard);
							soldOutButton.classList.replace('bg-customGreen', 'bg-[#A22]');
							soldOutButton.classList.replace('md:bg-customGreen', 'bg-[#A22]');
							soldOutButton.classList.replace('bg-customDarkGreen', 'bg-[#A22]');
							soldOutButton.classList.replace('hover:bg-customDarkGreen', 'hover:bg-[#922]');
							soldOutButton.classList.replace('md:hover:bg-customDarkGreen', 'hover:bg-[#922]');
							soldOutButton.innerHTML = '<span class="translate-y-[2px] px-[8px]">sold out</span>';
							
							const journeyCard = soldOutButton.closest('.journey-card');
							if (journeyCard) journeyCard.setAttribute('data-sold-out', true);
						}
					}
				});

				if (outOfStockProductIds.length > 0) {
					window.dispatchEvent(new CustomEvent('out-of-stock', {
						detail: { productIds: outOfStockProductIds }
					}));
				}

				if (shouldRetry) {
					setTimeout(() => checkInventory(buttons), 60000);
				}

        // Scroll to journey #name in url
				if (window.location.hash) {
					const targetElement = document.querySelector(window.location.hash);
					if (targetElement) {
					targetElement.scrollIntoView({ behavior: 'auto' });
					}
				}
			} catch (error) {
				console.error('Error fetching ticket data:', error);
			}
		}
	</script> <!-- Add a class to root document for Apple devices to adjust for font rendering discrepancies --> <script type="module">
    if (navigator.userAgent.includes('Chrome')) {
      document.documentElement.classList.add('chrome-browser');
    }
	</script> </body></html>  