:root{
  --bg:#FBF5EC;
  --bg2:#EAF6FF;
  --surface:#FFFFFF;
  --text:#0B1B1C;
  --muted:#51606A;
  --accent:#12C7B7;
  --accent2:#FF8A00;
  --danger:#EF4444;

  --shadow:0 20px 60px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:26px;
  --container:1280px;

  /* Derived (updates automatically when Customizer variables change) */
  --card:  color-mix(in srgb, var(--surface) 70%, transparent);
  --card2: color-mix(in srgb, var(--surface) 86%, transparent);
  --line:  color-mix(in srgb, var(--text) 12%, transparent);
  --shadow-soft: 0 18px 55px color-mix(in srgb, #000 32%, transparent);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--ze-font-body, ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji");
  background:
    radial-gradient(900px 520px at 12% -10%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 60%),
    radial-gradient(1000px 620px at 88% 10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
  overflow-x:hidden;
}

/* Beach preset: “Citrus Luxe” background (NO image assets; gradients + tiny inline grain) */
body.ze-mode-beach{
  background-color: var(--bg2);
  background-image:
    radial-gradient(1100px 600px at 18% -10%, rgba(18,199,183,.18), transparent 60%),
    radial-gradient(900px 520px at 88% 12%, rgba(255,138,0,.12), transparent 55%),
    radial-gradient(1000px 680px at 50% 110%, rgba(18,199,183,.10), transparent 55%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg) 58%, #ffffff 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat;
  background-size: auto,auto,auto,auto,240px 240px;
  background-blend-mode: normal,normal,normal,normal,multiply;
  background-attachment: fixed,fixed,fixed,fixed,fixed;
}
a{color:inherit}

/* Typography (Customizer → Style → Font style) */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,
.hero__title,
.ze-welcome__title,
.event-card__title,
.product_title,
.woocommerce h1,.woocommerce h2,.woocommerce h3{
  font-family: var(--ze-font-heading, var(--ze-font-body, ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial));
}

/* Global link styling (Customizer → Style) */
.site-main a:not(.btn):not(.icon-btn):not(.woocommerce a.button):not(.woocommerce button.button):not(.woocommerce input.button):not(.nav-links a):not(.nav-links-mobile a){
  color: var(--ze-link, var(--accent));
  text-decoration:none;
}

.site-main a:not(.btn):not(.icon-btn):not(.woocommerce a.button):not(.woocommerce button.button):not(.woocommerce input.button):not(.nav-links a):not(.nav-links-mobile a):hover{
  color: var(--ze-link-hover, var(--accent2));
}

/* Underline modes */
.ze-link-u-underline .site-main a:not(.btn):not(.icon-btn):not(.woocommerce a.button):not(.woocommerce button.button):not(.woocommerce input.button){
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ze-link-u-animated .site-main a:not(.btn):not(.icon-btn):not(.woocommerce a.button):not(.woocommerce button.button):not(.woocommerce input.button){
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 2px;
  background-position: 0 calc(100% - 1px);
  background-repeat: no-repeat;
  transition: background-size .18s ease, color .18s ease;
}

.ze-link-u-animated .site-main a:not(.btn):not(.icon-btn):not(.woocommerce a.button):not(.woocommerce button.button):not(.woocommerce input.button):hover{
  background-size: 100% 2px;
}

.ze-link-u-none .site-main a:not(.btn):not(.icon-btn):not(.woocommerce a.button):not(.woocommerce button.button):not(.woocommerce input.button){
  background-image:none;
  text-decoration:none;
}

/* Focus ring */
:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--ze-focus, var(--accent)) 70%, transparent);
  outline-offset: 2px;
  border-radius: 10px;
}

img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 clamp(14px, 2.2vw, 22px)}
.section{padding:52px 0}

/* -------------------------------------------------------------------------
   Section styling + dividers (Site-wide)
   ------------------------------------------------------------------------- */

/* IMPORTANT: use background-color (not shorthand background)
   so any background-image set by blocks/plugins isn't wiped.
*/
.ze-section{position:relative;background-color:var(--ze-sec-bg,transparent);color:var(--ze-sec-text,inherit);z-index:var(--ze-sec-z,1);overflow:visible}

/* Divider stacking fix:
   Bottom dividers can look like a straight line if the NEXT section paints over them.
   We give earlier sections a higher z-index so their bottom divider sits above the next section. */
.ze-section--welcome{--ze-sec-z:90}
.ze-section--events{--ze-sec-z:80}
.ze-section--calendar{--ze-sec-z:70}
.ze-section--reviews{--ze-sec-z:60}
.ze-section--map{--ze-sec-z:50}
.ze-section--blog{--ze-sec-z:40}
.ze-section--newsletter{--ze-sec-z:30}

/* Citrus Luxe: add a subtle “painted light” glow to every section (no images) */
body.ze-mode-beach .ze-section::before{
  content:"";
  position:absolute;
  inset:-120px -80px;
  pointer-events:none;
  z-index:1;
  opacity: calc(.55 * var(--ze-sec-glow,1));
  background:
    radial-gradient(800px 420px at 12% 18%, rgba(18,199,183,.20), transparent 65%),
    radial-gradient(700px 380px at 88% 8%, rgba(255,138,0,.16), transparent 60%),
    radial-gradient(900px 520px at 55% 120%, rgba(18,199,183,.14), transparent 60%);
}
/* Keep content above decorative dividers */
.ze-section .container{position:relative;z-index:3}
/* Allow per-section card surface overrides */
.ze-section .card{background:var(--ze-sec-surface,var(--surface))}

/* Base section padding + seamless overlap for TOP + BOTTOM dividers
   - padding makes room so content never sits under the SVG
   - negative margins overlap adjacent sections so straight edges never show
*/
.section.ze-section{
  /*
    Divider rendering model (IMPORTANT):
    Dividers live *inside* the section area (top:0 / bottom:0) instead of
    protruding outside and relying on negative margins.

    This prevents the classic bug where the next section "paints over" the
    previous section's bottom divider, making it look like a straight edge.
  */
  padding-top:calc(52px + var(--ze-divider-top-h,0px));
  padding-bottom:calc(52px + var(--ze-divider-bottom-h,0px));
  margin-top:0;
  margin-bottom:0;
}
.section.ze-section[data-divider-top="none"]{padding-top:52px;margin-top:0}
.section.ze-section[data-divider-bottom="none"]{padding-bottom:52px;margin-bottom:0}

/* Divider base */
.ze-divider{position:absolute;left:0;width:100%;overflow:hidden;pointer-events:none;line-height:0;z-index:4;transform:translate3d(0,0,0)}
.ze-divider--top{top:-1px;height:var(--ze-divider-top-h,0px);z-index:5}
.ze-divider--bottom{bottom:-1px;height:var(--ze-divider-bottom-h,0px);z-index:5}

/* Default wave/curve top flips to fill above the curve (hides straight edges) */
.ze-divider--top:not(.ze-divider--glass_fade):not(.ze-divider--el_waves_brush){transform:scaleY(-1);transform-origin:center}

/* Elementor “Waves Brush” orientation:
   - TOP divider uses the SVG as-is
   - BOTTOM divider flips so the fill sits below the wave line (like Elementor)
*/
.ze-divider--el_waves_brush.ze-divider--bottom .ze-divider__svg{transform:scaleY(-1) translate3d(0,0,0);transform-origin:center}

.ze-divider__svg{width:100%;height:100%;display:block;transform:translate3d(0,0,0);backface-visibility:hidden}
.ze-divider__svg path{fill:currentColor}

/* Exact illustrated divider image (transparent background) */
.ze-divider--wave_img_original{
  background-image:url('waves/illustrated-wave-original-transparent.png');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% 100%;
}
.ze-divider--wave_img_original.ze-divider--top{transform:none !important}
.ze-divider--wave_img_original .ze-divider__img{display:block;width:100%;height:100%}
.ze-divider__custom svg{width:100%;height:100%;display:block;transform:translate3d(0,0,0);backface-visibility:hidden}

/* Color blending between adjacent backgrounds
   Apply colour on the divider wrapper so BOTH:
   - the built-in SVG (.ze-divider__svg)
   - any pasted Elementor SVG (.ze-divider__custom)
   inherit the same tint.
*/
.ze-divider--bottom{
  color: color-mix(in srgb, var(--ze-divider-tint-override, var(--ze-next-bg,var(--bg))) 100%, transparent);
  filter: none;
}
.ze-divider--top{
  color: color-mix(in srgb, var(--ze-divider-tint-override, var(--ze-prev-bg,var(--bg))) 100%, transparent);
  filter: none;
}

/* Elementor pasted SVG support */
.ze-divider__custom{width:100%;height:100%}
.ze-divider__custom svg{width:100%;height:100%;display:block;transform:translate3d(0,0,0);backface-visibility:hidden}
.ze-divider__custom .elementor-shape-fill{fill:currentColor}



/* Illustrated wave (smart tint) */
.ze-divider--wave_illus .ze-divider__svg .ze-stroke,
.ze-divider--wave_illus_bold .ze-divider__svg .ze-stroke{
  fill:none !important;
  stroke: color-mix(in srgb, currentColor 68%, #ffffff 32%);
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect: non-scaling-stroke;
}
.ze-divider--wave_illus .ze-divider__svg .ze-stroke{ opacity:.38; stroke-width:2.4 }
.ze-divider--wave_illus .ze-divider__svg .ze-stroke2{ opacity:.18; stroke-width:5.2 }

.ze-divider--wave_illus_bold .ze-divider__svg .ze-stroke{ opacity:.55; stroke-width:3.2 }
.ze-divider--wave_illus_bold .ze-divider__svg .ze-stroke2{ opacity:.30; stroke-width:7.2 }

/* Dark mode tweak */
body.ze-mode-afterdark .ze-divider--wave_illus .ze-divider__svg .ze-stroke,
body.ze-mode-afterdark .ze-divider--wave_illus_bold .ze-divider__svg .ze-stroke{
  stroke: color-mix(in srgb, currentColor 74%, #ffffff 26%);
}


/* Hero illustrated wave (like screenshot) */
/* - fill is the area BELOW the waterline
   - top divider should NOT flip (we want sea below, not above)
   - when used as TOP divider, tint to the current section background
*/
.ze-divider--wave_hero_illus.ze-divider--top{
  transform:none !important;
  color: color-mix(in srgb, var(--ze-sec-bg,var(--bg)) 100%, transparent);
}

/* prevent default fill from colouring the stroke-only paths */
.ze-divider--wave_hero_illus .ze-divider__svg path{fill:none}
.ze-divider--wave_hero_illus .ze-divider__svg .ze-illus-fill{fill:currentColor}

.ze-divider--wave_hero_illus .ze-illus-edge,
.ze-divider--wave_hero_illus .ze-illus-edge2,
.ze-divider--wave_hero_illus .ze-illus-hi,
.ze-divider--wave_hero_illus .ze-illus-hi2,
.ze-divider--wave_hero_illus .ze-illus-dash,
.ze-divider--wave_hero_illus .ze-illus-accent,
.ze-divider--wave_hero_illus .ze-illus-accent2{
  fill:none;
  vector-effect: non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ze-divider--wave_hero_illus .ze-illus-edge{
  stroke: color-mix(in srgb, currentColor 70%, #000 30%);
  opacity:.55;
  stroke-width:3.2;
}
.ze-divider--wave_hero_illus .ze-illus-edge2{
  stroke: color-mix(in srgb, currentColor 78%, #000 22%);
  opacity:.26;
  stroke-width:6.4;
}

.ze-divider--wave_hero_illus .ze-illus-hi{
  stroke: rgba(255,255,255,.92);
  opacity:.95;
  stroke-width:6.2;
}
.ze-divider--wave_hero_illus .ze-illus-hi2{
  stroke: rgba(255,255,255,.92);
  opacity:.55;
  stroke-width:3.2;
}
.ze-divider--wave_hero_illus .ze-illus-dash{
  stroke: rgba(255,255,255,.92);
  opacity:.75;
  stroke-width:4.0;
}

.ze-divider--wave_hero_illus .ze-illus-accent{
  stroke: currentColor;
  opacity:.95;
  stroke-width:5.4;
}
.ze-divider--wave_hero_illus .ze-illus-accent2{
  stroke: currentColor;
  opacity:.55;
  stroke-width:3.4;
}

/* Bold variant (used by the hero "Illustrated Wave (bold)" option) */
.ze-divider--wave_hero_illus.ze-illus-bold .ze-illus-edge{opacity:.68;stroke-width:4.2}
.ze-divider--wave_hero_illus.ze-illus-bold .ze-illus-edge2{opacity:.36;stroke-width:8.2}
.ze-divider--wave_hero_illus.ze-illus-bold .ze-illus-hi{stroke-width:7.2}
.ze-divider--wave_hero_illus.ze-illus-bold .ze-illus-hi2{stroke-width:3.8;opacity:.62}
.ze-divider--wave_hero_illus.ze-illus-bold .ze-illus-dash{stroke-width:4.8}
.ze-divider--wave_hero_illus.ze-illus-bold .ze-illus-accent{stroke-width:6.2}
.ze-divider--wave_hero_illus.ze-illus-bold .ze-illus-accent2{stroke-width:4.0;opacity:.62}
/* Glass fade uses a premium frosted tint (optional override via Customizer) */
.ze-divider--glass_fade .ze-divider__svg{
  color: rgb(var(--ze-divider-glass-rgb, 255,255,255));
  filter: none;
}
/* Foam divider highlight polish */
.ze-divider--foam .ze-divider__svg{filter:none}
.ze-divider--foam .ze-divider__svg path:last-child{filter: blur(.2px)}


/* “Alt” sections: no straight borders (dividers handle edges) */
.section-alt{background:var(--alt)}
.section-alt.ze-section{background-color:var(--ze-sec-bg,var(--alt));color:var(--ze-sec-text,inherit)}

/* Prevent divider overlap at end of content */
.site-main .ze-section:last-of-type{margin-bottom:0}


/* -------------------------------------------------------------------------
   Scroll reveal (Customizer → Style → Animations)
   JS adds `ze-js` on <html> and toggles `.is-inview` as sections enter viewport.
   ------------------------------------------------------------------------- */
html.ze-js.ze-reveal body.ze-motion-on [data-ze-anim]{
  --ze-tx: 0px;
  --ze-ty: var(--ze-motion-dist, 18px);
  --ze-scale: 1;
  opacity: 0;
  transform: translate3d(var(--ze-tx), var(--ze-ty), 0) scale(var(--ze-scale));
  transition: opacity var(--ze-motion-dur, 520ms) var(--ze-motion-ease, cubic-bezier(.2,1,.2,1)),
              transform var(--ze-motion-dur, 520ms) var(--ze-motion-ease, cubic-bezier(.2,1,.2,1));
  will-change: opacity, transform;
}

html.ze-js body.ze-motion-on [data-ze-anim="none"]{opacity:1;transform:none}
html.ze-js body.ze-motion-on [data-ze-anim="fade"]{--ze-ty:0px}
html.ze-js body.ze-motion-on [data-ze-anim="fade-up"]{--ze-ty: var(--ze-motion-dist, 18px)}
html.ze-js body.ze-motion-on [data-ze-anim="slide-up"]{--ze-ty: calc(var(--ze-motion-dist, 18px) * 1.2)}
html.ze-js body.ze-motion-on [data-ze-anim="slide-l"]{--ze-ty:0px;--ze-tx: calc(var(--ze-motion-dist, 18px) * 1.2)}
html.ze-js body.ze-motion-on [data-ze-anim="slide-r"]{--ze-ty:0px;--ze-tx: calc(var(--ze-motion-dist, 18px) * -1.2)}
html.ze-js body.ze-motion-on [data-ze-anim="zoom"]{--ze-ty:0px;--ze-scale:.97}

html.ze-js body.ze-motion-on [data-ze-anim].is-inview{opacity:1;transform:translate3d(0,0,0) scale(1)}

@media (prefers-reduced-motion: reduce){
  html.ze-js body [data-ze-anim]{opacity:1!important;transform:none!important;transition:none!important}
}

.h1{font-size:clamp(28px,4vw,46px);line-height:1.05;margin:0 0 10px}
.h2{font-size:clamp(22px,3vw,30px);line-height:1.1;margin:0}
.h3{font-size:18px;line-height:1.2;margin:0}
.meta{font-size:12px;letter-spacing:.02em;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:12px;color:var(--muted)}
.link{color:var(--ze-link, var(--accent));text-decoration:none}
.link:hover{color:var(--ze-link-hover, var(--accent2));text-decoration:underline}

/* Optional per-section accent override (set via Customizer → Design & Layout → Sections & Dividers) */
.ze-section .link{color:var(--ze-sec-accent, rgba(255,255,255,.88))}
body.ze-mode-beach .ze-section .link{color:var(--ze-sec-accent, rgba(6,16,18,.82))}
.ze-section .link:hover{filter:brightness(1.08)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.site-header{
  position:relative;
  top:0;
  z-index:50;
  background: var(--ze-header-bg, rgba(5,7,10,.70));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ze-header-sticky .site-header{ position:sticky; }
.ze-header-overlay .site-header{
  position:absolute;
  left:0; right:0; top:0;
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(0);
}

.ze-header-overlay .site-header.is-scrolled{
  background: var(--ze-header-bg, rgba(5,7,10,.55));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
}

.site-header .container{
  padding-left: var(--ze-header-pad-x, 18px);
  padding-right: var(--ze-header-pad-x, 18px);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:14px;
  padding: var(--ze-header-pad-y, 12px) 0;
}

/* Make header content full width on large screens (optional toggle) */
.ze-header-full .site-header .container{max-width:none}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand-text{font-weight:900;letter-spacing:-0.02em}
.brand .custom-logo-link{display:flex;align-items:center;line-height:0}
.brand .custom-logo{height:var(--ze-logo-h, 42px);width:auto;display:block}

.nav-desktop{display:none;flex:1;justify-content:center}
.nav-links{list-style:none;display:flex;gap:10px;margin:0;padding:0;align-items:center;justify-content:center}
.nav-links li{margin:0;padding:0;display:flex;align-items:center}

.nav-links a{
  color: var(--ze-nav-link, rgba(255,255,255,.92));
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  letter-spacing:.01em;
  padding:10px 12px;
  border-radius:999px;
  position:relative;
  opacity:.92;
  display:inline-flex;
  align-items:center;
  line-height:1;
  transition: transform .15s ease, background .15s ease, color .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.nav-links a:hover{opacity:1;color: var(--ze-nav-hover, #fff);transform: translateY(-1px)}


/* Beach mode: dark header text on non-hero pages (transparent header is for hero only) */
body.ze-mode-beach:not(.ze-header-overlay) .nav-links a{color: rgba(6,16,18,.90)}
body.ze-mode-beach:not(.ze-header-overlay) .nav-links a:hover{color: rgba(6,16,18,1)}


/* Current menu item (keep it subtle but clear) */
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a{opacity:1}

/* Hover styles (Customizer) */
.ze-nav-hover-underline .nav-links a::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  background: var(--ze-nav-hover, var(--accent));
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .18s ease;
  opacity:.95;
}
.ze-nav-hover-underline .nav-links a:hover::after{transform:scaleX(1)}

.ze-nav-hover-pill .nav-links a:hover{
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.ze-nav-hover-glow .nav-links a:hover{
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 12px 30px rgba(0,0,0,.22);
}

.ze-nav-hover-none .nav-links a:hover{transform:none}
.ze-nav-hover-none .nav-links a::after{display:none}

.header-actions{display:flex;align-items:center;gap:10px}
.lang-switcher{display:flex;align-items:center;gap:8px}

.icon-btn{
  position:relative;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  color: var(--ze-nav-link, var(--text));
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
  text-decoration:none;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.icon-btn:hover{background:rgba(255,255,255,.12);color: var(--ze-nav-hover, #fff)}
.icon-btn .icon{display:block}

.cart-count{
  position:absolute;top:-6px;right:-6px;
  background:linear-gradient(90deg, rgba(245,158,11,.95), rgba(239,68,68,.85));
  border:1px solid rgba(255,255,255,.15);
  color:#000;
  font-weight:900;
  font-size:11px;
  padding:3px 6px;
  border-radius:999px;
}

.nav-toggle{
  appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.08);
  color: var(--ze-nav-link, var(--text));border-radius:999px;padding:10px 12px;cursor:pointer;
}
.nav-toggle:hover{background:rgba(255,255,255,.12);color: var(--ze-nav-hover, #fff)}
.nav-toggle-bars{display:block;width:18px;height:2px;background:currentColor;position:relative;border-radius:2px}
.nav-toggle-bars::before,.nav-toggle-bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;
}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}

.nav-mobile{
  border-top:0;
  background: var(--ze-header-bg, rgba(5,7,10,.84));
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform: translateY(-8px);
  transition: max-height .35s ease, opacity .22s ease, transform .22s ease;
}
.nav-mobile.is-open{
  border-top: 1px solid var(--line);
  opacity: 1;
  transform: translateY(0);
  max-height: 520px;
}
.nav-links-mobile{list-style:none;margin:0;padding:14px 0;display:flex;flex-direction:column;gap:12px}
.nav-links-mobile a{text-decoration:none;font-weight:800;opacity:.92;padding:10px 8px;border-radius:14px}
.nav-links-mobile a:hover{opacity:1;background:rgba(255,255,255,.08)}
.nav-mobile-lang{padding:0 0 16px}

@media (min-width: 980px){
  .nav-desktop{display:block}
  .nav-toggle{display:none}
}

/* Hero */
.hero{position:relative;min-height: calc(var(--ze-hero-min-vh, 78) * 1vh);display:flex;align-items:flex-end;border-bottom:0;overflow:hidden}
.hero[data-wave="none"]{border-bottom:1px solid var(--line)}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-video{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03)}
.hero-poster{width:100%;height:100%;background-size:cover;background-position:center}
.hero-overlay{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(1000px 500px at 20% 0%, rgba(231,189,108,.20), transparent 60%),
    radial-gradient(900px 520px at 80% 30%, rgba(23,195,206,.18), transparent 60%),
    linear-gradient(180deg,
      rgba(var(--ze-hero-overlay-rgb, 0,0,0), calc(var(--ze-hero-overlay-strength, .78) * .35)),
      rgba(var(--ze-hero-overlay-rgb, 0,0,0), var(--ze-hero-overlay-strength, .78))
    );
}
.hero-wave{position:absolute;left:0;width:100%;bottom:-2px;height:var(--ze-wave-height,72px);overflow:hidden;z-index:3;pointer-events:none;line-height:0;direction:ltr}
.hero-wave svg{display:block;width:100%;height:100%}
.hero-content{position:relative;z-index:2;padding:28px 0 calc(36px + (var(--ze-wave-height,72px) * .35));max-width:740px}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid var(--line);
  font-weight:800;font-size:12px;letter-spacing:.02em;
  color:var(--ze-hero-badge-color,#fff);
}
.hero-title{font-size:clamp(30px,4.2vw,54px);line-height:1.03;margin:14px 0 10px;letter-spacing:-0.02em;color:var(--ze-hero-title-color,#fff)}
.hero-sub{margin:0 0 18px;color:var(--ze-hero-sub-color, rgba(255,255,255,.82));font-size:clamp(14px,1.6vw,18px);line-height:1.45}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;font-weight:900;letter-spacing:-0.01em;
  padding:12px 16px;border-radius:16px;border:1px solid var(--line);
  background:rgba(255,255,255,.08);
}
.btn:hover{background:rgba(255,255,255,.12)}
.btn-primary{
  border-color: transparent;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  color:#fff;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--accent2) 26%, transparent);
}
.btn-primary:hover{filter:brightness(1.03)}
.btn-ghost{background:var(--card)}
.btn-outline{background:transparent}

.card{
  border:1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius2);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.card-pad{padding:18px}

/* Optional per-section surface override (cards) */
.ze-section .card,
.ze-section .event-card{background:var(--ze-sec-surface, var(--card))}
body.ze-mode-beach .ze-section .card,
body.ze-mode-beach .ze-section .event-card{
  background: var(--ze-sec-surface, rgba(255,255,255,.62));
  border-color: rgba(11,27,28,.10);
  box-shadow: 0 18px 60px rgba(11,27,28,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px}
.section-head .ze-section-title{color:var(--ze-sec-title, var(--ze-section-title, var(--ze-sec-ink, var(--text))));letter-spacing:-.02em}

/* Section heading alignment (Customizer → Style → Section headings align) */
body.ze-sec-title-center .section-head{flex-direction:column;align-items:center;text-align:center}
body.ze-sec-title-center .section-head .link{margin-top:4px}
body.ze-sec-title-right .section-head{text-align:right}
body.ze-sec-title-right .section-head .ze-section-title{text-align:right}

/* Welcome (Bali vibe) */
.ze-welcome{padding: 52px 0 12px}
.ze-welcome__inner{max-width: 920px;margin:0 auto;text-align:center}
.ze-welcome__kicker{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ze-welcome__title{margin:14px 0 10px;font-size:44px;line-height:1.05;letter-spacing:-.03em}
.ze-welcome__text{margin:0 auto 18px;max-width: 720px;color:var(--muted);font-size:16px;line-height:1.7}
.ze-welcome__actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* Beach preset: brighten cards + hero controls */
body.ze-mode-beach .card,
body.ze-mode-beach .event-card{
  background: rgba(255,255,255,.62);
  border-color: rgba(11,27,28,.10);
  box-shadow: 0 18px 60px rgba(11,27,28,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.ze-mode-beach .event-card__price{background:rgba(6,16,18,.72)}
body.ze-mode-beach .hero .badge{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.55);color:#061012}
body.ze-mode-beach .hero .btn-ghost{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.45);color:#061012}

.grid{display:grid;gap:14px}
.grid-4{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(1, minmax(0,1fr))}
@media (min-width: 720px){
  .grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (min-width: 980px){
  .grid-4{grid-template-columns:repeat(4, minmax(0,1fr))}
}

/* Event cards */
.event-card{border-radius:var(--radius2);overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.06)}
.event-card__link{text-decoration:none;display:block}
.event-card__media{position:relative;aspect-ratio:4/5;overflow:hidden}
.event-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.event-card:hover .event-card__media img{transform:scale(1.04)}
.event-card__placeholder{width:100%;height:100%;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}
.event-card__price{
  position:absolute;left:12px;bottom:12px;
  background:rgba(0,0,0,.60);
  border:1px solid rgba(255,255,255,.18);
  padding:8px 10px;border-radius:999px;font-weight:900;font-size:13px
}
.event-card__body{padding:14px}
.event-card__title{margin:0 0 8px;font-size:16px;line-height:1.2}
.event-card__meta{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid var(--line);
  font-size:12px;font-weight:900;color:rgba(255,255,255,.85);
}
.pill--soft{background:rgba(34,211,238,.10);border-color:rgba(34,211,238,.22)}

/* Upcoming events (premium collage)
   Desktop: 1 big + 3 stacked right
   Mobile: 2x2 touching grid with scroll-in collage animation */
.ze-upcoming-grid{
  display:grid;
  width:100%;
  gap:16px;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: repeat(3, minmax(180px, 1fr));
  align-items:stretch;
}
.ze-upcard{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius: var(--radius2);
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  text-decoration:none;
  transform: translateY(12px);
  opacity:0;
  transition: transform .65s ease, opacity .65s ease, filter .35s ease;
}
.ze-upcoming-grid.is-inview .ze-upcard{transform:none;opacity:1;}


@media (min-width: 861px){
  .ze-upcard:not(.ze-upcard--slot-1) .ze-upcard__actions{display:none;}
}
/* Upcard inner link + CTA actions (rotating featured) */
.ze-upcard__link{
  display:block;
  height:100%;
  position:relative;
  text-decoration:none;
  color:inherit;
}
.ze-upcard__actions{
  position:absolute;
  left:14px; right:14px; bottom:14px;
  display:flex;
  gap:10px;
  align-items:center;
  z-index:5;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}
.ze-upcard__actions .btn{
  padding:10px 12px;
  border-radius:999px;
  font-size:13px;
}
.ze-upcard--slot-1 .ze-upcard__actions{opacity:1;transform:none;}
.ze-upcard--slot-1 .ze-upcard__label{bottom:62px;}

@media (hover:hover) and (pointer:fine){
  .ze-upcard:hover .ze-upcard__actions,
  .ze-upcard:focus-within .ze-upcard__actions{opacity:1;transform:none;}
}


/* Positioning for the 4 cards
   IMPORTANT: the grid includes a <script type="application/json"> child for event data.
   Using :nth-child() breaks positioning because the script becomes the first child.
   We use :nth-of-type() so the first DIV card is treated as the featured item.
*/
.ze-upcoming-grid > .ze-upcard:nth-of-type(1){grid-column:1;grid-row:1 / 4;}
.ze-upcoming-grid > .ze-upcard:nth-of-type(2){grid-column:2;grid-row:1;}
.ze-upcoming-grid > .ze-upcard:nth-of-type(3){grid-column:2;grid-row:2;}
.ze-upcoming-grid > .ze-upcard:nth-of-type(4){grid-column:2;grid-row:3;}


/* Slot-based positioning (enables rotation without DOM reordering).
   We scope to the grid so it can override the :nth-of-type layout when needed. */
.ze-upcoming-grid .ze-upcard--slot-1{grid-column:1;grid-row:1 / 4;}
.ze-upcoming-grid .ze-upcard--slot-2{grid-column:2;grid-row:1;}
.ze-upcoming-grid .ze-upcard--slot-3{grid-column:2;grid-row:2;}
.ze-upcoming-grid .ze-upcard--slot-4{grid-column:2;grid-row:3;}


@media (min-width: 980px){
  .ze-upcoming-grid > .ze-upcard:nth-of-type(1), .ze-upcoming-grid .ze-upcard--slot-1{min-height: var(--ze-upcoming-featured-h, 520px);}
  .ze-upcoming-grid > .ze-upcard:nth-of-type(1) .ze-upcard__img, .ze-upcoming-grid .ze-upcard--slot-1 .ze-upcard__img{height:100%;aspect-ratio:auto;}
}

.ze-upcard__img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio: 16/10;}
.ze-upcoming-grid > .ze-upcard:nth-of-type(1) .ze-upcard__img, .ze-upcoming-grid .ze-upcard--slot-1 .ze-upcard__img{aspect-ratio: 16/10;}

.ze-upcard__img--placeholder{aspect-ratio: 16/10;background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));}

.ze-upcard__scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.00) 30%, rgba(0,0,0,.58) 100%);}
.ze-upcard__label{
  position:absolute;left:14px;right:14px;bottom:14px;
  padding:10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  color:#fff;
  font-weight: 900;
  letter-spacing: .2px;
  display:flex;
  flex-direction:column;

}
.ze-upcard__kicker{display:none;}
.ze-upcard__name{font-size:16px;line-height:1.1;}

/* On-brand label tint (keeps readability while feeling less "flat black") */
@supports (background: color-mix(in srgb, red, blue)){
  .ze-upcard__label{
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--accent2) 34%, rgba(0,0,0,.62)),
        color-mix(in srgb, var(--accent) 28%, rgba(0,0,0,.70))
      );
    border-color: rgba(255,255,255,.20);
  }
}

.ze-upcard__countdown{
  position:absolute;left:14px;top:14px;
  padding:8px 10px;border-radius:999px;
  background: rgba(0,0,0,.40);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  color:#fff;font-weight:950;font-size:12px;letter-spacing:.2px;
  opacity:1;transform:none;
  transition: opacity .22s ease, transform .22s ease;
}

/* Fun, on-brand countdown pill (safe fallback above; gradient where supported) */
.ze-upcard__countdown{
  box-shadow: 0 10px 26px rgba(0,0,0,.20);
}
@supports (background: color-mix(in srgb, red, blue)){
  .ze-upcard__countdown{
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 72%, rgba(0,0,0,.28)),
      color-mix(in srgb, var(--accent2) 72%, rgba(0,0,0,.28))
    );
    border-color: rgba(255,255,255,.22);
  }
}



/* Hover overlay with event text (desktop)
   On mobile there is no hover; we keep the label only. */
.ze-upcard__hover{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:18px;
  gap:10px;
  opacity:0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.ze-upcard__hover-title{font-weight:950;color:#fff;letter-spacing:.2px;font-size:18px;line-height:1.1}
.ze-upcard__hover-desc{color:rgba(255,255,255,.88);font-weight:700;line-height:1.35;max-width:46ch}
.ze-upcard__hover-cta{display:inline-flex;align-self:flex-start;padding:8px 10px;border-radius:999px;filter:brightness(1.03);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:900;font-size:12px;}

.ze-upcard:hover .ze-upcard__label,
.ze-upcard:focus-within .ze-upcard__label{opacity:0;transform: translateY(6px)}
.ze-upcard:hover .ze-upcard__hover,
.ze-upcard:focus-within .ze-upcard__hover{opacity:1;transform:none}

.ze-upcard__label{transition: opacity .22s ease, transform .22s ease;}

.ze-upcard:hover{transform: translateY(-4px); filter: brightness(1.02);}
.ze-upcard:hover .ze-upcard__img{transform: scale(1.04);}
.ze-upcard__img{transition: transform .35s ease;}

/* Collage animation: cards fly in from angles */
.ze-upcoming-grid.ze-collage > .ze-upcard:nth-of-type(1),
.ze-upcoming-grid.ze-collage .ze-upcard.ze-upcard--slot-1{transform: translate(-18px, 14px) rotate(-2deg);opacity:0;}
.ze-upcoming-grid.ze-collage > .ze-upcard:nth-of-type(2),
.ze-upcoming-grid.ze-collage .ze-upcard.ze-upcard--slot-2{transform: translate(18px, -12px) rotate(2deg);opacity:0;}
.ze-upcoming-grid.ze-collage > .ze-upcard:nth-of-type(3),
.ze-upcoming-grid.ze-collage .ze-upcard.ze-upcard--slot-3{transform: translate(-14px, 16px) rotate(1deg);opacity:0;}
.ze-upcoming-grid.ze-collage > .ze-upcard:nth-of-type(4),
.ze-upcoming-grid.ze-collage .ze-upcard.ze-upcard--slot-4{transform: translate(14px, 16px) rotate(-1deg);opacity:0;}
.ze-upcoming-grid.ze-collage.is-inview .ze-upcard{transform:none;opacity:1;}


/* Slot-based collage transforms (when slot classes are present) */
.ze-upcoming-grid.ze-collage .ze-upcard--slot-1{transform: translate(-18px, 14px) rotate(-2deg);opacity:0;}
.ze-upcoming-grid.ze-collage .ze-upcard--slot-2{transform: translate(18px, -12px) rotate(2deg);opacity:0;}
.ze-upcoming-grid.ze-collage .ze-upcard--slot-3{transform: translate(-14px, 16px) rotate(1deg);opacity:0;}
.ze-upcoming-grid.ze-collage .ze-upcard--slot-4{transform: translate(14px, 16px) rotate(-1deg);opacity:0;}


/* Mobile: 2x2 touching grid */
@media (max-width: 860px){
  /* Make this section feel full-bleed on mobile (≈98% width) */
  #events .container{padding-left:6px;padding-right:6px;}

  .ze-upcoming-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap:0;
    border-radius: 22px;
    overflow:hidden;
  }
  .ze-upcard{border-radius:0;box-shadow:none;}
  .ze-upcard:nth-child(1),
  .ze-upcard:nth-child(2),
  .ze-upcard:nth-child(3),
  .ze-upcard:nth-child(4),
  .ze-upcard--slot-1,
  .ze-upcard--slot-2,
  .ze-upcard--slot-3,
  .ze-upcard--slot-4{grid-column:auto;grid-row:auto;}

  .ze-upcard__img,
  .ze-upcard__img--placeholder{aspect-ratio: 1/1;}
  .ze-upcard__label{left:10px;right:10px;bottom:10px;font-size:14px;}

  /* No CTA buttons on mobile (tap the image/card) */
  .ze-upcard__actions{display:none !important;}
  .ze-upcard--slot-1 .ze-upcard__label{bottom:10px;}

  /* Subtle separators while still "touching" */
  .ze-upcard{outline: 1px solid rgba(255,255,255,.08); outline-offset: -1px;}
}

/* Beach preset: brighter collage cards */
body.ze-mode-beach .ze-upcard{background:rgba(255,255,255,.84)}

/* Blog cards */
.card-link{text-decoration:none;display:block}
.card-media{aspect-ratio:16/10;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:16px}

/* Prose (blog + pages) */
.prose{max-width:760px;font-size:16px;width:100%}
body.page .prose{max-width:var(--ze-page-width, 1100px)}
body.page .prose > *{max-width:100%}
body.page .prose .wp-block-image, body.page .prose .wp-block-gallery{max-width:100%}
@media (max-width: 900px){body.page .prose{max-width:100%}}
.ze-prose--wide{max-width:var(--container)}
@media (max-width: 900px){.ze-prose--wide{max-width:100%}}


.prose > *{max-width:100%}
.prose p{line-height:1.75;color:color-mix(in srgb, var(--text) 88%, transparent);margin:0 0 14px}
.prose a{color:var(--ze-link, var(--accent));text-decoration:none}
.prose a:hover{color:var(--ze-link-hover, var(--accent2));text-decoration:underline;text-underline-offset:3px}
.prose h1,.prose h2,.prose h3{color:var(--text)}
.prose h2{margin-top:26px;margin-bottom:10px}
.prose h3{margin-top:22px;margin-bottom:8px}
.prose blockquote{
  margin:18px 0;
  padding:14px 16px;
  border-left:4px solid color-mix(in srgb, var(--accent) 60%, transparent);
  background: var(--card);
  border-radius: 18px;
  color: color-mix(in srgb, var(--text) 88%, transparent);
}
.prose hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.prose img{border-radius:var(--radius2)}

/* Blog & page content as a premium “reading card” */
body.single-post .prose,
body.page .prose{
  margin: 0 auto;
  padding: 22px 20px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius2);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 720px){
  body.single-post .prose,
  body.page .prose{padding: 28px 28px}
}
body.ze-mode-beach.single-post .prose,
body.ze-mode-beach.page .prose{
  background: rgba(255,255,255,.62);
  border-color: rgba(11,27,28,.10);
  box-shadow: 0 18px 60px rgba(11,27,28,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ze-hero-image{position:relative;overflow:hidden;border-radius:var(--radius2);margin:14px 0 18px}
.ze-hero-image img{display:block;width:100%;height:auto;position:relative;z-index:1;border-radius:var(--radius2)}
.ze-image-halo{
  position:absolute;
  inset:-22%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  filter: blur(42px) saturate(1.15);
  opacity:.55;
  transform: scale(1.1);
  pointer-events:none;
  z-index:0;
}
.hero-image{border-radius:var(--radius2);overflow:hidden;margin:16px 0;border:1px solid var(--line)}
.list{margin:12px 0 0;padding-left:18px}
.list li{margin:6px 0;color:color-mix(in srgb, var(--text) 82%, transparent)}

.pagination{margin-top:18px}

/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  padding:34px 0 18px;
  background:var(--ze-footer-bg,var(--panel));
  color:var(--ze-footer-text,var(--text));
}
.footer-inner{display:flex;flex-direction:column;gap:18px}
.footer-title{font-weight:900}
.footer-links{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap}
.footer-links a{text-decoration:none;opacity:.86;font-weight:800;color:var(--ze-footer-link,var(--accent))}
.footer-links a:hover{opacity:1}
.footer-bottom{padding-top:14px;border-top:1px solid var(--line);margin-top:18px}
@media (min-width: 980px){
  .footer-inner{flex-direction:row;justify-content:space-between;align-items:flex-start}
}

/* Social links */
.ze-social{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.ze-social__link{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid rgba(255,255,255,.18);
  border-radius:999px;text-decoration:none;
  color:inherit;opacity:.92;font-weight:800
}
.ze-social__link:hover{opacity:1}
.ze-social__icon{width:16px;height:16px;display:block}

/* Hero slider fallback (mobile / reduced motion) */
.hero-media--slider{display:none}
.hero-slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;
  animation: heroFade 15s infinite;
}
.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:5s}
.hero-slide:nth-child(3){animation-delay:10s}
.hero-slide:nth-child(4){animation-delay:15s}
.hero-slide:nth-child(5){animation-delay:20s}
@keyframes heroFade{
  0%, 18%{opacity:1}
  30%, 100%{opacity:0}
}
@media (max-width: 768px), (prefers-reduced-motion: reduce){
  .hero-content{padding-top:84px;}

  .hero{min-height:72vh}
  .hero-content{padding-bottom:28px}
  .hero-media--video[data-hide-on-mobile="1"]{display:none}
  .hero-media--slider{display:block}
}

/* WooCommerce polish */
.woocommerce .woocommerce-breadcrumb{opacity:.85}
.woocommerce .woocommerce-notices-wrapper{margin-bottom:12px}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0}
@media (min-width: 980px){
  .woocommerce ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.woocommerce ul.products li.product{
  list-style:none;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--radius2);
  padding:12px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-weight:900}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit{
  border-radius:16px;
  border:1px solid transparent;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  color:#fff;
  font-weight:900;
  padding:12px 16px;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.woocommerce a.button:active, .woocommerce button.button:active, .woocommerce input.button:active{
  filter: brightness(.98);
  transform: translateY(0);
}
.woocommerce .quantity .qty{
  border-radius:14px;
  border:1px solid var(--line);
  background: var(--card2);
  color:var(--text);
  padding:10px 12px;
}
.woocommerce input.input-text, .woocommerce textarea{
  width:100%;
  border-radius:14px;
  border:1px solid var(--line);
  background: var(--card2);
  color:var(--text);
  padding:12px 12px;
}
.woocommerce .woocommerce-checkout .form-row label{font-weight:800}
.woocommerce table.shop_table{
  border:1px solid var(--line);
  border-radius:var(--radius2);
  overflow:hidden;
  background: var(--card);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td{
  border-top:1px solid var(--line);
}


@media (min-width: 980px){
  body.ze-wc-checkout-two-col .woocommerce form.checkout{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:18px;
    align-items:start;
  }
  body.ze-wc-checkout-two-col .woocommerce form.checkout #customer_details{grid-column:1}
  body.ze-wc-checkout-two-col .woocommerce form.checkout .woocommerce-checkout-review-order{
    grid-column:2;
    position: sticky;
    top: 92px;
  }
}

/* Cart / Checkout cards */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce .woocommerce-checkout-review-order,
.woocommerce .woocommerce-checkout-payment{
  border:1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius2);
  padding:14px;
}

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error{
  border-radius: var(--radius2);
}

/* Single product (premium layout + mobile-first) */
body.single-product .woocommerce div.product:not(.ze-product){
  display:grid;
  gap:18px;
}
@media (min-width: 980px){
  body.single-product .woocommerce div.product:not(.ze-product){
    grid-template-columns: 1.05fr .95fr;
    gap:24px;
    align-items:start;
  }
  body.single-product .woocommerce div.product:not(.ze-product) .summary{
    position: sticky;
    top: 92px;
  }
}

body.single-product .woocommerce div.product:not(.ze-product) .woocommerce-product-gallery,
body.single-product .woocommerce div.product:not(.ze-product) .summary{
  border:1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius2);
  padding:18px;
}

body.single-product .woocommerce div.product:not(.ze-product) .woocommerce-product-gallery{
  overflow:hidden;
}
body.single-product .woocommerce div.product:not(.ze-product) .woocommerce-product-gallery .flex-viewport{
  border-radius: 22px;
  overflow:hidden;
}

/* Template override (woocommerce/content-single-product.php): halo gallery + sticky buy box */
body.single-product .ze-product{
  display:block;
}
body.single-product .ze-product__grid{
  display:grid;
  gap:18px;
}
@media (min-width: 980px){
  body.single-product .ze-product__grid{
    grid-template-columns: 1.1fr .9fr;
    gap:24px;
    align-items:start;
  }
  body.single-product .ze-product__buy{
    position: sticky;
    top: 92px;
  }
}

body.single-product .ze-product__media{position:relative}
body.single-product .ze-product__halo{
  position:absolute;
  inset:-22%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(42px) saturate(1.15);
  opacity: .55;
  transform: scale(1.1);
  pointer-events:none;
}
body.single-product .ze-product__gallery{
  position: relative;
  z-index: 1;
  padding: 18px;
  overflow:hidden;
}
body.single-product .ze-product__gallery .woocommerce-product-gallery{margin:0}
body.single-product .ze-product__gallery .woocommerce-product-gallery .flex-viewport{
  border-radius: 24px;
  overflow:hidden;
}
body.single-product .ze-product__buy{
  border:1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius2);
}
body.ze-mode-beach.single-product .ze-product__buy,
body.ze-mode-beach.single-product .ze-product__gallery{
  border-color: rgba(11,27,28,.10);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.single-product .ze-product__below{margin-top: 22px}

body.single-product .woocommerce .product_title{
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.05;
  margin: 0 0 6px;
  color: var(--text);
}
body.single-product .woocommerce .product .price{
  font-size: 20px;
  font-weight: 900;
  margin: 10px 0 16px;
  color: color-mix(in srgb, var(--text) 92%, transparent);
}

body.single-product .woocommerce div.product form.cart{
  margin: 12px 0 8px;
}
body.single-product .woocommerce div.product form.cart .variations{
  margin: 0 0 10px;
}
body.single-product .woocommerce div.product form.cart .variations td,
body.single-product .woocommerce div.product form.cart .variations th{
  padding: 6px 0;
}
body.single-product .woocommerce div.product form.cart .variations select{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card2);
  padding: 12px 12px;
}
body.single-product .woocommerce div.product form.cart .quantity{margin-right:10px}
body.single-product .woocommerce div.product form.cart .single_add_to_cart_button{
  width: 100%;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 18px;
}

body.single-product .woocommerce .product_meta{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

/* Tabs as a clean card */
body.single-product .woocommerce div.product .woocommerce-tabs{
  margin-top: 20px;
  border:1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius2);
  padding: 12px 14px;
}
body.single-product .woocommerce div.product .woocommerce-tabs ul.tabs{
  margin: 0 0 12px;
  padding: 0;
}
body.single-product .woocommerce div.product .woocommerce-tabs .panel{
  margin: 0;
}



/* Andy Events calendar — theme polish + readability */
.andy-cal{
  --andy-accent: var(--ze-cal-accent, var(--accent)) !important;
  --andy-ink: var(--ze-cal-ink, #103532) !important;
}

.ze-cal-tabs-glass .andy-cal-tabs .andy-cal-tab{
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(14px);
  border:1px solid rgba(16,53,50,.14);
}
.ze-cal-tabs-glass .andy-cal-tabs .andy-cal-tab.is-active{
  background: linear-gradient(135deg, var(--andy-accent), rgba(255,255,255,.92));
  box-shadow: 0 18px 44px rgba(0,0,0,.14);
  border-color: rgba(255,255,255,.22);
}

.ze-cal-density-compact .andy-cal-cell{ min-height: 92px !important; }
.ze-cal-density-compact .andy-cal-pill{ padding: 8px 9px !important; }

/* =========================
   PDP Share (single source)
   ========================= */
body.single-product .ze-share{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

body.single-product .ze-share__label{
  font-weight:900;
  opacity:.9;
  margin-right: 2px;
}

body.single-product .ze-share__btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  background: var(--card);
  color:inherit;
  padding:10px 12px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
  line-height:1;
}

body.ze-mode-beach.single-product .ze-share__btn{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
}

body.single-product .ze-share__btn:hover{transform: translateY(-1px)}
body.single-product .ze-share__btn:active{transform: translateY(0)}


/* Map section layout (fills space + adds info panel on desktop) */
.ze-map-grid{
  display: grid;
  gap: 22px;
  align-items: stretch;
}
@media (min-width: 980px){
  .ze-map-grid{
    grid-template-columns: 420px 1fr;
  }
}
.ze-map-info{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 !important;
  min-height: 420px;
}
@media (min-width: 980px){
  .ze-map-info{min-height: 520px;}
}
.ze-map-body{
  position: relative;
  padding: 22px;
}
.ze-map-info--poster{
  background: radial-gradient(1200px 560px at 10% 15%, rgba(255,255,255,.45), rgba(255,255,255,0)),
              linear-gradient(180deg, rgba(210,240,255,.85), rgba(255,255,255,.25));
}
.ze-map-info--poster .ze-map-media{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(1.06) contrast(1.03);
}
.ze-map-info--poster .ze-map-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(15,32,36,.55));
}
.ze-map-info--poster .ze-map-body{
  color: rgba(255,255,255,.96);
  text-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.ze-map-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 10px;
}
.ze-map-points{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 14px;
  line-height: 1.35;
  opacity: .95;
}
.ze-map-points li{
  display: flex;
  gap: 10px;
}
.ze-map-points li::before{
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ze-accent,var(--accent,#13a3a0)) 70%, #fff);
  margin-top: 6px;
  flex: 0 0 9px;
}
.ze-map-info--poster .btn{
  box-shadow: 0 18px 60px rgba(0,0,0,.20);
}
.ze-map-info--poster .btn-ghost{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
}
.ze-map-info--poster .btn-ghost:hover{
  background: rgba(255,255,255,.20);
}
.ze-map-info--poster .ze-map-note{opacity:.82;}


.ze-map-info .ze-map-title{
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.15;
}
.ze-map-info .ze-map-text{
  font-size: 15px;
  line-height: 1.5;
  opacity: .92;
}
.ze-map-actions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ze-map-note{
  margin-top: 14px;
  font-size: 13px;
  opacity: .7;
}
.ze-map-embed{
  padding: 0 !important;
  overflow: hidden;
}
.ze-map-embed iframe{
  width: 100% !important;
  max-width: 100% !important;
  display: block;
  border: 0;
  min-height: 420px;
}
@media (min-width: 980px){
  .ze-map-embed iframe{
    min-height: 520px;
  }
}

/* Generic embed safety */
.ze-embed iframe, .ze-embed embed, .ze-embed object{
  width: 100% !important;
  max-width: 100% !important;
}
/* Calendar shortcode should use full available width on pages */
body.page .prose .andy-calendar{max-width:100% !important;width:100% !important}


/* Upcoming Events – mobile polish (bigger, cleaner, no CTA buttons) */
@media (max-width: 760px){
  .ze-section--events > .container{max-width:none;width:98vw;padding-left:0;padding-right:0}
  .ze-upcoming-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap:14px;
  }
  /* Disable the desktop "featured" spanning layout on mobile */
  .ze-upcard--slot-1,.ze-upcard--slot-2,.ze-upcard--slot-3,.ze-upcard--slot-4{
    grid-column:auto;
    grid-row:auto;
  }
  .ze-upcard__actions{display:none!important}
  .ze-upcard--slot-1 .ze-upcard__label{bottom:14px;}
  .ze-upcard__img{aspect-ratio: 1 / 1.1;}
}

/* =========================
   PDP Gallery – FIX stacked big images + keep 8px thumbs gap
   ========================= */

/* Layout: main image then thumbs with an 8px rhythm */
body.single-product .ze-product__gallery .woocommerce-product-gallery{
  display:flex !important;
  flex-direction:column !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* Main viewport */
body.single-product .ze-product__gallery .woocommerce-product-gallery .flex-viewport{
  margin: 0 !important;
  height: auto !important;
  border-radius: 24px;
  overflow: hidden;
}

/* IMPORTANT FIX:
   If the gallery JS isn’t initialised, Woo outputs multiple .woocommerce-product-gallery__image
   inside the wrapper. We only want the FIRST one as the “main” image.
   (When flexslider IS active, this selector won’t break it.) */
body.single-product .ze-product__gallery .woocommerce-product-gallery:not(.flexslider)
.woocommerce-product-gallery__wrapper > *:not(:first-child){
  display: none !important;
}

/* Make the first image fill the card */
body.single-product .ze-product__gallery .woocommerce-product-gallery__wrapper,
body.single-product .ze-product__gallery .woocommerce-product-gallery__image,
body.single-product .ze-product__gallery .woocommerce-product-gallery__image a{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

body.single-product .ze-product__gallery .woocommerce-product-gallery__wrapper img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 24px;
}

/* Optional: remove magnifier */
body.single-product .ze-product__gallery .woocommerce-product-gallery__trigger{
  display:none !important;
}

/* Thumbnails: neat row, no extra margin, 8px gap */
body.single-product{
  --ze-pdp-thumb-cols: 5;
  --ze-pdp-thumb-cols-m: 4;
  --ze-pdp-thumb-gap: 4px;
}

body.single-product .ze-product__gallery .flex-control-thumbs,
body.single-product .ze-product__gallery .flex-control-nav.flex-control-thumbs{
  list-style:none !important;
  display:flex !important;
  flex-wrap:wrap;
  gap: var(--ze-pdp-thumb-gap) !important;
  justify-content:flex-start !important;
  margin:0 !important;
  padding:0 !important;
}

body.single-product .ze-product__gallery .flex-control-thumbs li,
body.single-product .ze-product__gallery .flex-control-nav.flex-control-thumbs li{
  float:none !important;
  margin:0 !important;
  width: calc((100% - (var(--ze-pdp-thumb-gap) * (var(--ze-pdp-thumb-cols) - 1))) / var(--ze-pdp-thumb-cols)) !important;
}

@media (max-width: 768px){
  body.single-product .ze-product__gallery .flex-control-thumbs li,
  body.single-product .ze-product__gallery .flex-control-nav.flex-control-thumbs li{
    width: calc((100% - (var(--ze-pdp-thumb-gap) * (var(--ze-pdp-thumb-cols-m) - 1))) / var(--ze-pdp-thumb-cols-m)) !important;
  }
}

body.single-product .ze-product__gallery .flex-control-thumbs img,
body.single-product .ze-product__gallery .flex-control-nav.flex-control-thumbs img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  border-radius:14px;
  cursor:pointer;
}
/* --- PDP gallery: tighten space between main image + thumbs --- */
body.single-product .ze-product__gallery .woocommerce-product-gallery{
  gap: 0 !important;                 /* remove double-spacing */
}

body.single-product .ze-product__gallery .woocommerce-product-gallery .flex-viewport{
  margin: 0 !important;              /* kill any bottom margin */
}

body.single-product .ze-product__gallery .flex-control-nav.flex-control-thumbs,
body.single-product .ze-product__gallery .flex-control-thumbs,
body.single-product .ze-product__gallery .thumbnails{
  margin-top: 8px !important;        /* the exact gap you want */
}
/* --- Ensure thumbs are actually clickable --- */
body.single-product .ze-product__gallery .flex-control-thumbs,
body.single-product .ze-product__gallery .flex-control-thumbs li,
body.single-product .ze-product__gallery .flex-control-thumbs li a,
body.single-product .ze-product__gallery .flex-control-thumbs img{
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 5;
}



/* Woo gallery fallback (when JS isn't initialised): show one large image and prevent stacking. */
body.single-product .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper > *{
  display:block;
}
body.single-product .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper > *:not(:first-child){
  display:none;
}
body.single-product .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper img{
  opacity:1;
  visibility:visible;
}

/* Flexslider sometimes collapses height when thumbs are restyled */
body.single-product .woocommerce-product-gallery .flex-viewport{
  height:auto !important;
  min-height: 260px;
}
@media (min-width: 980px){
  body.single-product .woocommerce-product-gallery .flex-viewport{
    min-height: 420px;
  }
  /* Product page tokens (Customizer will override) */
body.single-product{
  --ze-pdp-thumb-cols: 5;
  --ze-pdp-thumb-cols-m: 3;
}

/* Thumbs across using variables */
body.single-product .woocommerce-product-gallery .flex-control-thumbs li,
body.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li{
  width: calc((100% / var(--ze-pdp-thumb-cols)) - 10px) !important;
}
@media (max-width: 768px){
  body.single-product .woocommerce-product-gallery .flex-control-thumbs li,
  body.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li{
    width: calc((100% / var(--ze-pdp-thumb-cols-m)) - 10px) !important;
  }
}
/* =========================
   Andy two-stage cart tidy
   ========================= */
body.single-product form.cart.andy-two-stage{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin: 12px 0 8px;
}

/* Variations table: keep label + field clean */
body.single-product form.cart.andy-two-stage .variations{
  width:100%;
  margin: 0 0 8px !important;
  border-collapse:separate;
  border-spacing:0;
}

body.single-product form.cart.andy-two-stage .variations th.label{
  padding: 6px 12px 6px 0;
  vertical-align: top;
  width: 38%;
}

body.single-product form.cart.andy-two-stage .variations td.value{
  padding: 6px 0;
  display:flex;              /* THIS stops “touching” */
  flex-direction:column;
  gap:8px;                   /* select -> qty gap */
}

/* Select full width */
body.single-product form.cart.andy-two-stage .variations select{
  width:100% !important;
  max-width:100%;
  height:44px;
  border-radius:14px;
}

/* Qty look + no manual margin hacks */
body.single-product form.cart.andy-two-stage .quantity{margin:0 !important}
body.single-product form.cart.andy-two-stage .quantity input.qty,
body.single-product form.cart.andy-two-stage #andy_upgrade_qty{
  width:92px;
  min-width:92px;
  height:44px;
  margin:0 !important;
}

/* If button is inside .qty-wrap, align nicely */
body.single-product form.cart.andy-two-stage .qty-wrap{
  display:grid;
  grid-template-columns: 92px 1fr;
  gap:12px;
  align-items:center;
  margin-top: 2px;
}

/* If button is outside, still make it full width */
body.single-product form.cart.andy-two-stage .single_add_to_cart_button{
  width:100%;
  justify-content:center;
  margin-top: 8px;
  margin-bottom: 8px;
}


/* Make sure variations section has breathing room */
body.single-product form.cart.andy-two-stage .variations{
  margin: 0 0 8px !important;
}

/* Row that contains qty + button */
body.single-product form.cart.andy-two-stage .qty-wrap{
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Remove the hacky margin on the input so it aligns */
body.single-product form.cart.andy-two-stage .qty-wrap .quantity input.qty,
body.single-product form.cart.andy-two-stage #andy_upgrade_qty{
  margin-top: 0 !important;
}
/* --- Gallery: reduce gap between main image and thumbnails --- */
body.single-product .woocommerce-product-gallery{
  gap: 8px !important;  /* if your gallery is flex column */
}

body.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs,
body.single-product .woocommerce-product-gallery .flex-control-thumbs,
body.single-product .woocommerce-product-gallery .thumbnails{
  margin-top: 8px !important;
  padding-top: 0 !important;
}
/* =========================
   PDP Gallery – tighten + full width
   ========================= */

/* Make the gallery stack cleanly with an 8px rhythm */
body.single-product .ze-product__gallery .woocommerce-product-gallery{
  display:flex !important;
  flex-direction:column !important;
  gap: 8px !important;              /* main image -> thumbs */
  margin: 0 !important;
}

/* Kill any default spacing that creates the big gap */
body.single-product .ze-product__gallery .woocommerce-product-gallery .flex-viewport{
  margin: 0 !important;
  height: auto !important;
  border-radius: 24px;
  overflow: hidden;
}

/* Force the main image area to be FULL width (prevents the “floating image” look) */
body.single-product .ze-product__gallery .woocommerce-product-gallery__wrapper,
body.single-product .ze-product__gallery .woocommerce-product-gallery__image,
body.single-product .ze-product__gallery .woocommerce-product-gallery__image a{
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
  padding: 0 !important;
}

/* Make the image actually fill the viewport */
body.single-product .ze-product__gallery .woocommerce-product-gallery__wrapper img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 24px;
}

/* OPTIONAL: if you want a consistent “event hero” crop, uncomment these 2 lines */
/*
body.single-product .ze-product__gallery .flex-viewport{ aspect-ratio: 16/10; }
body.single-product .ze-product__gallery .woocommerce-product-gallery__wrapper img{ height:100% !important; object-fit:cover; }
*/

/* Remove the magnifier / zoom icon (optional but looks cleaner) */
body.single-product .ze-product__gallery .woocommerce-product-gallery__trigger{
  display:none !important;
}

/* Thumbnails: neat row, no weird margins, 8px gap */
body.single-product{
  --ze-pdp-thumb-cols: 5;
  --ze-pdp-thumb-cols-m: 4;
  --ze-pdp-thumb-gap: 4px;
}

body.single-product .ze-product__gallery .flex-control-thumbs,
body.single-product .ze-product__gallery .flex-control-nav.flex-control-thumbs{
  list-style:none !important;
  display:flex !important;
  flex-wrap:wrap;
  gap:8px !important;
  margin:0 !important;              /* IMPORTANT: removes the extra gap */
  padding:0 !important;
}

body.single-product .ze-product__gallery .flex-control-thumbs li,
body.single-product .ze-product__gallery .flex-control-nav.flex-control-thumbs li{
  float:none !important;
  margin:0 !important;
  width: calc((100% / var(--ze-pdp-thumb-cols)) - 8px) !important;
}

@media (max-width: 768px){
  body.single-product .ze-product__gallery .flex-control-thumbs li,
  body.single-product .ze-product__gallery .flex-control-nav.flex-control-thumbs li{
    width: calc((100% / var(--ze-pdp-thumb-cols-m)) - 8px) !important;
  }
}

body.single-product .ze-product__gallery .flex-control-thumbs img,
body.single-product .ze-product__gallery .flex-control-nav.flex-control-thumbs img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  border-radius:14px;
  cursor:pointer;
}
/* ------------------------------------------------------------------
   CLICK FIX: prevent overlays/dividers from blocking links
------------------------------------------------------------------- */

/* Dividers must never capture clicks */
.ze-divider,
.ze-divider * {
  pointer-events: none !important;
}

/* Common overlay layers used by cards/hero should not block clicks */
.ze-upcard__bg,
.ze-upcard__media,
.ze-upcard__overlay,
.ze-upcard__hover,
.ze-card__bg,
.ze-card__media,
.ze-card__overlay,
.ze-card__hover,
.ze-hero__overlay,
.ze-hero__media,
.ze-hero__wave,
.ze-hero__wave * {
  pointer-events: none !important;
}

/* Make sure cards can layer correctly */
.ze-upcard,
.ze-card {
  position: relative;
}

/* Full-card clickable hit area (you add this anchor in markup below) */
.ze-card__hit,
.ze-upcard__hit {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  display: block;
}

/* If you have buttons inside cards, keep them above the hit layer */
.ze-upcard button,
.ze-upcard .ze-btn,
.ze-card button,
.ze-card .ze-btn,
.ze-upcard a.ze-btn,
.ze-card a.ze-btn {
  position: relative;
  z-index: 6;
}


/* === Zante Events hotfix: product gallery thumbs spacing === */
:root{
  --ze-pdp-thumb-cols: 4;
  --ze-pdp-thumb-gap: 8px;
}

body.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs,
body.single-product .woocommerce-product-gallery .flex-control-thumbs,
body.single-product .ze-product__gallery .flex-control-nav.flex-control-thumbs,
body.single-product .ze-product__gallery .flex-control-thumbs{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  gap: var(--ze-pdp-thumb-gap) !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li,
body.single-product .woocommerce-product-gallery .flex-control-thumbs li,
body.single-product .ze-product__gallery .flex-control-nav.flex-control-thumbs li,
body.single-product .ze-product__gallery .flex-control-thumbs li{
  margin: 0 !important;
  padding: 0 !important;
  width: calc((100% - (var(--ze-pdp-thumb-gap) * (var(--ze-pdp-thumb-cols) - 1))) / var(--ze-pdp-thumb-cols)) !important;
  max-width: calc((100% - (var(--ze-pdp-thumb-gap) * (var(--ze-pdp-thumb-cols) - 1))) / var(--ze-pdp-thumb-cols)) !important;
  flex: 0 0 calc((100% - (var(--ze-pdp-thumb-gap) * (var(--ze-pdp-thumb-cols) - 1))) / var(--ze-pdp-thumb-cols)) !important;
}

body.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img,
body.single-product .woocommerce-product-gallery .flex-control-thumbs img,
body.single-product .ze-product__gallery .flex-control-nav.flex-control-thumbs img,
body.single-product .ze-product__gallery .flex-control-thumbs img{
  display:block !important;
  width:100% !important;
  height:auto !important;
}

@media (max-width: 640px){
  :root{ --ze-pdp-thumb-cols: 4; --ze-pdp-thumb-gap: 6px; }
}