/* Wayne Buildi Products Hero Block - scoped styles */
.whb,.whb *{box-sizing:border-box}
.whb{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;--whb-panel-width:320px;--whb-panel-max-height:460px;--whb-panel-bg:rgba(30,30,30,.60);--whb-panel-blur:16px;--whb-panel-border:rgba(255,255,255,.25);--whb-panel-radius:16px;--whb-panel-shadow-color:rgba(0,0,0,.30);--whb-panel-shadow:none;--whb-panel-text:#fff;--whb-panel-cta-bg:#111;--whb-panel-cta-text:#fff;--whb-logo-banner-bg:#fff;--whb-logo-align:flex-start}
.whb-hero,.wayne-hero-wrapper{position:relative;width:100%;height:100vh;min-height:560px;overflow:hidden;color:#fff;isolation:isolate}

/* Background sequence zoom. JavaScript drives --whb-sequence-zoom so uploaded frames and zoom stay perfectly synced. */
.whb-bg,.wayne-hero-media{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;transform-origin:50% 50%;transform:scale(calc(1 + (var(--whb-sequence-zoom,0) * var(--whb-sequence-zoom-amount,.32))));transition:transform-origin 500ms ease;will-change:transform;z-index:0}
.whb-bg__img,.whb-bg__sequence,.whb-bg__video,.whb-hotspot-overstate,.wayne-hero-media img,.wayne-hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--whb-pan-x,50%) center;background-size:cover;background-position:var(--whb-pan-x,50%) center;display:block;transform:none!important;transition:object-position 220ms ease,background-position 220ms ease!important;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.whb-bg__sequence{z-index:0}
.whb-bg__img{z-index:0}
.whb-hotspot-overstate{z-index:3;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 500ms ease,visibility 500ms ease!important;will-change:opacity}
.whb-hotspot-overstate.is-visible{opacity:1;visibility:visible}
.whb.is-sequence-animating .whb-hotspot-overstate,.whb.is-modal-open .whb-hotspot-overstate{opacity:0!important;visibility:hidden!important}
.whb-bg__overlay{position:absolute;inset:0;pointer-events:none;z-index:1}
.whb-modal-overlay{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;border-radius:0;background:rgba(0,0,0,.5)!important;opacity:0;visibility:hidden;pointer-events:none;cursor:pointer;z-index:10;transition:opacity 350ms ease,visibility 350ms ease}
.whb.is-modal-open .whb-modal-overlay{opacity:1;visibility:visible;pointer-events:auto}

/* First-paint geometry guard. Hotspots remain hidden only until JavaScript
   has the real source aspect ratio and has positioned them against object-fit:cover. */
.whb.is-layout-pending .whb-hotspot{opacity:0!important;pointer-events:none!important;transition:none!important}
.whb.is-layout-pending .whb-mobile-hotspot-scroll{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

.whb.is-sequence-animating .whb-hero__text,.whb.is-sequence-animating .whb-hotspots-layer,.whb.is-sequence-animating .whb-tabbar,.whb.is-sequence-animating .whb-mobile-hotspot-scroll{opacity:0!important;pointer-events:none;transition-duration:80ms!important}

/* Hero text */
.whb-hero__text{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;flex-direction:column;padding:6vh 8vw 0;max-width:100%;gap:.75rem;pointer-events:none;transition:opacity 350ms ease}
.whb.is-modal-open .whb-hero__text{opacity:.18;pointer-events:none}
.whb-hero.is-vmid .whb-hero__text{top:50%;transform:translateY(-60%)}
.whb-hero__text > *{pointer-events:auto;max-width:680px}
.whb-headline{font-size:clamp(1.75rem,4.5vw,4rem);line-height:1.05;margin:0;font-weight:800;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.whb-sub{font-size:clamp(1rem,1.4vw,1.25rem);margin:0;opacity:.95;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.whb-cta{display:inline-block;margin-top:.5rem;padding:.85rem 1.5rem;border-radius:999px;font-weight:600;text-decoration:none;transition:transform .2s ease,filter .2s ease;align-self:flex-start}
.whb-cta:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* Hotspots: percentage-positioned inside the same wrapper as the media. Colors are PHP inline/scoped only. */
.whb-hotspots-layer,.wayne-hotspots-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;pointer-events:none}
.whb-hotspot,.wayne-hotspot{position:absolute;width:46px;height:46px;transform:translate(-50%,-50%) scale(1);border:0!important;border-radius:50%!important;background:transparent!important;background-color:transparent!important;appearance:none;-webkit-appearance:none;box-shadow:none!important;outline:none;cursor:pointer;z-index:5;padding:0!important;margin:0;opacity:1;pointer-events:auto;transition:opacity 650ms ease,filter 250ms ease,transform 780ms cubic-bezier(.16,1,.3,1)}
.whb.is-sequence-animating .whb-hotspot{opacity:0!important;transform:translate(-50%,-50%) scale(.72)!important;pointer-events:none!important;transition-duration:80ms!important}
.whb-hotspot:hover,.whb-hotspot:focus,.whb-hotspot:active,.whb-hotspot.is-active,.wayne-hotspot:hover,.wayne-hotspot:focus,.wayne-hotspot:active{background:transparent!important;background-color:transparent!important;border:0!important;border-radius:50%!important;box-shadow:none!important;outline:none}
.whb-hotspot:hover{filter:brightness(1.08)}
.whb-hotspot:focus-visible{outline:2px solid var(--hotspot-color);outline-offset:7px}
.whb-hotspot.is-hidden{opacity:0;pointer-events:none}
.whb-hotspot.is-active{z-index:20}
.whb-hotspot__dot,.hotspot-circle{position:absolute;top:50%;left:50%;width:46px;height:46px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:none;pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--hotspot-icon-color);background:var(--hotspot-color)!important;background-color:var(--hotspot-color)!important;transition:background-color 300ms ease,background 300ms ease}
.whb-hotspot.is-active .whb-hotspot__dot,.whb-hotspot.is-active .hotspot-circle{background:var(--hotspot-active-color)!important;background-color:var(--hotspot-active-color)!important}
.whb-hotspot__icon{display:flex;align-items:center;justify-content:center;width:19px;height:19px;color:var(--hotspot-icon-color);line-height:1}
.whb-hotspot__icon i{font-size:19px;color:var(--hotspot-icon-color);line-height:1}
.whb-hotspot__icon svg{display:block;width:19px;height:19px;fill:currentColor;color:var(--hotspot-icon-color)}
.whb-hotspot__ring,.hotspot-pulse{position:absolute;top:50%;left:50%;width:49px;height:49px;border-radius:50%;background:transparent!important;border:2px solid var(--hotspot-color);box-shadow:0 0 0 3px var(--hotspot-color);opacity:0;transform:translate(-50%,-50%) scale(.85);pointer-events:none;transition:border-color 300ms ease,box-shadow 300ms ease}
.whb-hotspot.is-active .whb-hotspot__ring,.whb-hotspot.is-active .hotspot-pulse{border-color:var(--hotspot-active-color);box-shadow:0 0 0 3px var(--hotspot-active-color)}
.whb-hotspot.is-pulse .whb-hotspot__ring{animation:whb-pulse 1.8s ease-out infinite}
@keyframes whb-pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.42}100%{transform:translate(-50%,-50%) scale(1.95);opacity:0}}
@keyframes whb-arrow-pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* Horizontal image pan control: hidden until JavaScript detects off-screen hotspots. */
.whb-mobile-hotspot-scroll{display:none}
.whb.has-pan-overflow .whb-mobile-hotspot-scroll{position:absolute;left:0;right:0;bottom:calc(max(88px,20%) + 72px);z-index:9;display:flex;align-items:center;gap:12px;padding:8px 16px;background:rgba(0,0,0,.18);pointer-events:auto;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.whb-mobile-pan-range{flex:1;min-width:0;accent-color:#fff;cursor:grab}
.whb-mobile-pan-range:active{cursor:grabbing}
.whb-mobile-hotspot-arrow{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px;border:0;border-radius:50%;background:rgba(0,0,0,.24);padding:0;cursor:pointer;animation:whb-arrow-pulse 1.4s ease-in-out infinite}
.whb-mobile-hotspot-arrow::before{content:"";display:block;width:11px;height:11px;border-top:2px solid rgba(255,255,255,.95);border-right:2px solid rgba(255,255,255,.95)}
.whb-mobile-hotspot-arrow--left::before{transform:rotate(-135deg);margin-left:4px}
.whb-mobile-hotspot-arrow--right::before{transform:rotate(45deg);margin-right:4px}

/* Tab bar */
.whb-tabbar{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;height:20%;min-height:88px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow-x:auto;scrollbar-width:none;white-space:nowrap;transition:opacity 350ms ease}
.whb-tabbar::-webkit-scrollbar{display:none}
.whb-tab{flex:1 0 140px;min-width:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;background:transparent!important;border:0;border-bottom:3px solid transparent;border-radius:0;color:#fff;font:600 .95rem/1 inherit;cursor:pointer;padding:.75rem 1rem;transition:color 250ms ease,border-color 250ms ease,opacity 250ms ease}
.whb-tab:hover,.whb-tab:focus,.whb-tab:active,.whb-tab.is-active{background:transparent!important;background-color:transparent!important;box-shadow:none!important}
.whb-tab:hover{opacity:.86}
.whb-tab.is-active{border-bottom-color:rgba(255,255,255,.75);color:inherit!important}
.whb-tab__icon{font-size:22px;display:inline-flex}
.whb-tab__icon svg{width:1em;height:1em;fill:currentColor}

/* Glassmorphism info popup. Desktop position is set dynamically by JavaScript beside the clicked hotspot. */
.whb-panel{position:absolute;left:50%;top:50%;width:min(var(--whb-panel-width),calc(100% - 2rem));max-width:calc(100% - 2rem);max-height:min(var(--whb-panel-max-height),82vh);z-index:30;background:var(--whb-panel-bg)!important;color:var(--whb-panel-text)!important;backdrop-filter:blur(var(--whb-panel-blur)) saturate(180%);-webkit-backdrop-filter:blur(var(--whb-panel-blur)) saturate(180%);border:1px solid var(--whb-panel-border);border-radius:var(--whb-panel-radius);box-shadow:var(--whb-panel-shadow,none);overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-50%) scale(.96);transition:opacity 350ms ease,visibility 350ms ease,transform 350ms ease,left 350ms ease,top 350ms ease;overscroll-behavior:contain}
.whb-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.whb-panel__handle{display:none}
.whb-panel__close{position:absolute;top:12px;right:12px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.12);padding:0;margin:0;line-height:1;font-size:16px;color:#111;cursor:pointer;z-index:3;transition:background 200ms ease,transform 200ms ease}
.whb-panel__close span,.whb-panel__close svg,.whb-panel__close i{display:block;line-height:1;margin:0;padding:0;flex:0 0 auto}
.whb-panel__close:hover{background:rgba(0,0,0,.20);transform:scale(1.04)}
.whb-panel__inner{padding:1.125rem 1rem 1rem;color:var(--whb-panel-text)}
.whb-panel:has(.whb-cta--panel) .whb-panel__inner{padding-bottom:1rem}
.whb-panel__logo-banner{display:flex;align-items:center;justify-content:var(--whb-logo-align);width:100%;background:var(--whb-logo-banner-bg);padding:16px 20px;border-radius:var(--whb-panel-radius) var(--whb-panel-radius) 0 0;border-bottom:1px solid rgba(255,255,255,.22)}
.whb-panel__logo{max-height:54px;width:auto;margin:0;display:block;filter:none}
.whb-panel__name{font-size:1.2rem;margin:.1rem 0 .3rem;font-weight:800;letter-spacing:-.01em;color:var(--whb-panel-text)}
.whb-panel__desc{margin:0 0 .8rem;color:var(--whb-panel-text);opacity:.86;line-height:1.42;font-size:.86rem}
.whb-badge{display:inline-block;background:rgba(255,255,255,.18);color:var(--whb-panel-text);font-size:.66rem;font-weight:700;padding:.2rem .5rem;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.45rem;border:1px solid rgba(255,255,255,.22)}

.whb-features{list-style:none;padding:0;margin:0 0 .9rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem .55rem}
.whb-features li{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--whb-panel-text)}
.whb-features__ic{color:var(--whb-panel-text);display:inline-flex;opacity:.92}
.whb-features__ic svg{width:.9em;height:.9em;fill:currentColor}

.whb-video{display:inline-flex;align-items:center;gap:.45rem;border:1px solid rgba(255,255,255,.18);padding:.35rem .62rem;background:rgba(255,255,255,.12);border-radius:999px;color:var(--whb-panel-text);font-weight:700;font-size:.76rem;line-height:1;cursor:pointer;margin:.25rem 0 .8rem;box-shadow:none}
.whb-video__play{width:24px;height:24px;min-width:24px;min-height:24px;border-radius:50%;background:#ff0000;color:#fff;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.whb-video__play svg{display:block;width:13px;height:13px;fill:currentColor;margin-left:1px}

.whb-products__heading{font-size:.82rem;font-weight:800;line-height:1.2;margin:.25rem 0 .45rem;color:var(--whb-panel-text)}
.whb-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.38rem;margin-bottom:.8rem;max-height:220px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) transparent;padding-right:4px}
.whb-products::-webkit-scrollbar{width:6px}
.whb-products::-webkit-scrollbar-track{background:transparent}
.whb-products::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4);border-radius:999px}
.whb-product{border:1px solid rgba(255,255,255,.16);border-radius:8px;overflow:hidden;background:rgba(255,255,255,.10);display:flex;align-items:center;gap:.42rem;min-width:0;padding:.28rem}
.whb-product__img{flex:0 0 60px;display:block}
.whb-product__img img{display:block;width:60px!important;height:60px!important;aspect-ratio:1/1;object-fit:cover;border-radius:6px}
.whb-product__body{padding:0;display:flex;flex-direction:column;gap:.08rem;flex:1;min-width:0}
.whb-product__name,.whb-panel .wayne-product-title,.whb-panel .woocommerce-loop-product__title,.whb-panel h2.woocommerce-loop-product__title,.whb-panel h3.woocommerce-loop-product__title{font-weight:650;font-size:.62rem!important;color:var(--whb-panel-text)!important;text-decoration:none;line-height:1.12;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
.whb-product__price,.whb-panel .price,.whb-panel .amount{font-size:.62rem;color:var(--whb-panel-text)!important;opacity:.84;line-height:1.1}
.whb-product__price .amount{font-weight:750;color:var(--whb-panel-text)!important}
.whb-cta--panel{display:block;width:100%;background:var(--whb-panel-cta-bg)!important;color:var(--whb-panel-cta-text)!important;padding:14px 20px;font-size:.86rem;font-weight:800;text-align:center;margin:0;border-radius:0 0 var(--whb-panel-radius) var(--whb-panel-radius)}

/* Elementor editor preview: first panel can remain visible for styling without a click. */
.whb.is-editor-preview .whb-modal-overlay{opacity:1;visibility:visible;pointer-events:none}
.whb.is-editor-preview .whb-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;background:var(--whb-panel-bg,rgba(30,30,30,.6))!important}

/* Lightbox */
.whb-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:50;padding:2vw}
.whb-lightbox.is-open{display:flex}
.whb-lightbox__frame{width:min(960px,100%);aspect-ratio:16/9}
.whb-lightbox__frame iframe{width:100%;height:100%;border:0;border-radius:8px}
.whb-lightbox__close{position:absolute;top:1rem;right:1rem;background:transparent;border:0;color:#fff;font-size:2.5rem;cursor:pointer;line-height:1}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px){
  .whb-headline{font-size:36px}
  .whb-sub{font-size:16px}
  .whb-hotspot{width:42px;height:42px}
  .whb-hotspot__dot{width:42px;height:42px}
  .whb-hotspot__ring{width:45px;height:45px}
  .whb-hotspot__icon,.whb-hotspot__icon svg{width:17px;height:17px}
  .whb-hotspot__icon i{font-size:17px}
  .whb-panel{width:min(var(--whb-panel-width),340px)!important;max-width:340px!important}
  .whb-panel.is-centered-tablet{left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%) scale(1)!important}
  .whb-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .whb.has-pan-overflow .whb-mobile-hotspot-scroll{bottom:136px}
  .whb-tabbar,.wayne-tab-bar{display:flex;flex-direction:row;overflow:visible;flex-wrap:nowrap;height:auto;min-height:76px}
  .whb-tab{flex:1 1 25%;min-width:0;width:25%;padding:10px 8px;font-size:13px;white-space:normal}
  .whb-tab__icon{font-size:18px}
}

/* Mobile */
@media (max-width: 767px){
  .whb-hero{height:100svh;min-height:520px;position:relative}
  .whb.is-modal-open .whb-bg{transform:scale(1.08)}
  .whb-hero__text{padding:96px 6vw 0}
  .whb-headline{font-size:clamp(24px,7.4vw,32px);line-height:1.08}
  .whb-sub{font-size:clamp(13px,3.8vw,16px);line-height:1.4}
  .whb-hotspot{width:36px;height:36px}
  .whb-hotspot__dot{width:36px;height:36px}
  .whb-hotspot__ring{width:39px;height:39px}
  .whb-hotspot__icon,.whb-hotspot__icon svg{width:13px;height:13px}
  .whb-hotspot__icon i{font-size:13px}
  .whb.has-pan-overflow .whb-mobile-hotspot-scroll{bottom:224px}
  .whb-tabbar,.wayne-tab-bar{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;width:100%;height:auto;min-height:140px;overflow:visible;white-space:normal;flex-wrap:initial}
  .whb-tab{min-width:0;width:100%;height:70px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;padding:14px 10px;gap:.35rem}
  .whb-tab__icon{font-size:20px}
  .whb-panel,.whb-panel.is-open{position:absolute!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-width:100%!important;max-height:75vh;border-radius:18px 18px 0 0;transform:translateY(100%)!important;transition:opacity 350ms ease,visibility 350ms ease,transform 350ms ease!important}
  .whb-panel.is-open{transform:translateY(0)!important;opacity:1;visibility:visible;pointer-events:auto}
  .whb-panel__handle{display:block;width:42px;height:4px;border-radius:999px;background:rgba(255,255,255,.5);margin:10px auto 2px}
  .whb-panel__inner{padding:1rem 1rem 1.15rem}
  .whb-features{grid-template-columns:1fr}
  .whb-products{grid-template-columns:1fr;max-height:160px}
  .whb-product__img{flex-basis:56px}
  .whb-product__img img{width:56px!important;height:56px!important}
}


/* 2.0.21: sequence-demo modal behavior.
   The info window now opens centered after the sequence animation, and hotspots
   remain hidden while that centered window is open. */
.whb.is-modal-open:not(.is-editor-preview) .whb-hotspot{
  opacity:0!important;
  transform:translate(-50%,-50%) scale(.72)!important;
  pointer-events:none!important;
}
.whb.is-modal-open:not(.is-editor-preview) .whb-panel,
.whb.is-modal-open:not(.is-editor-preview) .whb-panel.is-open{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:min(var(--whb-panel-width),calc(100% - 2rem))!important;
  max-width:calc(100% - 2rem)!important;
  max-height:min(var(--whb-panel-max-height),82vh)!important;
  border-radius:var(--whb-panel-radius)!important;
}
.whb.is-modal-open:not(.is-editor-preview) .whb-panel{
  transform:translate(-50%,-50%) scale(.96)!important;
}
.whb.is-modal-open:not(.is-editor-preview) .whb-panel.is-open{
  transform:translate(-50%,-50%) scale(1)!important;
}


/* 2.0.23: mobile media-plane tuning.
   Desktop remains unchanged. On phones the hero media/video stage sits at the
   top of the block and uses a controlled 2x-wide cover crop: roughly half of
   the 16:9 image is visible instead of either extreme full-height cropping or
   full-width contain letterboxing. Hotspots share this same stage. */
@media (max-width: 767px){
  .whb{
    --whb-mobile-stage-height:min(100svh,112.5vw);
  }

  .whb-hero{
    min-height:100svh!important;
  }

  .whb-bg,
  .wayne-hero-media{
    top:0!important;
    bottom:auto!important;
    height:var(--whb-mobile-stage-height)!important;
    min-height:0!important;
  }

  .whb-hotspots-layer,
  .wayne-hotspots-layer{
    top:0!important;
    bottom:auto!important;
    height:var(--whb-mobile-stage-height)!important;
  }

  .whb-bg__img,
  .whb-bg__sequence,
  .whb-bg__video,
  .wayne-hero-media img,
  .wayne-hero-media video{
    object-fit:cover!important;
    object-position:var(--whb-pan-x,50%) center!important;
    background-size:cover!important;
    background-position:var(--whb-pan-x,50%) center!important;
  }

  .whb.is-modal-open .whb-bg,
  .whb.is-modal-open .wayne-hero-media{
    transform:scale(calc(1 + (var(--whb-sequence-zoom,0) * var(--whb-sequence-zoom-amount,.32))))!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-panel,
  .whb.is-modal-open:not(.is-editor-preview) .whb-panel.is-open{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:100%!important;
    max-width:100%!important;
    max-height:78svh!important;
    border-radius:18px 18px 0 0!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-panel{
    transform:translateY(100%)!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-panel.is-open{
    transform:translateY(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-panel__handle{
    display:block!important;
  }
}


/* 2.0.24: mobile bottom menu and panel tuning.
   Desktop remains unchanged. On phones, the dark tab menu is moved up directly
   under the top media stage so it covers the empty gap, and the popup becomes
   a safe, scrollable bottom sheet that cannot be cut off by the viewport. */
@media (max-width: 767px){
  .whb{
    --whb-mobile-tabbar-height:140px;
  }

  .whb-hero,
  .wayne-hero-wrapper{
    height:auto!important;
    min-height:calc(var(--whb-mobile-stage-height) + var(--whb-mobile-tabbar-height))!important;
  }

  .whb-tabbar,
  .wayne-tab-bar{
    position:absolute!important;
    top:calc(var(--whb-mobile-stage-height) - 1px)!important;
    bottom:auto!important;
    left:0!important;
    right:0!important;
    height:var(--whb-mobile-tabbar-height)!important;
    min-height:var(--whb-mobile-tabbar-height)!important;
    z-index:8!important;
    background:rgba(0,0,0,.22)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
  }

  .whb.has-pan-overflow .whb-mobile-hotspot-scroll{
    bottom:auto!important;
    top:calc(var(--whb-mobile-stage-height) - 54px)!important;
    z-index:9!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-panel,
  .whb.is-modal-open:not(.is-editor-preview) .whb-panel.is-open{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:max(8px, env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - 16px - env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    border-radius:18px!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-panel{
    transform:translateY(calc(100% + 24px))!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-panel.is-open{
    transform:translateY(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-panel__inner{
    padding-bottom:calc(1.15rem + env(safe-area-inset-bottom))!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-products{
    max-height:min(28dvh,180px)!important;
  }
}


/* 2.0.25: mobile pan/menu refinements.
   Desktop is intentionally untouched. On mobile the tab menu becomes a
   horizontal scroller so no buttons disappear, the pan slider has a much
   larger touch target, the media itself can be dragged left/right, and image
   panning no longer eases separately from hotspot positioning. */
@media (max-width: 767px){
  .whb-tabbar,
  .wayne-tab-bar{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    height:104px!important;
    min-height:104px!important;
    max-height:104px!important;
    padding:0 8px!important;
    gap:0!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .whb-tabbar::-webkit-scrollbar,
  .wayne-tab-bar::-webkit-scrollbar{
    display:none;
  }

  .whb-tab,
  .wayne-tab-bar .whb-tab{
    flex:0 0 118px!important;
    width:118px!important;
    min-width:118px!important;
    max-width:118px!important;
    height:104px!important;
    padding:10px 8px!important;
    font-size:12px!important;
    line-height:1.15!important;
    white-space:normal!important;
  }

  .whb-tab__icon{
    font-size:19px!important;
  }

  .whb{
    --whb-mobile-tabbar-height:104px;
  }

  .whb-bg,
  .wayne-hero-media{
    touch-action:pan-y!important;
    cursor:grab;
  }

  .whb.is-mobile-panning .whb-bg,
  .whb.is-mobile-panning .wayne-hero-media{
    cursor:grabbing;
  }

  .whb-bg__img,
  .whb-bg__sequence,
  .whb-bg__video,
  .wayne-hero-media img,
  .wayne-hero-media video{
    transition:none!important;
  }

  .whb.has-pan-overflow .whb-mobile-hotspot-scroll{
    min-height:58px!important;
    padding:12px 18px!important;
    gap:14px!important;
    touch-action:none!important;
  }

  .whb-mobile-pan-range{
    height:44px!important;
    min-height:44px!important;
    padding:14px 0!important;
    cursor:grab!important;
    touch-action:none!important;
  }

  .whb-mobile-pan-range:active{
    cursor:grabbing!important;
  }

  .whb-mobile-pan-range::-webkit-slider-runnable-track{
    height:8px;
    border-radius:999px;
  }

  .whb-mobile-pan-range::-webkit-slider-thumb{
    width:34px;
    height:34px;
    margin-top:-13px;
  }

  .whb-mobile-pan-range::-moz-range-track{
    height:8px;
    border-radius:999px;
  }

  .whb-mobile-pan-range::-moz-range-thumb{
    width:34px;
    height:34px;
    border-radius:50%;
  }

  .whb-mobile-hotspot-arrow{
    width:44px!important;
    height:44px!important;
    flex-basis:44px!important;
  }
}

/* 2.0.26: mobile/tablet tuning.
   Desktop remains unchanged. These rules only apply to phone layouts where the
   menu sits below the media, plus coarse-pointer tablet pan support. */
@media (max-width: 767px){
  .whb{
    --whb-mobile-tabbar-height:156px;
    --whb-open-panel-height:0px;
  }

  .whb-hero,
  .wayne-hero-wrapper{
    overflow:visible!important;
    background:#000!important;
    min-height:calc(var(--whb-mobile-stage-height) + var(--whb-mobile-tabbar-height) + var(--whb-open-panel-height))!important;
  }

  /* When the menu is below the image/sequence area it should feel like a solid
     black control section, not a desktop glass overlay. */
  .whb-tabbar,
  .wayne-tab-bar{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,78px)!important;
    grid-auto-flow:row!important;
    overflow:visible!important;
    white-space:normal!important;
    height:var(--whb-mobile-tabbar-height)!important;
    min-height:var(--whb-mobile-tabbar-height)!important;
    max-height:var(--whb-mobile-tabbar-height)!important;
    padding:0!important;
    gap:0!important;
    background:#000!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .whb-tab,
  .wayne-tab-bar .whb-tab{
    flex:initial!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:78px!important;
    min-height:78px!important;
    padding:9px 6px!important;
    font-size:12px!important;
    line-height:1.12!important;
    white-space:normal!important;
    overflow:hidden!important;
  }

  .whb-tab__icon{
    font-size:18px!important;
  }

  /* Mobile popup now opens below the media + black menu, and the hero reserves
     real page height so the next Elementor section cannot cover the panel. */
  .whb.is-modal-open:not(.is-editor-preview) .whb-panel,
  .whb.is-modal-open:not(.is-editor-preview) .whb-panel.is-open{
    position:absolute!important;
    left:8px!important;
    right:8px!important;
    top:calc(var(--whb-mobile-stage-height) + var(--whb-mobile-tabbar-height) + 12px)!important;
    bottom:auto!important;
    width:auto!important;
    max-width:none!important;
    max-height:none!important;
    overflow:visible!important;
    border-radius:18px!important;
    transform:translateY(18px)!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-panel.is-open{
    transform:translateY(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-panel__inner{
    padding-bottom:1.15rem!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-products{
    max-height:none!important;
    overflow:visible!important;
  }
}

/* iPad / coarse pointer pan support without changing desktop mouse layouts. */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1180px){
  .whb-bg,
  .wayne-hero-media{
    touch-action:pan-y!important;
    cursor:grab;
  }

  .whb.is-mobile-panning .whb-bg,
  .whb.is-mobile-panning .wayne-hero-media{
    cursor:grabbing;
  }

  .whb-bg__img,
  .whb-bg__sequence,
  .whb-bg__video,
  .wayne-hero-media img,
  .wayne-hero-media video{
    transition:none!important;
  }

  .whb.has-pan-overflow .whb-mobile-hotspot-scroll{
    min-height:58px!important;
    padding:12px 18px!important;
    gap:14px!important;
    touch-action:none!important;
  }

  .whb-mobile-pan-range{
    height:44px!important;
    min-height:44px!important;
    padding:14px 0!important;
    cursor:grab!important;
    touch-action:none!important;
  }

  .whb-mobile-pan-range::-webkit-slider-runnable-track{
    height:8px;
    border-radius:999px;
  }

  .whb-mobile-pan-range::-webkit-slider-thumb{
    width:34px;
    height:34px;
    margin-top:-13px;
  }

  .whb-mobile-pan-range::-moz-range-track{
    height:8px;
    border-radius:999px;
  }

  .whb-mobile-pan-range::-moz-range-thumb{
    width:34px;
    height:34px;
    border-radius:50%;
  }
}

/* 2.0.27: mobile overlay/panel/pan fixes and hotspot logo/background controls.
   Desktop keeps the established centered modal/media behavior. */
.whb-hotspot__dot,
.hotspot-circle{
  background:transparent!important;
  background-color:transparent!important;
  overflow:hidden;
  backdrop-filter:blur(var(--hotspot-blur,0px));
  -webkit-backdrop-filter:blur(var(--hotspot-blur,0px));
}

.whb-hotspot__dot::before,
.hotspot-circle::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:var(--hotspot-color)!important;
  background-color:var(--hotspot-color)!important;
  opacity:var(--hotspot-bg-opacity,1);
  pointer-events:none;
  z-index:0;
}

.whb-hotspot.is-active .whb-hotspot__dot::before,
.whb-hotspot.is-active .hotspot-circle::before{
  background:var(--hotspot-active-color)!important;
  background-color:var(--hotspot-active-color)!important;
}

.whb-hotspot__icon{
  position:relative;
  z-index:2;
}

.whb-hotspot__logo{
  display:block;
  max-width:76%;
  max-height:76%;
  width:auto;
  height:auto;
  object-fit:contain;
  opacity:1!important;
  filter:none!important;
  pointer-events:none;
}

@media (max-width: 767px){
  .whb,
  .whb-hero,
  .wayne-hero-wrapper{
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

  .whb{
    --whb-open-panel-height:0px!important;
  }

  .whb-hero,
  .wayne-hero-wrapper{
    min-height:calc(var(--whb-mobile-stage-height) + var(--whb-mobile-tabbar-height))!important;
  }

  .whb-hotspots-layer,
  .wayne-hotspots-layer{
    overflow:hidden!important;
    max-width:100vw!important;
  }

  .whb-bg,
  .wayne-hero-media{
    overflow:hidden!important;
    max-width:100vw!important;
  }

  .whb-bg__img,
  .whb-bg__sequence,
  .whb-bg__video,
  .wayne-hero-media img,
  .wayne-hero-media video{
    max-width:none!important;
  }

  /* The modal click catcher should not look like a black spacer/block over the
     sequence on mobile. It remains clickable but visually transparent. */
  .whb.is-modal-open .whb-modal-overlay{
    background:transparent!important;
    opacity:1!important;
    z-index:20!important;
  }

  /* Mobile hotspot window: float over the image/menu area, below the site header,
     instead of opening below the sequence. This avoids the Elementor section below
     covering it while still leaving a little of the sequence visible above. */
  .whb.is-modal-open:not(.is-editor-preview) .whb-panel,
  .whb.is-modal-open:not(.is-editor-preview) .whb-panel.is-open{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    top:max(84px, calc(env(safe-area-inset-top) + 68px))!important;
    bottom:max(12px, env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:18px!important;
    z-index:9999!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-panel{
    transform:translateY(16px) scale(.985)!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-panel.is-open{
    transform:translateY(0) scale(1)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-panel__inner{
    padding-bottom:calc(1.15rem + env(safe-area-inset-bottom))!important;
  }

  .whb.is-modal-open:not(.is-editor-preview) .whb-products{
    max-height:min(34dvh,240px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  .whb-tabbar,
  .wayne-tab-bar{
    touch-action:manipulation!important;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 1180px){
  .whb,
  .whb-hero,
  .wayne-hero-wrapper{
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

  .whb-hotspots-layer,
  .wayne-hotspots-layer,
  .whb-bg,
  .wayne-hero-media{
    overflow:hidden!important;
  }
}


/* 2.0.29: safe mobile/tablet collapsed-space fix.
   The previous 2.0.29 height clamp could clip the active media layer on some
   mobile/tablet layouts. This version only removes the reserved popup height
   when no modal is open and does not force max-height on the media stage. */
@media (max-width: 767px){
  .whb:not(.is-modal-open){
    --whb-open-panel-height:0px!important;
    padding-bottom:0!important;
    margin-bottom:0!important;
    overflow-x:hidden!important;
  }

  .whb:not(.is-modal-open) .whb-panel{
    display:none!important;
  }

  .whb:not(.is-modal-open) .whb-hero,
  .whb:not(.is-modal-open) .wayne-hero-wrapper{
    min-height:calc(var(--whb-mobile-stage-height) + var(--whb-mobile-tabbar-height))!important;
  }

  .whb.is-modal-open .whb-hero,
  .whb.is-modal-open .wayne-hero-wrapper{
    overflow:visible!important;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1180px){
  .whb:not(.is-modal-open){
    --whb-open-panel-height:0px!important;
    padding-bottom:0!important;
    margin-bottom:0!important;
  }
}

/* 2.0.44: configurable first-load Lottie overlay. The built-in spinner remains
   visible if no custom animation is selected or if the uploaded file cannot load. */
.whb{
  --whb-loader-size:150px;
  --whb-loader-background:rgba(0,0,0,.34);
  --whb-mobile-panel-top:max(132px,calc(env(safe-area-inset-top) + 98px));
}

.whb-initial-loader{
  position:absolute;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--whb-loader-background);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 320ms ease,visibility 320ms ease;
}

.whb.is-initial-loading .whb-initial-loader{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.whb-initial-loader__animation{
  position:relative;
  width:var(--whb-loader-size);
  height:var(--whb-loader-size);
  max-width:72vw;
  max-height:72vw;
}

.whb-initial-loader__canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%!important;
  height:100%!important;
  opacity:0;
  transition:opacity 180ms ease;
}

.whb-initial-loader.has-custom-lottie .whb-initial-loader__canvas{
  opacity:1;
}

.whb-initial-loader__fallback{
  position:absolute;
  left:50%;
  top:50%;
  width:52px;
  height:52px;
  margin:-26px 0 0 -26px;
  border:4px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  border-radius:50%;
  animation:whb-loader-spin .8s linear infinite;
  opacity:1;
  transition:opacity 180ms ease;
}

.whb-initial-loader.has-custom-lottie .whb-initial-loader__fallback{
  opacity:0;
}

@keyframes whb-loader-spin{
  to{transform:rotate(360deg)}
}

/* 2.0.44 mobile popup/header and scroll-chain correction. JavaScript updates
   --whb-mobile-panel-top from the actual visible sticky/fixed header height. */
@media (max-width:767px){
  .whb.is-modal-open:not(.is-editor-preview) .whb-panel,
  .whb.is-modal-open:not(.is-editor-preview) .whb-panel.is-open{
    top:var(--whb-mobile-panel-top)!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-behavior:auto!important;
  }

  /* Use one continuous mobile scroll container. Nested product scrolling was
     trapping the gesture before the page could continue below the popup. */
  .whb.is-modal-open:not(.is-editor-preview) .whb-products{
    max-height:none!important;
    overflow:visible!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .whb-initial-loader,
  .whb-initial-loader__canvas,
  .whb-initial-loader__fallback{
    transition:none!important;
  }
}

/* 2.0.46: the mobile popup is modal again. Its own content can scroll, but
   scrolling stops at the popup boundaries and the underlying page remains fixed. */
@media (max-width:767px){
  .whb.is-modal-open.is-mobile-page-locked:not(.is-editor-preview) .whb-panel,
  .whb.is-modal-open.is-mobile-page-locked:not(.is-editor-preview) .whb-panel.is-open{
    overscroll-behavior-y:contain!important;
  }
}