.brandly-hhs {
  position: relative;
  overflow: hidden;
  --brandly-hhs-slide-duration: 450ms;
  --brandly-hhs-pulse-duration: 1.8s;
  --brandly-hhs-pulse-border: rgba(255, 255, 255, 0.5);
  --brandly-hhs-title-duration: 700ms;
  --brandly-hhs-subtitle-duration: 700ms;
  --brandly-hhs-subtitle-delay: 180ms;
  --brandly-hhs-content-container: 1200px;
  --brandly-hhs-content-gutter: 24px;
  --brandly-hhs-caption-offset-left: 5%;
  --brandly-hhs-caption-offset-right: 5%;
  --brandly-hhs-caption-center-shift: 0px;
}

.brandly-hhs-track {
  position: relative;
  min-height: 320px;
}

.brandly-hhs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--brandly-hhs-slide-duration) ease;
  will-change: opacity, transform, filter;
}

.brandly-hhs-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.brandly-hhs-anim-slide-left .brandly-hhs-slide,
.brandly-hhs-anim-slide-right .brandly-hhs-slide {
  transform: translateX(0);
}

.brandly-hhs-anim-slide-left.is-dir-next .brandly-hhs-slide.is-active {
  animation: brandlyHhsSlideInLeft var(--brandly-hhs-slide-duration) ease both;
}

.brandly-hhs-anim-slide-left.is-dir-prev .brandly-hhs-slide.is-active {
  animation: brandlyHhsSlideInRight var(--brandly-hhs-slide-duration) ease both;
}

.brandly-hhs-anim-slide-right.is-dir-next .brandly-hhs-slide.is-active {
  animation: brandlyHhsSlideInRight var(--brandly-hhs-slide-duration) ease both;
}

.brandly-hhs-anim-slide-right.is-dir-prev .brandly-hhs-slide.is-active {
  animation: brandlyHhsSlideInLeft var(--brandly-hhs-slide-duration) ease both;
}

.brandly-hhs-anim-zoom-in .brandly-hhs-slide.is-active {
  animation: brandlyHhsZoomIn var(--brandly-hhs-slide-duration) ease both;
}

.brandly-hhs-anim-zoom-out .brandly-hhs-slide.is-active {
  animation: brandlyHhsZoomOut var(--brandly-hhs-slide-duration) ease both;
}

.brandly-hhs-anim-blur .brandly-hhs-slide.is-active {
  animation: brandlyHhsBlurIn var(--brandly-hhs-slide-duration) ease both;
}

.brandly-hhs-anim-flip .brandly-hhs-slide.is-active {
  animation: brandlyHhsFlipIn var(--brandly-hhs-slide-duration) ease both;
}

.brandly-hhs-slide > img {
  width: 100%;
  height: auto;
  display: block;
}

.brandly-hhs-caption {
  position: absolute;
  left: calc(
    max(
      var(--brandly-hhs-content-gutter),
      calc((100% - var(--brandly-hhs-content-container)) / 2)
    ) + var(--brandly-hhs-caption-offset-left)
  );
  bottom: 8%;
  max-width: 520px;
  color: #fff;
  z-index: 2;
}

.brandly-hhs-caption h2 {
  margin: 0 0 10px;
  font-size: 46px;
  line-height: 1.15;
}

.brandly-hhs-caption p {
  margin: 0;
  font-size: 17px;
}

.brandly-hhs-caption h2,
.brandly-hhs-caption p {
  opacity: 1;
}

.brandly-hhs-title-anim-none .brandly-hhs-slide.is-active .brandly-hhs-caption h2,
.brandly-hhs-subtitle-anim-none .brandly-hhs-slide.is-active .brandly-hhs-caption p {
  opacity: 1;
  animation: none;
}

.brandly-hhs-title-anim-fade-up .brandly-hhs-slide.is-active .brandly-hhs-caption h2 { animation: brandlyHhsTextFadeUp var(--brandly-hhs-title-duration) ease both; }
.brandly-hhs-title-anim-fade-down .brandly-hhs-slide.is-active .brandly-hhs-caption h2 { animation: brandlyHhsTextFadeDown var(--brandly-hhs-title-duration) ease both; }
.brandly-hhs-title-anim-fade-left .brandly-hhs-slide.is-active .brandly-hhs-caption h2 { animation: brandlyHhsTextFadeLeft var(--brandly-hhs-title-duration) ease both; }
.brandly-hhs-title-anim-fade-right .brandly-hhs-slide.is-active .brandly-hhs-caption h2 { animation: brandlyHhsTextFadeRight var(--brandly-hhs-title-duration) ease both; }
.brandly-hhs-title-anim-zoom-in .brandly-hhs-slide.is-active .brandly-hhs-caption h2 { animation: brandlyHhsTextZoomIn var(--brandly-hhs-title-duration) ease both; }
.brandly-hhs-title-anim-zoom-out .brandly-hhs-slide.is-active .brandly-hhs-caption h2 { animation: brandlyHhsTextZoomOut var(--brandly-hhs-title-duration) ease both; }
.brandly-hhs-title-anim-blur .brandly-hhs-slide.is-active .brandly-hhs-caption h2 { animation: brandlyHhsTextBlurIn var(--brandly-hhs-title-duration) ease both; }

.brandly-hhs-subtitle-anim-fade-up .brandly-hhs-slide.is-active .brandly-hhs-caption p { animation: brandlyHhsTextFadeUp var(--brandly-hhs-subtitle-duration) ease var(--brandly-hhs-subtitle-delay) both; }
.brandly-hhs-subtitle-anim-fade-down .brandly-hhs-slide.is-active .brandly-hhs-caption p { animation: brandlyHhsTextFadeDown var(--brandly-hhs-subtitle-duration) ease var(--brandly-hhs-subtitle-delay) both; }
.brandly-hhs-subtitle-anim-fade-left .brandly-hhs-slide.is-active .brandly-hhs-caption p { animation: brandlyHhsTextFadeLeft var(--brandly-hhs-subtitle-duration) ease var(--brandly-hhs-subtitle-delay) both; }
.brandly-hhs-subtitle-anim-fade-right .brandly-hhs-slide.is-active .brandly-hhs-caption p { animation: brandlyHhsTextFadeRight var(--brandly-hhs-subtitle-duration) ease var(--brandly-hhs-subtitle-delay) both; }
.brandly-hhs-subtitle-anim-zoom-in .brandly-hhs-slide.is-active .brandly-hhs-caption p { animation: brandlyHhsTextZoomIn var(--brandly-hhs-subtitle-duration) ease var(--brandly-hhs-subtitle-delay) both; }
.brandly-hhs-subtitle-anim-zoom-out .brandly-hhs-slide.is-active .brandly-hhs-caption p { animation: brandlyHhsTextZoomOut var(--brandly-hhs-subtitle-duration) ease var(--brandly-hhs-subtitle-delay) both; }
.brandly-hhs-subtitle-anim-blur .brandly-hhs-slide.is-active .brandly-hhs-caption p { animation: brandlyHhsTextBlurIn var(--brandly-hhs-subtitle-duration) ease var(--brandly-hhs-subtitle-delay) both; }

.brandly-hhs-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  transition: left .2s linear, top .2s linear;
  will-change: left, top;
}

.brandly-hhs-hotspot:hover,
.brandly-hhs-hotspot:focus-within {
  z-index: 12;
}

.brandly-hhs-pin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: #111;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.brandly-hhs-pin::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--brandly-hhs-pulse-border);
  animation: brandlyHhsPulse var(--brandly-hhs-pulse-duration) ease-out infinite;
}

.brandly-hhs--no-pulse .brandly-hhs-pin::after {
  display: none;
  animation: none;
}

.brandly-hhs-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  min-width: 180px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
  padding: 10px 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 13;
}

.brandly-hhs-hotspot:hover .brandly-hhs-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.brandly-hhs-tooltip a {
  text-decoration: none;
}

.brandly-hhs-product-name {
  display: block;
  color: #111;
  font-weight: 600;
  margin-bottom: 3px;
}

.brandly-hhs-product-price {
  color: #666;
  font-size: 14px;
}

.brandly-hhs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,.45);
  color: #fff;
  cursor: pointer;
  z-index: 4;
}

.brandly-hhs-arrow.is-prev { left: 16px; }
.brandly-hhs-arrow.is-next { right: 16px; }

@media (hover: hover) and (pointer: fine) {
  .brandly-hhs.brandly-hhs--arrows-on-hover .brandly-hhs-arrow {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
  }

  .brandly-hhs.brandly-hhs--arrows-on-hover:hover .brandly-hhs-arrow,
  .brandly-hhs.brandly-hhs--arrows-on-hover:focus-within .brandly-hhs-arrow {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.brandly-hhs-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 4;
}

.brandly-hhs-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.55);
  cursor: pointer;
}

.brandly-hhs-dot.is-active {
  background: #fff;
}

@keyframes brandlyHhsPulse {
  0% { opacity: 1; transform: scale(.75); }
  70% { opacity: 0; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.25); }
}

@keyframes brandlyHhsSlideInLeft {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes brandlyHhsSlideInRight {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes brandlyHhsZoomIn {
  from { opacity: 0; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes brandlyHhsZoomOut {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes brandlyHhsBlurIn {
  from { opacity: 0; filter: blur(10px); transform: scale(1.02); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes brandlyHhsFlipIn {
  from { opacity: 0; transform: perspective(900px) rotateY(12deg); }
  to { opacity: 1; transform: perspective(900px) rotateY(0deg); }
}

@keyframes brandlyHhsTextFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes brandlyHhsTextFadeDown {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes brandlyHhsTextFadeLeft {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes brandlyHhsTextFadeRight {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes brandlyHhsTextZoomIn {
  from { opacity: 0; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes brandlyHhsTextZoomOut {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes brandlyHhsTextBlurIn {
  from { opacity: 0; filter: blur(8px); }
  to { opacity: 1; filter: blur(0); }
}