:root{--hanis-hero-bg:#eee9ff;--hanis-hero-bg-2:#fff;--hanis-hero-accent:#7456c8;--hanis-hero-text:#202437}.hanis-product-hero{--hanis-active-scale:1;--hanis-active-rotate-z:0deg;--hanis-side-offset:66%;--hanis-side-depth:-90px;--hanis-side-rotate-y:34deg;--hanis-side-tilt-z:8deg;--hanis-side-scale:.72;--hanis-side-opacity:.42;--hanis-side-blur:1.7px;--hanis-far-offset:118%;--hanis-far-rotate-y:50deg;--hanis-far-scale:.5;--hanis-far-opacity:.12;--hanis-far-blur:5px;--hanis-transition-duration:720ms;--hanis-transition-easing:cubic-bezier(.2,.72,.2,1);--hanis-edge-width:16%;--hanis-global-image-rotation:0deg;--hanis-button-lift:2px;position:relative;width:100%;min-height:620px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 75% 35%,rgba(255,255,255,.85),transparent 26%),linear-gradient(120deg,var(--hanis-hero-bg),var(--hanis-hero-bg-2));color:var(--hanis-hero-text)}.hanis-product-hero:before{content:"";position:absolute;inset:auto 0 0;height:28%;z-index:-1;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.36))}.hanis-product-hero__inner{width:100%;max-width:1320px;min-height:inherit;margin:0 auto;padding:20px 28px;display:flex;align-items:center;gap:64px}.hanis-product-hero__copy{position:relative;z-index:8;flex:0 0 44%;max-width:44%;padding:52px 0}.hanis-product-hero__eyebrow{margin-bottom:15px;font-size:12px;line-height:1;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:color-mix(in srgb,var(--hanis-hero-text) 72%,transparent)}.hanis-product-hero__highlight{display:inline-flex;margin-bottom:18px;padding:8px 13px;border-radius:999px;background:color-mix(in srgb,var(--hanis-hero-accent) 14%,transparent);color:var(--hanis-hero-accent);font-size:11px;line-height:1;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.hanis-product-hero__title{max-width:680px;margin:0;color:var(--hanis-hero-text);font-family:Georgia,"Times New Roman",serif;font-size:clamp(3.3rem,6.2vw,6.8rem);line-height:.9;font-weight:500;letter-spacing:-.055em}.hanis-product-hero__description{max-width:560px;margin:24px 0 0;color:color-mix(in srgb,var(--hanis-hero-text) 68%,transparent);font-size:clamp(15px,1.35vw,18px);line-height:1.7}.hanis-product-hero__button{min-height:48px;margin-top:30px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;gap:11px;border-radius:999px;background:var(--hanis-hero-accent);color:#fff;text-decoration:none;font-size:12px;line-height:1;font-weight:900;letter-spacing:.04em;box-shadow:0 14px 28px color-mix(in srgb,var(--hanis-hero-accent) 28%,transparent);transition:transform .22s ease,box-shadow .22s ease}.hanis-product-hero__button:hover{color:#fff;transform:translateY(calc(var(--hanis-button-lift)*-1));box-shadow:0 18px 34px color-mix(in srgb,var(--hanis-hero-accent) 34%,transparent)}.hanis-product-hero__stage{position:relative;flex:1 1 56%;min-width:0;height:600px;display:flex;align-items:center;justify-content:center}.hanis-product-hero__viewport{position:absolute;inset:0;overflow:hidden;perspective:1400px;perspective-origin:50% 48%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--hanis-edge-width),#000 calc(100% - var(--hanis-edge-width)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--hanis-edge-width),#000 calc(100% - var(--hanis-edge-width)),transparent 100%)}.hanis-product-hero__track{position:absolute;inset:0;transform-style:preserve-3d}.hanis-product-hero__slide{position:absolute;left:50%;top:50%;width:330px;height:500px;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translate(-50%,-50%) translate3d(0,0,-260px) scale(.54);transform-origin:center;filter:blur(4px);transition:transform var(--hanis-transition-duration) var(--hanis-transition-easing),opacity calc(var(--hanis-transition-duration)*.7) ease,filter calc(var(--hanis-transition-duration)*.75) ease;will-change:transform,opacity,filter}.hanis-product-hero__slide>a{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.hanis-product-hero__slide img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 28px 28px rgba(37,31,60,.18));user-select:none;transform:translate(var(--hanis-item-x,0),var(--hanis-item-y,0)) rotate(calc(var(--hanis-global-image-rotation) + var(--hanis-item-rotate,0deg))) scale(var(--hanis-item-scale,1));transform-origin:center;transition:transform var(--hanis-transition-duration) var(--hanis-transition-easing)}.hanis-product-hero__slide.is-active{z-index:5;opacity:1;pointer-events:auto;filter:blur(0);transform:translate(-50%,-50%) translate3d(0,0,80px) rotateZ(var(--hanis-active-rotate-z)) scale(var(--hanis-active-scale))}.hanis-product-hero__slide.is-prev{z-index:3;opacity:var(--hanis-side-opacity);filter:blur(var(--hanis-side-blur));transform:translate(-50%,-50%) translate3d(calc(var(--hanis-side-offset)*-1),0,var(--hanis-side-depth)) rotateY(var(--hanis-side-rotate-y)) rotateZ(calc(var(--hanis-side-tilt-z)*-1)) scale(var(--hanis-side-scale))}.hanis-product-hero__slide.is-next{z-index:3;opacity:var(--hanis-side-opacity);filter:blur(var(--hanis-side-blur));transform:translate(-50%,-50%) translate3d(var(--hanis-side-offset),0,var(--hanis-side-depth)) rotateY(calc(var(--hanis-side-rotate-y)*-1)) rotateZ(var(--hanis-side-tilt-z)) scale(var(--hanis-side-scale))}.hanis-product-hero__slide.is-far-prev{z-index:1;opacity:var(--hanis-far-opacity);filter:blur(var(--hanis-far-blur));transform:translate(-50%,-50%) translate3d(calc(var(--hanis-far-offset)*-1),0,-250px) rotateY(var(--hanis-far-rotate-y)) rotateZ(calc(var(--hanis-side-tilt-z)*-1.5)) scale(var(--hanis-far-scale))}.hanis-product-hero__slide.is-far-next{z-index:1;opacity:var(--hanis-far-opacity);filter:blur(var(--hanis-far-blur));transform:translate(-50%,-50%) translate3d(var(--hanis-far-offset),0,-250px) rotateY(calc(var(--hanis-far-rotate-y)*-1)) rotateZ(calc(var(--hanis-side-tilt-z)*1.5)) scale(var(--hanis-far-scale))}.hanis-product-hero__fade{position:absolute;z-index:7;top:0;bottom:0;width:var(--hanis-edge-width);pointer-events:none}.hanis-product-hero__fade--left{left:0;background:linear-gradient(to right,var(--hanis-hero-bg),transparent)}.hanis-product-hero__fade--right{right:0;background:linear-gradient(to left,var(--hanis-hero-bg-2),transparent)}.hanis-product-hero__arrow{position:absolute;z-index:12;top:50%;width:42px;height:42px;margin:0;padding:0;display:grid;place-items:center;transform:translateY(-50%);border:1px solid rgba(255,255,255,.68);border-radius:50%;background:rgba(255,255,255,.74);color:var(--hanis-hero-text);box-shadow:0 10px 24px rgba(37,31,60,.12);cursor:pointer;font-size:29px;line-height:1;transition:transform .2s ease,background .2s ease}.hanis-product-hero__arrow:hover{background:#fff}.hanis-product-hero__arrow--prev{left:12px}.hanis-product-hero__arrow--next{right:12px}.hanis-product-hero__dots{position:absolute;z-index:12;left:50%;bottom:24px;display:flex;align-items:center;gap:8px;transform:translateX(-50%)}.hanis-product-hero__dot{width:8px;height:8px;margin:0;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--hanis-hero-text) 22%,transparent);cursor:pointer;transition:width .2s ease,background .2s ease}.hanis-product-hero__dot[aria-selected=true]{width:26px;border-radius:999px;background:var(--hanis-hero-accent)}@media(max-width:900px){.hanis-product-hero{min-height:auto}.hanis-product-hero__inner{padding:54px 15px 42px;display:block}.hanis-product-hero__copy{max-width:100%!important;padding:0;text-align:center}.hanis-product-hero__title,.hanis-product-hero__description{margin-left:auto;margin-right:auto}.hanis-product-hero__title{font-size:clamp(3rem,11vw,5.2rem)}.hanis-product-hero__stage{height:500px;margin-top:18px}.hanis-product-hero__slide{width:270px;height:390px}}@media(max-width:560px){.hanis-product-hero__inner{padding:42px 11px}.hanis-product-hero__title{font-size:clamp(2.65rem,13vw,4rem)}.hanis-product-hero__description{margin-top:18px;font-size:14px}.hanis-product-hero__button{margin-top:22px}.hanis-product-hero__stage{height:420px}.hanis-product-hero__slide{width:230px;height:315px}.hanis-product-hero__arrow{width:36px;height:36px;font-size:24px}.hanis-product-hero__arrow--prev{left:2px}.hanis-product-hero__arrow--next{right:2px}.hanis-product-hero__dots{bottom:12px}}@media(prefers-reduced-motion:reduce){.hanis-product-hero__slide,.hanis-product-hero__slide img,.hanis-product-hero__button,.hanis-product-hero__arrow,.hanis-product-hero__dot{transition-duration:.01ms!important}}

/* =========================================================
   V1.2 — arrow icon controls and three-product mobile view
   ========================================================= */

.hanis-product-hero__arrow > span {
  display: block;
  font-size: 29px;
  line-height: .72;
  font-weight: 400;
  transform: translateY(-0.035em);
  pointer-events: none;
}

/* Keep the full click target while visually removing the circle. */
.hanis-product-hero--plain-arrows .hanis-product-hero__arrow,
.hanis-product-hero--plain-arrows .hanis-product-hero__arrow:hover,
.hanis-product-hero--plain-arrows .hanis-product-hero__arrow:focus {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/*
 * On mobile, keep the active product in the centre and expose the previous
 * and next products on both sides with blur and tilt.
 */
@media (max-width: 560px) {
  .hanis-product-hero--mobile-three {
    --hanis-side-offset: 56%;
    --hanis-side-depth: -70px;
    --hanis-side-rotate-y: 30deg;
    --hanis-side-tilt-z: 7deg;
    --hanis-side-scale: .62;
    --hanis-side-opacity: .38;
    --hanis-side-blur: 2px;
    --hanis-edge-width: 3%;
  }

  .hanis-product-hero--mobile-three .hanis-product-hero__stage {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .hanis-product-hero--mobile-three .hanis-product-hero__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 3%,
      #000 97%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 3%,
      #000 97%,
      transparent 100%
    );
  }

  .hanis-product-hero--mobile-three .hanis-product-hero__slide {
    width: min(52vw, 220px);
    height: 315px;
  }

  .hanis-product-hero--mobile-three .hanis-product-hero__slide.is-prev,
  .hanis-product-hero--mobile-three .hanis-product-hero__slide.is-next {
    visibility: visible !important;
    display: flex !important;
  }
}

/* When the option is disabled, mobile returns to one visible product. */
@media (max-width: 560px) {
  .hanis-product-hero:not(.hanis-product-hero--mobile-three)
  .hanis-product-hero__slide.is-prev,
  .hanis-product-hero:not(.hanis-product-hero--mobile-three)
  .hanis-product-hero__slide.is-next {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}


/* =========================================================
   V1.3 — true three-product mobile composition
   ========================================================= */

.hanis-product-hero {
  --hanis-mobile-stage-height: 360px;
  --hanis-mobile-product-width: 170px;
  --hanis-mobile-product-height: 300px;
  --hanis-mobile-image-zoom: 175%;
  --hanis-mobile-side-distance: 82%;
  --hanis-mobile-side-scale: .72;
  --hanis-mobile-side-opacity: .55;
  --hanis-mobile-side-blur: 1.5px;
  --hanis-mobile-side-rotation: 28deg;
  --hanis-mobile-side-tilt: 6deg;
}

@media (max-width: 560px) {
  .hanis-product-hero--mobile-three .hanis-product-hero__stage {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--hanis-mobile-stage-height) !important;
    margin-top: 12px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  /*
   * Remove the mobile mask and gradient overlays. They were hiding most of
   * the left/right product images and leaving only thin coloured slivers.
   */
  .hanis-product-hero--mobile-three .hanis-product-hero__viewport {
    inset: 0 !important;
    overflow: hidden !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    perspective: 1100px !important;
  }

  .hanis-product-hero--mobile-three .hanis-product-hero__fade {
    display: none !important;
  }

  .hanis-product-hero--mobile-three .hanis-product-hero__slide {
    width: var(--hanis-mobile-product-width) !important;
    height: var(--hanis-mobile-product-height) !important;
    visibility: visible !important;
  }

  /*
   * Zoom the PNG itself, rather than only enlarging its outer slide box.
   * This compensates for transparent padding around uploaded product PNGs.
   */
  .hanis-product-hero--mobile-three .hanis-product-hero__slide img {
    width: var(--hanis-mobile-image-zoom) !important;
    height: var(--hanis-mobile-image-zoom) !important;
    max-width: none !important;
    max-height: none !important;
    flex: 0 0 auto !important;
  }

  .hanis-product-hero--mobile-three .hanis-product-hero__slide.is-active {
    z-index: 5 !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: blur(0) !important;
    transform:
      translate(-50%, -50%)
      translate3d(0, 0, 70px)
      rotateY(0deg)
      rotateZ(var(--hanis-active-rotate-z))
      scale(1) !important;
  }

  .hanis-product-hero--mobile-three .hanis-product-hero__slide.is-prev {
    z-index: 3 !important;
    opacity: var(--hanis-mobile-side-opacity) !important;
    visibility: visible !important;
    filter: blur(var(--hanis-mobile-side-blur)) !important;
    transform:
      translate(-50%, -50%)
      translate3d(
        calc(var(--hanis-mobile-side-distance) * -1),
        0,
        -70px
      )
      rotateY(var(--hanis-mobile-side-rotation))
      rotateZ(calc(var(--hanis-mobile-side-tilt) * -1))
      scale(var(--hanis-mobile-side-scale)) !important;
  }

  .hanis-product-hero--mobile-three .hanis-product-hero__slide.is-next {
    z-index: 3 !important;
    opacity: var(--hanis-mobile-side-opacity) !important;
    visibility: visible !important;
    filter: blur(var(--hanis-mobile-side-blur)) !important;
    transform:
      translate(-50%, -50%)
      translate3d(
        var(--hanis-mobile-side-distance),
        0,
        -70px
      )
      rotateY(calc(var(--hanis-mobile-side-rotation) * -1))
      rotateZ(var(--hanis-mobile-side-tilt))
      scale(var(--hanis-mobile-side-scale)) !important;
  }

  /*
   * Keep additional slides hidden on mobile so the layout always reads as
   * exactly three products: previous, active and next.
   */
  .hanis-product-hero--mobile-three .hanis-product-hero__slide.is-far-prev,
  .hanis-product-hero--mobile-three .hanis-product-hero__slide.is-far-next {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .hanis-product-hero--mobile-three .hanis-product-hero__arrow {
    z-index: 15 !important;
  }
}


/* =========================================================
   V1.4 — seamless mobile carousel edges
   ========================================================= */

/*
 * The previous mobile viewport used overflow clipping inside the padded
 * content container. Because blurred products extend beyond their own box,
 * the clipping created visible straight vertical lines on both sides.
 *
 * The hero itself now performs the final clipping while the inner stage,
 * viewport and track remain visually open.
 */
@media (max-width: 560px) {
  .hanis-product-hero--mobile-three {
    overflow: hidden !important;
  }

  .hanis-product-hero--mobile-three .hanis-product-hero__stage {
    width: calc(100% + 22px) !important;
    max-width: none !important;
    margin-left: -11px !important;
    margin-right: -11px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
    contain: none !important;
  }

  .hanis-product-hero--mobile-three .hanis-product-hero__viewport {
    inset: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
    contain: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .hanis-product-hero--mobile-three .hanis-product-hero__track {
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
    contain: none !important;
  }

  .hanis-product-hero--mobile-three .hanis-product-hero__slide {
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
    backface-visibility: visible !important;
  }

  .hanis-product-hero--mobile-three .hanis-product-hero__slide img {
    overflow: visible !important;
    clip-path: none !important;
    backface-visibility: visible !important;
  }

  /*
   * Disable every decorative edge overlay on mobile. Side products now fade
   * naturally through their opacity and blur rather than a rectangular mask.
   */
  .hanis-product-hero--mobile-three .hanis-product-hero__fade,
  .hanis-product-hero--mobile-three .hanis-product-hero__fade::before,
  .hanis-product-hero--mobile-three .hanis-product-hero__fade::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }
}


/* =========================================================
   V1.5 — clear transparent/overlay mobile headers
   ========================================================= */

.hanis-product-hero {
  --hanis-auto-header-offset: 0px;
  --hanis-manual-header-offset: 0px;
}

@media (max-width: 767px) {
  /*
   * Astra transparent headers and Elementor overlay headers are positioned
   * over page content. Move only this hero below the actual visible header.
   */
  .hanis-product-hero--auto-mobile-header {
    margin-top:
      calc(
        var(--hanis-auto-header-offset, 0px) +
        var(--hanis-manual-header-offset, 0px)
      ) !important;
  }
}


/* =========================================================
   V1.6 — preserve hero background behind mobile header
   ========================================================= */

@media (max-width: 767px) {
  /*
   * Do not move the entire hero down. Keeping margin at zero allows the
   * hero background to remain behind Astra/Elementor's transparent header.
   */
  .hanis-product-hero--auto-mobile-header {
    margin-top: 0 !important;
  }

  /*
   * Move only the hero content below the visible header. The background
   * continues from the top of the page with no white strip between header
   * and hero.
   */
  .hanis-product-hero--auto-mobile-header
  .hanis-product-hero__inner {
    padding-top:
      calc(
        54px +
        var(--hanis-auto-header-offset, 0px) +
        var(--hanis-manual-header-offset, 0px)
      ) !important;
  }
}

@media (max-width: 560px) {
  .hanis-product-hero--auto-mobile-header
  .hanis-product-hero__inner {
    padding-top:
      calc(
        42px +
        var(--hanis-auto-header-offset, 0px) +
        var(--hanis-manual-header-offset, 0px)
      ) !important;
  }
}


/* =========================================================
   V1.7 — independent manual top and bottom padding
   ========================================================= */

.hanis-product-hero {
  --hanis-content-padding-top: 20px;
  --hanis-content-padding-bottom: 20px;
}

.hanis-product-hero .hanis-product-hero__inner {
  padding-top: var(--hanis-content-padding-top, 20px) !important;
  padding-bottom: var(--hanis-content-padding-bottom, 20px) !important;
}

@media (max-width: 767px) {
  /*
   * When automatic header clearance is enabled, retain the user's manual
   * top padding and add only the measured header overlap.
   */
  .hanis-product-hero--auto-mobile-header
  .hanis-product-hero__inner {
    padding-top:
      calc(
        var(--hanis-content-padding-top, 20px) +
        var(--hanis-auto-header-offset, 0px) +
        var(--hanis-manual-header-offset, 0px)
      ) !important;

    padding-bottom:
      var(--hanis-content-padding-bottom, 20px) !important;
  }
}