@property --kl-product-hover-ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.bkvp-hover-image-control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.bkvp-hover-image-preview {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  background: #f6f7f7;
}

.bkvp-hover-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bkvp-hover-image-control .description {
  margin: 2px 0 0;
}

.kl-product-hover-card__media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: inherit !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  transform: translateZ(0);
}

.kl-product-hover-card.kl-product-hover-card {
  --kl-product-hover-ring-angle: 0deg;
  --kl-product-hover-ring-opacity: 0;
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  transform: translateZ(0);
  box-shadow: none !important;
  filter: none !important;
}

.kl-product-hover-card::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 3;
  border-radius: 10px;
  padding: 2px;
  background: conic-gradient(
    from var(--kl-product-hover-ring-angle),
    rgba(255, 255, 255, .18) 0deg,
    rgba(255, 244, 211, .92) 42deg,
    rgba(203, 151, 62, .86) 92deg,
    rgba(255, 255, 255, .24) 150deg,
    rgba(126, 89, 31, .34) 225deg,
    rgba(255, 246, 222, .82) 292deg,
    rgba(255, 255, 255, .18) 360deg
  );
  opacity: var(--kl-product-hover-ring-opacity);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  will-change: opacity;
}

.kl-product-hover-card.is-kl-product-hovering::before {
  animation: kl-product-hover-ring-spin 3.8s linear infinite;
}

.kl-product-hover-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.kl-product-hover-card__image--primary {
  transform: translate3d(0, 0, 0) scale(1);
}

.kl-product-hover-card.has-kl-product-hover .kl-product-hover-card__image {
  will-change: opacity, transform;
}

.kl-product-hover-card.is-gsap-ready .kl-product-hover-card__image {
  opacity: var(--kl-product-image-opacity, 1) !important;
  transform: translate3d(0, 0, 0) scale(var(--kl-product-image-scale, 1)) !important;
}

.kl-product-hover-card__image--secondary {
  z-index: 2;
  opacity: 0.001;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
}

.kl-product-hover-card.has-kl-product-hover-swap:not(.is-gsap-ready):hover .kl-product-hover-card__image--primary,
.kl-product-hover-card.has-kl-product-hover-swap:not(.is-gsap-ready):focus-within .kl-product-hover-card__image--primary {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1.018);
}

.kl-product-hover-card.has-kl-product-hover-swap:not(.is-gsap-ready):hover .kl-product-hover-card__image--secondary,
.kl-product-hover-card.has-kl-product-hover-swap:not(.is-gsap-ready):focus-within .kl-product-hover-card__image--secondary {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1.018);
}

.kl-product-hover-card.has-kl-product-hover-single:not(.is-gsap-ready):hover .kl-product-hover-card__image--primary,
.kl-product-hover-card.has-kl-product-hover-single:not(.is-gsap-ready):focus-within .kl-product-hover-card__image--primary {
  transform: translate3d(0, 0, 0) scale(1.018);
}

.kl-product-hover-card.has-kl-product-hover:not(.is-gsap-ready):hover,
.kl-product-hover-card.has-kl-product-hover:not(.is-gsap-ready):focus-within {
  --kl-product-hover-ring-opacity: 1;
}

.kl-product-hover-card.has-kl-product-hover:not(.is-gsap-ready):hover::before,
.kl-product-hover-card.has-kl-product-hover:not(.is-gsap-ready):focus-within::before {
  animation: kl-product-hover-ring-spin 3.8s linear infinite;
}

.kl-product-hover-card:not(.is-gsap-ready) .kl-product-hover-card__image {
  transition: opacity 1.45s cubic-bezier(.37, 0, .63, 1), transform 1.45s cubic-bezier(.37, 0, .63, 1);
}

@media (hover: hover) and (pointer: fine) {
  .kl-product-hover-card.has-kl-product-hover:not(.is-gsap-ready):hover,
  .kl-product-hover-card.has-kl-product-hover:not(.is-gsap-ready):focus-within {
    transform: translateZ(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kl-product-hover-card,
  .kl-product-hover-card__image {
    transition-duration: 0.01ms !important;
  }

  .kl-product-hover-card {
    transform: none !important;
  }

  .kl-product-hover-card.has-kl-product-hover::before {
    animation: none !important;
  }
}

@keyframes kl-product-hover-ring-spin {
  to {
    --kl-product-hover-ring-angle: 360deg;
  }
}